3、模块、作用域、控制器部分简单介绍

四、模块开发

AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。

angular.module('myApp',[]);  //相当于AngularJS模块的setter方法，是用来定义模块的

举例：

var testRoute =angular.module('mainApp', [

 'ngRoute',//注意：用路由就必须要导包angular-route.js

 'DemoControllers',

 'MyCssModules'

]);

调用这个方法时如果只传递一个参数，就可以用它来引用模块。例如，可以通过以下代码来

引用myApp模块：

var helloMoudle = angular.module('DemoControllers', []);

helloMoudle.controller('helloController', ['$scope',function($scope) {

    $scope.greeting = {

       text :'Hello'

   };

   $scope.val=0;

} ]);

  开发大型应用时，我们会创建多个模块来承载业务逻辑。将复杂的功能分割成不同的模块，有助于单独为它们编写测试。

 

 

五、作用域

作用域是视图和控制器之间的胶水。在应用将视图渲染并呈献给用户之前，视图中的模板会和作用域进行连接，然后应用会对DOM进行设置以便将属性变化通知给AngularJS。

 

◇视图和$scope的世界

AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。$rootScope是AngularJS中最接近全局作用域的对象。在$rootScope上附加太多业务逻并不是好主意，这与污染JavaScript的全局作用域是一样的。

 

$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。

$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样，$scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的胶水。

 

◇作用域能够做些什么

• 提供观察者以监视数据模型的变化；
• 可以将数据模型的变化通知给整个应用，甚至是系统外的组件；
• 可以进行嵌套，隔离业务功能和数据；
• 给表达式提供运算时所需的执行环境。

作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。

可以将作用域理解成视图模型（view model）。

 

六、控制器

控制器在AngularJS中的作用是增强视图。

var app = angular.module('app',[]);

app.controller('FirstController',function($scope) {

$scope.message= "hello";

});

注：将控制器命名为[Name]Controller而不是[Name]Ctrl是一个最佳实践。

控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。尽可能地精简控制器是很好的做法。作为AngularJS开发者，使用依赖注入来访问服务可以实现这个目的。

AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

 

◇控制器嵌套（作用域包含作用域）

   AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对于ng-app所处的层级来讲，它的父级作用域就是$rootScope。

★有一个例外：在指令内部创建的作用域被称作孤立作用域。

  默认情况下，AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。如果AngularJS找不到对应的属性，会顺着父级作用域一直向上寻找，直到抵达$rootScope为止。如果在$rootScope中也找不到，程序会继续运行，但视图无法更新。

 

比如：

app.controller('ParentController',function($scope) {

   $scope.person = {

       greeted :false

    };

});

app.controller('ChildController',function($scope) {

   $scope.sayHello =function() {

       $scope.person.name ='Ari Lerner';

   };

});

页面中访问：

<divng-controller="ParentController">

       <divng-controller="ChildController">

           <ang-click="sayHello()">Say hello</a>

       </div>

       {{ person }}

</div>

示例结果：当点击超链接Say hello的时候，

 

七、表达式

AngularJS通过$parse这个内部服务来进行表达式的运算，这个服务能够访问当前所处的作用域。这个过程允许我们访问定义在$scope上的原始JavaScript数据和函数。

 

可自定义，内容详见文档。