AngularJS从入门到放弃

模型M

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

控制器C

控制器的作用是增强视图

创建控制器

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

});

控制器和视图做关联

视图C

视图就是HTML而已，Angular做了一些增强

• ng-click = "select(item)"
  ng-class = "{active:item == active}"
  >{{item}}

新增

数据绑定

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

差值绑定：

{{name}}

输入域绑定：

计算表达式

Hello，{{name||'world'}}！

作用域$scope

控制器和视图是通过$scope发生关系的
$scope.list = [
"菜单和导航优化",
"我的工作台"
];

$scope.add = function(){
$scope.list.push($scope.newTodo);
$scope.newTodo = '';
}
新增

指令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;
})