ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
2.、AngularJS 事件广播与接收
发送消息: $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);
接收消息: $scope.on(name,function(event,data){ });
区别: $emit 广播给父controller $broadcast 广播给子controller
broadcast 是从发送者向他的子scope广播一个事件。
这里就是ParentController发送, ParentController 和 ChildController 会接受到, 而MainController是不会收到的
$emit 广播给父controller,父controller 是可以收到消息
$on 有两个参数function(event,msg) 第一个参数是事件对象,第二个参数是接收到消息信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
angular.module(
'onBroadcastEvent'
, [
'ng'
])
.controller(
'MainController'
,
function
($scope) {
$scope.$on(
'To-MainController'
,
function
(event,msg) {
console.log(
'MainController received:'
+ msg);
});
})
.controller(
'ParentController'
,
function
($scope) {
$scope.click =
function
(msg) {
$scope.$emit(
'To-MainController'
,msg +
',from ParentController to MainController'
);
$scope.$broadcast(
'To-ChildController'
, msg +
',from ParentController to ChildController'
);
$scope.$broadcast(
'To-BrotherController'
, msg +
',from ParentController to BrotherController'
);
}
})
.controller(
'ChildController'
,
function
($scope){
$scope.$on(
'To-ChildController'
,
function
(event,msg) {
console.log(
'ChildController received:'
+ msg);
});
})
.controller(
'BrotherController'
,
function
($scope){
$scope.$on(
'To-BrotherController'
,
function
(event, msg) {
console.log(
'BrotherController received:'
+ msg);
});
});
|
3 特性五:指令(Directives)
指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情?那么AngularJS可以做到。
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。
这里是一个例子,它监听一个事件并且针对的更新它的$scope ,如下:
myModule.directive('myComponent', function(mySharedService) {
return {
restrict: 'E',
controller: function($scope, $attrs, mySharedService) {
$scope.$on('handleBroadcast', function() {
$scope.message = 'Directive: ' + mySharedService.message;
});
},
replace: true,
template: '<input>'
};
});
然后,你可以使用这个自定义的directive来使用:
<my-component ng-model="message"></my-component>
使用一系列的组件来创建你自己的应用将会让你更方便的添加,删除和更新功能。
4 数据绑定
AngularJS的双向数据绑定,意味着你可以在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然。即:一方面可以做到model变化驱动了DOM中元素变化,另一方面也可以做到DOM元素的变化也会影响到Model。
在我们使用jQuery的时候,代码中会大量充斥类似这样的语句:var val = $(‘#id’).val(); $(‘#id’).html(str);等等,即频繁的DOM操作(读取和写入),其实我们的最终目的并不是要操作DOM,而是要实现业务逻辑。ng的绑定将让你摆脱DOM操作,只要模板与数据通过声明进行了绑定,两者将随时保持同步,最新的数据会实时显示在页面中,页面中用户修改的数据也会实时被记录在数据模型中。
从View到Controller再到View的数据交互(例01):
4.2.2 module (待进一步理解)
首先需要明确一下模板的概念。在我还不知道有模板这个东西的时候,曾经用js拼接出很长的HTML字符串,然后append到页面中,这种方式想想真是又土又笨。后来又看到可以把HTML代码包裹在一个<script>标签中当作模板,然后按需要取来使用。
在ng中,模板十分简单,它就是我们页面上的HTML代码,不需要附加任何额外的东西。在模板中可以使用各种指令来增强它的功能,这些指令可以让你把模板和数据巧妙的绑定起来。
在<html>标签上多了一个属性ng-app=”MyApp”,它的作用就是用来指定ng的作用域是在<html>标签以内部分。在js中,我们调用angular对象的module方法来声明一个模块,模块的名字和ng-app的值对应。这样声明一下就可以让ng运行起来了。
示例:
<html ng-app="demoApp">
var demoApp = angular.module('demoApp', []);
4.2.3 ng-controller ($scope 作用域的理解)
要明确创建一个$scope 对象,我们就要给DOM元素安上一个controller对象,使用的是ng-controller 指令属性:
<div ng-controller="MyController"> {{ person.name }} </div>
ng-controller指令给所在的DOM元素创建了一个新的$scope 对象,并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里,这个外层DOM元素的$scope 对象,就是$rootScope 对象。这个scope链是这样的:
所有scope都遵循原型继承(prototypal inheritance),这意味着它们都能访问父scope们。对任何属性和方法,如果AngularJS在当前scope上找不到,就会到父 scope上去找,如果在父scope上也没找到,就会继续向上回溯,一直到$rootScope 上。即如果controller是多层嵌套的,就会从最里面一直往外找,这个scope链是这样的:
唯一的例外:有些指令属性可以选择性地创建一个独立的scope,让这个scope不继承它的父scope们,这个会在指令详解中说明。
4.6.4特殊的ng-src和ng-href({{}}显示代码的问题)
在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下图:
1) 浏览器加载静态HTML文件并解析为DOM;
2) 浏览器加载angular.js文件;
3) angular监听DOMContentLoaded 事件,监听到时开始启动;
4) angular寻找ng-app指令,确定作用范围;
5) 找到app中定义的Module使用$injector服务进行依赖注入;
6) 根据$injector服务创建$compile服务用于编译;
7) $compile服务编译DOM中的指令、过滤器等;
8) 使用ng-init指令,将作用域中的变量进行替换;
9) 最后生成了我们在最终视图。
可以看到,ng框架是在DOMcontent加载完毕后才开始发挥作用。假如我们模板中有一张图片如下:
<img src="http://m.cnblogs.com/142260/”{{imgUrl}}” />
那么在页面开始加载到ng编译完成之前,页面上会一直显示一张错误的图片,因为路径{{imgUrl}}还未被替换。
为了避免这种情况,我们使用ng-src指令,这样在路径被正确得到之前就不会显示找不到图片。同理,<a>标签的href属性也需要换成ng-href,这样页面上就不会先出现一个地址错误的链接。
顺着这个思路再多想一点,我们在模板中使用{{}}显示数据时,在ng编译完成之前页面上岂不是会显示出大括号及里面的表达式?确实是这样。为了避免这个,ng中有一个与{{}}等同的指令:ng-bind,同样用于单向绑定,在页面刚加载的时候就不会显示出对用户无用的数据了。尽管这样你可能不但没舒心反而更纠结了,{{}}那么好用易理解,还不能用了不成?好消息是我们依然可以使用。因为我编写的是单页面应用,页面只会在加载index.html的时
候出这个问题,只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的,就可以放心使用{{}}了。