AngularJS 从零开始学习(一)

什么是AngularJS？

AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架。当模型改变时，页面也能自动随之更新，反之亦然。当某个域的内容发生变化时，与之关联的模型也能更新。正因为Angular处理了所有的中间代码，所以你不用像jQuery那样，手动更新HTML或者事件监听。事实上，这里没有任何一个例子使用到了jQuery！

几大特性(可以像android一样理解为四大组件的这种特性)：

特性一：双向的数据绑定

个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM，传统来说，当model变化了。开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View；angularJS实现的双向数据绑定能够同步DOM和Model

特性二：模板

官方文档的上的解释是：A module is a collection of services, directives, controllers, filters, and configuration information;看到了吧，是个集合；这个模板其实就是个扩充了的html,只是这里面有很多对html的处理操作，包含了很多帮助你映射model到view的内容。引用模板是通过ng-app指令来实现的，把当前网页声明为angularJS应用，然后进行后面的操作！

特性三：MVC

Model

model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes，使用 proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。

ViewModel

viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。

viewmodel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。

Controller

controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

特性四：服务和依赖注入

特性五：指令（Directives）

指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。看个例子：

myModule.directive('myComponent', function(mySharedService) {
 
    return {
 
        restrict: 'E',
 
        controller: function($scope, $attrs, mySharedService) {
 
            $scope.$on('handleBroadcast', function() {
 
                $scope.message = 'Directive: ' + mySharedService.message;
 
            });
 
        },
 
        replace: true,
 
        template: '<input>'
 
    };
 
});
 
然后，你可以使用这个自定义的directive来使用：
 
<my-component ng-model="message"></my-component>

控制器controllers

尽管控制器看起来并没有起到什么控制的作用，但是它在这里起到了至关重要的作用。通过给定我们数据模型的语境，控制器允许我们建立模型和视图之间的数据绑定。我们是这样把表现层，数据和逻辑部件联系在一起的：

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}

待续