发表于: 2017-05-28 23:31:35

1 1033


今天完成的事:

学习angularJS



明天划的事:

继续学习angular



遇到的问题:

暂无


收获

1,指令(directive)

  通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的。

  模板中可以使用的东西包括以下四种:

1.指令(directive):ng提供的或者自定义的标签和属性,用来增强HTML表现力;

2.标记(markup):即双大括号{{}},可将数据单向绑定到HTML中;

3.过滤器(filter):用来格式化输出数据;

4.表单控制:用来增强表单的验证功能。


指令的几种使用方式如下:

l 作为标签:<my-dir></my-dir>

l 作为属性:<span my-dir="exp"></span>

l 作为注释:<!-- directive: my-dir exp -->

l 作为类名:<span class="my-dir: exp;"></span>

其实常用的就是作为标签和属性。


2, 自定义指令:

我们定义一个名为userInfo的指令:

angular.module('app')

    .directive('userInfo',function(){

return {

        restrict : 'E',

        templateUrl : 'userInfoTemplate.html',

        replace : true,

        transclude : true,

        }

    };

})  

Restrict为'E':用作标签;

replace为true:用模板替换当前标签;

transclude为true:将当前元素的内容转移到模板中;

templateUrl为'userInfoTemplate.html':模板内容为ng-template定义ID为userInfoTemplate.html的内容;



3,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) 最后生成了我们在最终视图。



返回列表 返回列表
评论

    分享到