• 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方式,而不是用代码混乱HTML的模版
    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>     
  • 相关阅读:
    Teamwork——Week4 团队分工和预估项目时间
    Team Homework #3 软件工程在北航——IloveSE
    《DWZ笔记一》<select>动态联动菜单
    asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现
    经典SQL语句基础50题
    打垮美国发起的这场经济战争[转自由凤凰论坛]
    为什么要删我贴呢?
    5年,从5元到500万,我的创业经历(转自VFP精英站,未完)
    发现大家对销售感兴趣,再来两则(二)
    你们知道美国是怎么报道别人的灾难吗?
  • 原文地址:https://www.cnblogs.com/yixiaoheng/p/mastering-web-application-development-with-angularjs-note-1.html
Copyright © 2020-2023  润新知