Mastering Web Application Development with AngularJS 读书笔记(一)

第一章笔记 (一)

一、PS：运行时配置IIS

<html>
    <head>
         <script src="angular.js"></script>
    </head>
    <body ng-app ng-init="name = 'World'">
         <h1>Hello, {{name}}!</h1>
    </body>
</html>

分析：

1、ng-init：在模版渲染前初始化模型（ to initialize model before a template gets rendered）

2、{{name}}： 渲染模型的值（renders model value）

 

二、上述例子的进一步：

<body ng-app ng-init="name='World'">
    Say hello to:<input type="text" ng-model="name" />
  <h1>hello,{{name}}</h1>
 </body> 

实现的效果：每次在输入框敲击完成，都会影响下面名字的显示，而且无需额外的同步代码。

结论：

传统的模版系统，用一种线性单一的方式渲染模版：模型（变量）和模版一起创造一个结果型的标记。

每次变量改变需要模版重新计算结果。

AngularJS 不一样，每次用户触发的视图的改变，立即影响模型(变量），模型的改变立即传播到模版。

 

三、 AngularJS中的MVC模式

举例：

<script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript">
  var HelloCtrl = function ($scope) {
        $scope.name = 'World';
        $scope.getName = function() {
        return $scope.name;
    };
}
  </script>
<body ng-app >
    <div ng-controller="HelloCtrl">
    Say hello to: <input type="text" ng-model="name"><br>
  <h1>Hello, {{name}}!</h1>
  <h2>The same,{{getName()}}</h2>
    </div>
 </body>            

A、Scope

这的$scope对象，对模版暴露域参数(模型)。通过 将属性分配给scope实例，我们可以提供新的值让模版渲染。

$scope 对象能够让我们精准的控制域模型里面那一部分对View层是可用的。从概念上讲，AngularJS的

scopes更贴近于ViewModel从 MVVM 模式来讲.

B、Controller

在练习中，初始化逻辑包含两方面职责：

提供初始化模型的值；为$scope 提供特定UI的方法；

注意：一个Controller做的工作和ng-init指令一样，当它用来初始化模型的值时。但Controller是用的JS方式，而不是用代码混乱ＨＴＭＬ的模版

C、Model

可以用任何已经存在的，纯javascript类或者对象，在model这层，同样使用他们。

为了暴露一个model给AngularJS 你只需要把它交给$scope.

 

四、发掘域（Scopes）

每个$scope是Scope类的实例。Scope类有控制scope生命周期的方法，提供事件传播的设施，支持模版渲染过程。

五、scopes的层级

通过  ng-controller 指令，用Scope.$new()方法，一个新的scope就被创建了。

AngularJS有一个标记 $rootScope-是所有其他scope的父。 

 Indeed, AngularJS has a notation of the $rootScope。当一个程序被引导的时候，这个 $rootScope实例就被创建了。 ng-controller指令只是scope创建指令中的一个例子。只要遇到scope-creating指令，AngularJS就会创建一个Scope类的实例。新创建的scope会用$parent

属性，指向它的父scope。在DOM 树中可以有很多scope创建类指令 ，很多scopes会被创建。

举例：

<script type="text/javascript">
  var WorldCtrl = function ($scope) {
$scope.population = 7000;
$scope.countries = [
                {name:'France', population:63.1},
                {name:'United Kingdom', population:61.8}
            ];
}
  </script>
<body ng-app >
    <div ng-controller="WorldCtrl" class="container">
    <ul>
    <li ng-repeat="country in countries">
    {{country.name}} has population of{{country.population}}millions
    </li>
    </ul>
    </div>
 </body>

ng-repeat 指令，允许我们迭代countries集合并且为每一个集合中的元素创建一个新的DOM元素。每个项都有一个新的变量country被创建，并暴露给一个$scope通过一个view来渲染。

这有个问题，为每个country，一个新的变量都需要暴露给一个$scope，并且我们不能简单的重写已经暴露的值。AngularJS通过给集合中的每个元素创建一个新的sope来解决这个问题。新被创建的scope会形成一个层级匹配DOM树的结构。

这种方式每个项都有自己的命名空间，在前面这个例子就是每个<li>元素都会有自己的scope,country变量在那定义。

 

六、Scopes的层级结构和继承性

一个scope上定义的属性，对所有它的子scopes都是可见的，假如它没有重新定义同名的属性。在实际应用中很有用，这样我们就不用一遍又一遍的重新定义在一个scope从层级结构中都有用的属性了。AngularJS 中Scope的继承性与 JavaScript中原型继承遵循同样的规则。 

比如上面的例子：

给scope增加一个方法：

 $scope.worldsPercentage = function (countryPopulation) {
    return (countryPopulation / $scope.population)*100;
} 

<li ng-repeat="country in countries">
    {{country.name}} has population of{{country.population}}millions,
    {{worldsPercentage(country.population)}} % of the World's population
</li>

 

七、通过Scope层级继承的危险性

通过scopes层级的继承使很直观的，并且当它牵扯到写访问的时候也很容易理解。但某些情况下会有点复杂。

比如：如果只在一个scope定义某变量，但在子scope的时候把它忽略掉了。

var HelloCtrl = function ($scope) {
};
<body ng-app ng-init="name='World'">
<h1>Hello, {{name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to: <input type="text" ng-model="name">
<h2>Hello, {{name}}!</h2>
</div>
</body> 

默认打开的时候，都显示的是World。这证明了在父scope定义的变量在子scopes是可以访问的。

但在文本框输入文字之后，只有<h2>标签中的name相应的改变了。

一个新的变量被创建在HelloCtrl 控制器初始化的scope中，而不是改变$rootScope 实例的值。 

scopes原型性的继承彼此。所有的规则于JavaScript中对象的原型继承是一致的。

不要直接给scope绑定属性

注意：避免直接直接给scope绑定属性。双向的数据绑定到对象的属性上是个好方法，提供给ng-model指令的表达式最好是带点的，比如 ng-model="thing.name"

举例：

<body ng-app ng-init="thing={name:'World'}">
    <h1>Hello, {{thing.name}}</h1>
    <div ng-controller="HelloCtrl">
        Say hello to: <input type="text" ng-model="thing.name">
        <h2>Hello, {{thing.name}}!</h2>
    </div>
</body>