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’);
}
}]);

作者 admin

百度广告效果展示