第一章笔记 (一)

一、PS：运行时配置IIS

  1. <html>
  2.     <head>
  3.          <script src="angular.js"></script>
  4.     </head>
  5.     <body ng-app ng-init="name = 'World'">
  6.          <h1>Hello, {{name}}!</h1>
  7.     </body>
  8. </html>
分析：
1、ng-init：在模版渲染前初始化模型（ to initialize model before a template gets rendered）
2、{{name}}： 渲染模型的值（renders model value）
 
二、上述例子的进一步：
  1. <body ng-app ng-init="name='World'">
  2.     Say hello to:<input type="text" ng-model="name" />
  3.   <h1>hello,{{name}}</h1>
  4.  </body>
实现的效果：每次在输入框敲击完成，都会影响下面名字的显示，而且无需额外的同步代码。
结论：
传统的模版系统，用一种线性单一的方式渲染模版：模型（变量）和模版一起创造一个结果型的标记。
每次变量改变需要模版重新计算结果。
AngularJS 不一样，每次用户触发的视图的改变，立即影响模型(变量），模型的改变立即传播到模版。
 
三、 AngularJS中的MVC模式
举例：
  1. <script type="text/javascript" src="angular.js"></script>
  2.   <script type="text/javascript">
  3.   var HelloCtrl = function ($scope) {
  4.         $scope.name = 'World';
  5.         $scope.getName = function() {
  6.         return $scope.name;
  7.     };
  8. }
  9.   </script>
  10. <body ng-app >
  11.     <div ng-controller="HelloCtrl">
  12.     Say hello to: <input type="text" ng-model="name"><br>
  13.   <h1>Hello, {{name}}!</h1>
  14.   <h2>The same,{{getName()}}</h2>
  15.     </div>
  16.  </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会被创建。
举例：
  1. <script type="text/javascript">
  2.   var WorldCtrl = function ($scope) {
  3. $scope.population = 7000;
  4. $scope.countries = [
  5.                 {name:'France', population:63.1},
  6.                 {name:'United Kingdom', population:61.8}
  7.             ];
  8. }
  9.   </script>
  10. <body ng-app >
  11.     <div ng-controller="WorldCtrl" class="container">
  12.     <ul>
  13.     <li ng-repeat="country in countries">
  14.     {{country.name}} has population of{{country.population}}millions
  15.     </li>
  16.     </ul>
  17.     </div>
  18.  </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增加一个方法：
  1.  $scope.worldsPercentage = function (countryPopulation) {
  2.     return (countryPopulation / $scope.population)*100;
  3. } 
  1. <li ng-repeat="country in countries">
  2.     {{country.name}} has population of{{country.population}}millions,
  3.     {{worldsPercentage(country.population)}} % of the World's population
  4. </li>
 
七、通过Scope层级继承的危险性
通过scopes层级的继承使很直观的，并且当它牵扯到写访问的时候也很容易理解。但某些情况下会有点复杂。
比如：如果只在一个scope定义某变量，但在子scope的时候把它忽略掉了。
  1. var HelloCtrl = function ($scope) {
  2. };
  3. <body ng-app ng-init="name='World'">
  4. <h1>Hello, {{name}}</h1>
  5. <div ng-controller="HelloCtrl">
  6. Say hello to: <input type="text" ng-model="name">
  7. <h2>Hello, {{name}}!</h2>
  8. </div>
  9. </body>
默认打开的时候，都显示的是World。这证明了在父scope定义的变量在子scopes是可以访问的。
但在文本框输入文字之后，只有<h2>标签中的name相应的改变了。
一个新的变量被创建在HelloCtrl 控制器初始化的scope中，而不是改变$rootScope 实例的值。 
scopes原型性的继承彼此。所有的规则于JavaScript中对象的原型继承是一致的。
不要直接给scope绑定属性
注意：避免直接直接给scope绑定属性。双向的数据绑定到对象的属性上是个好方法，提供给ng-model指令的表达式最好是带点的，比如 ng-model="thing.name"
举例：
  1. <body ng-app ng-init="thing={name:'World'}">
  2.     <h1>Hello, {{thing.name}}</h1>
  3.     <div ng-controller="HelloCtrl">
  4.         Say hello to: <input type="text" ng-model="thing.name">
  5.         <h2>Hello, {{thing.name}}!</h2>
  6.     </div>
  7. </body>

Mastering Web Application Development with AngularJS 读书笔记(一)的更多相关文章

  1. Mastering Web Application Development with AngularJS 读书笔记-前记

    学习AngularJS的笔记,这个是英文版的,有些地方翻译的很随意,做的笔记不是很详细,用来自勉.觉得写下来要比看能理解的更深入点.有理解不对的地方还请前辈们纠正! 一.关于<Mastering ...

  2. Mastering Web Application Development with AngularJS 读书笔记(三)

    第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...

  3. Mastering Web Application Development with AngularJS 读书笔记(二)

    第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...

  4. WEB Application Development Integrator ： 应用设置

    1.1.       系统安装 应用 Oracle EBS WEB Application Development Integrator WEB ADI在Oracle EBS 11.5.10.* 版本 ...

  5. 精通AngularJS 读书笔记（2）

    AngularJS 速成 视图 因为AngularJS 依靠浏览器去解析模板,所以要保证模板是有效的HTML.尤其要小心闭合号HTML标签(未闭合好的标签不会产生任何错误信息,但会让视图不能正确渲染) ...

  6. 精通AngularJS 读书笔记（1）

    邂逅AngularJS AngularJS是采用JavaScript语言编写的客户端MVC框架,帮助开发者编写现代化的单页面应用.尤其适合编写有大量CURD操作的,具有AJAX风格的富客户端应用. 使 ...

  7. ASP.NET WEB API 2 框架揭秘 读书笔记（一）

    第一章 概述 主要内容是介绍Web的基本概念,Restfull的基本概念及特性.最后介绍创建简单WebApi程序的步骤. Web的基本概念 IP/TCP协议簇分层,分为两种 链路层->网络层-& ...

  8. 《Java web 开发实战经典》读书笔记

    去年年末,也就是大四上学期快要结束的时候,当时保研的事情确定了下来,终于有了一些空闲的时间可以学点实用的技术. 之前做数据库课程设计的时候,也接触过java web的知识,当时做了一个卖二手书籍的网站 ...

  9. Java web轻量级开发面试教程读书笔记：数据库方面，如何准备面试

    如果在面试或与资深人事交流的过程中,你能有效合理地展示出本章所给出的一些知识点,那么对你的评价就会是"对数据库有深入了解",甚至能加上"有设计数据表的经验",即 ...

随机推荐

  1. oracle大数据量。表分区提示查询效率

    现在业务有一张usertrack 日志记录表.每天会产生30万条数据.数据量大查询效率会非常慢 所以我考虑通过表分区来提示效率  逻辑上是一张表.但是分区后会按照分区条件将数据分在不同的物理文件 优点 ...

  2. poj1379 模拟退火

    题意:和上题一样...就是把最小值换成了最大值.. ref:http://www.cppblog.com/RyanWang/archive/2010/01/21/106112.html #includ ...

  3. git命令笔记

    git -bare init git remote add origin ssh://myserver.com/home/git/myapp.git git remote show origin [r ...

  4. 事务块TransactionScope使用

    TransactionScope 可以让代码块成为事务性代码块. 当发生异常时,会自动回滚.后期手动提交事务. 简单的例子: using (TransactionScope ts = new Tran ...

  5. MFC 文件对话框

    文件对话框的分类 文件对话框分为打开文件对话框和保存文件对话框,相信大家在Windows系统中经常见到这两种文件对话框.例如,很多编辑软件像记事本等都有"打开"选项,选择" ...

  6. Unable to execute dex: java.nio.BufferOverflowException.解决办法

    异常提示: [2014-01-16 09:27:35 - Dex Loader] Unable to execute dex: java.nio.BufferOverflowException. Ch ...

  7. 【Alpha版本】冲刺-Day2

    队伍:606notconnected 会议时间:11月10日 会议总结 张斯巍(433) 今天安排:把昨天没完成的做好,主界面图标的修改,侧边栏背景设计 完成度:85% 明天计划:个人信息界面设计.优 ...

  8. jQuery知识点总结（第五天）

    节点的操作和数据库操作一样,无非是增.删.改.查. 今天总结删除节点.复制节点.替换节点.与包裹节点 删除节点: 如果文档中一个元素多余,那么就需要删除掉.jQuery提供了三种删除节点的方法.分别是 ...

  9. global--命名空间的使用（一些零散的js方法）

    var GLOBAL = {}; GLOBAL.namespace = function (str) { var arr = str.split('.'), o = GLOBAL; for (var ...

  10. 20145212 《Java程序设计》第8周学习总结

    20145212 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO与NIO2 认识NIO NIO使用频道(Channel)来衔接数据节点,在处理数据时,NIO可以让你 ...