AngularJS 应用组成如下:
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
实例:如果你修改了视图,模型和控制器也会相应更新:
< div ng-app= “myApp” ng-controller= “myCtrl” >
< input ng-model= “name” >
< h1 >欢迎回来,{{name}} < /h1 >
< /div >
< script >
angular.module( ‘myApp‘, []).controller( ‘myCtrl‘, function($scope) {
$scope.name = “Hello World”;
});
< /script >
scope 其实就是一个是带有属性和方法的JavaScript 对象,这些属性和方法可以在视图和控制器中使用。
实例:创建控制器时,将 $rootScope 作为参数传递,可在应用中使用:
<div ng-app=”myApp” >
<ul>
<li ng-repeat=”x in lists “>{{x}}</li>
</ul>
<div ng-control=”myCtrl1”>
< h1 >欢迎回来,{{name}} < /h1 >
<ul>
<li ng-repeat=”x in lists “>{{x}}</li>
</ul>
</div>
<div ng-control=”myCtrl2”>
< h1 >欢迎回来,{{name}} < /h1 >
<ul>
<li ng-repeat=”x in lists “>{{x}}</li>
</ul>
</div>
</div>
<script>
angular.module(‘myApp’, []).controller(‘myCtrl1’, function($scope, $rootScope) {
$rootScope.name = “World”;
$scope.lists = [‘my’, ‘home’,’report’];
});
angular.module(‘myApp’, []).controller(‘myCtrl2’, function($scope, $rootScope) {
$rootScope.name = “World”;
});
</script>
$rootScope最大的作用,相当于定义公共的函数和变量,不过一般定义公共的函数,我们还是建议使用服务:
// run 的作用表示初始化执行,也就是所以页面加载之前执行
angular.module(‘app’,[‘ui.router’]).run([‘$rootScope’,function($rootScope){
//比如说我们在所有页面初始化执行之前添加一个im属性
//那么之后创建的所有$scope对象因为都是它的子孙对象,都会有im这样的属性
$rootScope.im = function(){
console.log(‘im’);
}
}]);