Angular 学习笔记 1

来源：互联网发布：长虹网络电视连不上wf 编辑：程序博客网时间：2024/06/05 14:19

Angular 是一个兴起的框架，还在不断更新中，可能会出 2.0 版本。

特点是易测试，双向绑定，使用模板，能够大幅度减少代码量。

因为其模块的思想，构建组件也很容易，可以到 ngmodules.org 上去寻找需要的模块。

最简单的例子

<html><body><div id="div1">    {{1+1}}</div><script src="../lib/angular.js"></script><script>    var div1 = document.getElementById("div1");    angular.bootstrap(div1);</script></body></html>

boostrap 方法决定了从何处开始将 html 作为 angular 的模板来解析。

同样的，也可以用 ng-app 来做到这一点。

<html><body><div ng-app="">    {{1+1}}</div><script src="../lib/angular.js"></script></body></html>

但我更喜欢前者，思路清晰。

boostrap 确定了解析的根元素，从而会创建一个 scope，称之为 rootScope。

<html><body><div id="div1">    {{value}}</div><script src="../lib/angular.js"></script><script>    angular.module('module1',[])            .run(function($rootScope){                $rootScope.value = "值";            });    var div1 = document.getElementById("div1");    angular.bootstrap(div1,['module1']);</script></body></html>

这里比较奇怪的就是 run 函数的执行时机。

引用多个模块依赖。

<html><body><div id="div1">    {{value}}</div><script src="../lib/angular.js"></script><script>    angular.module('module1',[])            .run(function($rootScope){                $rootScope.value = "module1";            });    angular.module('module2',[])            .run(function($rootScope){                $rootScope.value = "module2";            });    var div1 = document.getElementById("div1");    angular.bootstrap(div1,['module1','module2']);</script></body></html>

module2 的 run 函数执行晚于 module1。

设置多个“根元素”。

<html><body><div id="div1">    {{value}}</div><div id="div2">    {{value}}</div><script src="../lib/angular.js"></script><script>    angular.module('module1',[])            .run(function($rootScope){                $rootScope.value = "module1";            });    var div1 = document.getElementById("div1");    angular.bootstrap(div1,['module1']);    angular.module('module2',[])            .run(function($rootScope){                $rootScope.value = "module2";            });    var div2 = document.getElementById("div2");    angular.bootstrap(div2,['module2']);</script></body></html>

这一点是 ng-app 做不到的，但一般一个根元素就够了。

0 0