AngularJS从入门到放弃

模型M

在AngularJS里面,模型就是普通的JavaScript对象

控制器C

控制器的作用是增强视图

创建控制器

angular.module('myApp',[]);
.controller('myApp',function($scope){

});

控制器和视图做关联

<body ng-controller = "myApp">

视图C

视图就是HTML而已,Angular做了一些增强
<ul>
<li ng-repeat = "item in list"
ng-click = "select(item)"
ng-class = "{active:item == active}"
>{{item}}</li>
</ul>
<input type = "text" ng-model = "newTodo">
<button ng-click = "add()">新增</button>

数据绑定

Angular提供双向数据绑定,模型($scope)发生变化,视图自动刷新;视图发生变化,模型也会更新

差值绑定:

{{name}}

输入域绑定:

<input type="text" ng-model="name">

计算表达式

Hello,{{name||'world'}}!

作用域$scope

控制器和视图是通过$scope发生关系的
$scope.list = [
"菜单和导航优化",
"我的工作台"
];
<li ng-repeat = "item in list"></li>
$scope.add = function(){
$scope.list.push($scope.newTodo);
$scope.newTodo = '';
}
<button ng-click = "add()">新增</button>

指令Directive

指令本质上就是Angular扩展的具有自定义功能的HTML元素和属性。

Angular内置指令 ....去看菜鸟教程吧

过滤器

过滤器是用来格式化显示给用户的数据

Angular内置过滤器

currency lowercase
date number
filter orderBy
json uppercase
limitTo

Angular内置时间指令

ng-blur ng-keyup ng-mousedown
ng-change ng-mouseenter ng-mouseleave
ng-click ng-mousemove ng-mouseover
ng-copy ng-mouseup ng-paste
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress

服务Service

服务提供了一种应用在整个生命周期内都保持数据的方法,它能够在控制器之间进行通信,并且保持数据一致性。

前面说的都是废话

说白了Service就是把业务逻辑从Controller里面抽出来单独封装起来保持Controller简单一点,实现代码复用,数据共享

Ajax

$http.get('phones/phones.josn')
.then(function(response){
self.phones = response.data;
})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容