angular初印象

1: Angular的基本概念
1: angular是MV**的框架，所以并不是所谓的MVC框架
2: angular的View： 鼓励你创建自己的新的HTML元素，这些元素拥有自己的属性和行为。在angular里面叫Directives，这个其实就是React里面的component。
3: angular的Model：angular的model就是一个个纯的javaScript object。
4: angular的Scope: angular的一个重要思想Two-way Data Binding，也就是双向数据绑定。这个双向是指View和Model之间。如果Model发生了变化，自然View会反应这种变化，而他们俩之间的这种作出反应靠的是angular的Scope在其中作为种胶水的角色。

2: Angular的 M.V.C
1: angular的controller

HTML code:

    
    
    


    

        

            
Good {{timeOfDay}}, {{name}}!

            

               
Good {{timeOfDay}}, {{name}}!

               

                   
Good {{timeOfDay}}, {{name}}!
               
            
    
        
    

app.js

var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.name = 'Nikki';
}]);
myApp.controller('ChildController', ['$scope', function($scope)             {
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope',     function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);

a.css

div.spicy div {
  padding: 5px;
  border: solid 1px green;
}

结果：

通过以上例子，主要学习以下几点知识：

1: angular里面的module的概念

假如说把一个angular应用程序比喻为一个银河系，那module就是一个一个独立的星球，比方说地球。地球是一个载体，它拥有阳光，空气，水等一系列构成一个生态圈的各种条件。那module就像地球，它是controllers，services，filters，directives等的container.也可以把module看作是一个上下文（context），所以就像上面的代码一样，在html里面，我们通过ng-app='scopeInheritance' (其中‘scopeInheritance’是module的名字)来指定接下来在这个div里面出现的任何东西都是在这个context下面的，也是如此，我们之后也才能在这个context下面找到定义在这个module里的controller（MainController，ChildController，GrandChildController）。

2: angular的controller

首先，html和angular的controller通过ng-controller='MainController'来进行绑定，其中MainController是想要绑定的controller的名字。
当把一个controller和某个html的tag绑定的时候，angular会根据这个controller的构造函数来实例化一个对象。一个scope也会被创建，而且这个scope会作为这个controller的构造函数的一个可注入参数。
所以，我们会在这个scope上定义我们的数据model，在controller里面初始化它们，比如：

$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';

有时候，我们也会对这些数据有操作修改的需求，那也是通过在$scope上定义相应的方法来完成。在html里面我们就可以通过angular的语法，两个大括号来取得这些变量的值，比方说：

 
Good {{timeOfDay}}, {{name}}!
 // Good morning, Nikki!

以上例子，其实还想说明的一点是，angular的controller定义的scope就跟一般的编程语言的scope一样：子元素可以访问到父元素定义的变量或者方法，如果重名，使用自己的。