AngularJS 例子
2018-07-26 16:38 更新
我们从一个完整的例子开始认识 AngularJS :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>试验</title> <script type="text/javascript" src="http://s.zys.me/js/jq/jquery.js" rel="external nofollow" ></script> <script type="text/javascript" src="http://s.zys.me/js/ng/angular.js" rel="external nofollow" ></script> </head> <body> <div ng-controller="BoxCtrl"> <div style="width: 100px; height: 100px; background-color: red;" ng-click="click()"></div> <p>{{ w }} x {{ h }}</p> <p>W: <input type="text" ng-model="w" /></p> <p>H: <input type="text" ng-model="h" /></p> </div> <script type="text/javascript" charset="utf-8"> angular.module('app', [], angular.noop) .controller('BoxCtrl', function($scope, $element){ //$element 就是一个 jQuery 对象 var e = $element.children().eq(0); $scope.w = e.width(); $scope.h = e.height(); $scope.click = function(){ $scope.w = parseInt($scope.w) + 10; $scope.h = parseInt($scope.h) + 10; } $scope.$watch('w', function(to, from){ e.width(to); } ); $scope.$watch('h', function(to, from){ e.height(to); } ); }); angular.bootstrap(document.documentElement, ['app']); </script> </body> </html>
从上面的代码中,我们看到在通常的 HTML 代码当中,引入了一些标记,这些就是 AngularJS 的模板机制,它不光完成数据渲染的工作,还实现了数据绑定的功能。
同时,在 HTML 中的本身的 DOM 层级结构,被 AngularJS 利用起来,直接作为它的内部机制中,上下文结构的判断依据。比如例子中 p 是 div 的子节点,那么 p 中的那些模板标记就是在 div 的 Ctrl 的作用范围之内。
其它的,也同样写一些 js 代码,里面重要的是作一些数据的操作,事件的绑定定义等。这样,数据的变化就会和页面中的 DOM 表现联系起来。一旦这种联系建立起来,也即完成了我们所说的“双向绑定”。然后,这里说的“事件”,除了那些“点击”等通常的 DOM 事件之外,我们还更关注“数据变化”这个事件。
最后,可以使用:
angular.bootstrap(document.documentElement, ['app']);
来把整个页面驱动起来了。(你可以看到一个可被控制大小的红色方块)
简单来说,就是定义一个 App ,然后 bootstrap 时指定需要用哪些 App 。( App 之间的依赖关系在定义时声明就好了)
这里说的一个 App 就是 ng 概念中的一个 Module 。
以上内容是否对您有帮助:
更多建议: