精通AngularJS 读书笔记(1)

邂逅AngularJS

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

  • 使用HTML作为模板语言
  • 无须对Dom进行显示刷新
  • 有趣的和可扩展的组件子系统能够教会浏览器如何解释自定义的HTML标签及属性
  • 依赖注入及可测试性

AngularJS速成

AngularJS库:一个包装好的JavaScript文件。

AngularJS库相当小:最小化并用gzip压缩后只有30KB,不依赖其他库。

在AngularJS中,所有能够被框架理解和解释的特殊HTML标签和属性,统称为指令。

ng-app  ng-init {{name}}  ng-model  ng-controller

作用域

$scope对象是模板的域模型(domain model),也称为作用域实例。

作用域可以加入与模板相关的数据和提供相关的功能。

作用域层级

ng-controller指令是作用域创建(scope-creating)指令。新创建的作用域实例$scope会拥有$parent属性,并指向它的父作用域。

众多作用域形成了以$rootscope为根的树结构。鉴于DOM树驱动了作用域的创建,作用域树模仿DOM树的结构就不奇怪了。

每个作用于都有自己的整套模型值。在不同的作用域中,定义同名的变量,不会造成命名冲突,这相当于集合中的每个项目都有自己的命名空间(namespace)。

作用域中定义的属性对每个子作用域是可见的,只要子作用域没有定义同名的属性。

AngularJS中的作用域继承是沿继承树向上查找属性,直到找到为止。

在进行读操作时,作用域层级的继承关系直观易懂。然而,进行写操作时情况就有些复杂了。

<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>
<script>
var app = angular.module('myApp', []);
app.controller('HelloCtrl', function($scope) { });
</script>
</body>

  运行这段代码会发现,name变量被定义在了最顶层的作用域中。然而,它在整个应用中到处可见。这说明,变量会沿着作用域层级向下继承。换句话说,定义在父作用域中的变量,在子作用域中也可以访问。

现在,在<input>输入框中开始打字,你会惊讶的发现,HelloCtrl控制器生成的作用域中创建出了新的name变量,而不是去修改$rootscope设定的name变量的值。

有几种方法可以从子作用域中影响定义在父作用域中的属性。首先,可以用$parent属性明确地引用父作用域。修改后的模板如下所示:

<input type="text" ng-model="$parent.name">

在本例中,这确实能解决问题,但这种解决方案相当不可靠。应尽量避免使用$parent属性。

另一种解决方案是将变量绑定为某对象的属性,而不是直接绑定为作用域的属性。代码如下:

<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>
<script>
var app = angular.module('myApp', []);
app.controller('HelloCtrl', function($scope) { });
</script>
</body>

  这是更好的解决方案,它没有对DOM树结构做任何假设。

所以,应避免直接绑定变量给作用域属性。对象属性的双向数据绑定是更好的方案。

作用域层级与事件系统

作用域层级,可以看成传送事件的列车。AngularJS允许跨越作用域层级,传播带有信息的命名事件。事件可以从任何作用域开始分发,然后向上分发($emit)或向下广播($broadcast)。

AngularJS的核心服务(services)与指令通过这趟事件列车来发送信号,通知应用状态的重要变化。例如,可以监听$locationChangeSuccess事件(由$rootScope广播),当地址(浏览器URL)变化时我们会收到通知,代码如下:

$scope.$on('$locationChangeSuccess', function(event, newUrl, oldUrl){

});

每个作用域实例都有$on方法,用于注册作用域事件的处理器。调用处理器函数时,被分发的event对象会作为第一个参数传入,后续参数会依据事件负载的信息和事件类型而定。

与DOM事件一样,event对象有preventDefault()和stopPropagation()方法。

可以调用scope类上的$new()和$destroy()方法手动创建和销毁作用域。

未完待续~

<!--

作者:纤锐
出处:http://www.cnblogs.com/beginner2014/p/5167020.html
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。

-->

上一篇:【JAVA】Runtime


下一篇:【转载】S2SH