模型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;
})
网友评论