免费AI编程助手
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 。
以上内容是否对您有帮助：
更多建议：