AngularJS(一)——认识AngularJS之MVC架构

MVC及AngularJS

M(Module)：

Module在AngularJS中表示是数据模型层。
在AngularJS中，模块是定义应用(Application)的最主要方式。模块包含了主要的应用代码。
一个应用(PC端、移动端)可以包含多个模块，每个模块都包含了定义具体功能的代码。
使用模块可以带来不少的好处，比如：
- 1、保持全局命名空间的清洁；
因为在JavaScript代码里面尽可能地少去使用全局变量的声明方式(JavaScript基础(一))，模块的引入很好地解决了AngularJS引入全局变量的问题(这样的解释Big-man自我感觉理解更好一些的)；
- 2、编写测试代码更容易，并能保持其清洁，以便更容易找到相互隔离的功能；
- 3、易于在不同应用间复用代码；
- 4、使应用能够以任意顺序加载代码的各个部分。
AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被依赖注入到模块中的对象列表。
angular.module('myApp', []);

注：Big-man这里所写下的方法相当于AngularJs模块的setter方法，是用来定义模块的。

(function () {
    'use strict';
    angular.module('hz.dashboard', [
        'hz.dashboard.workflow',
        'hz.dashboard.launch-instance',
        '...',
    ])
})();

类似于上面代码中的实例，hz.dashboard就是这个模块的名称，[...]中的内容就是这个模块所依赖的内容。
angular.module('myApp');

注：然而上面的这个方法是用户获取应用，相当于AngularJs的getter方法，用来获取对模块的引用。

参数说明
1、name(字符串)
- name是模块的名称，字符串变量。
2、requires（字符串数组）
- requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载由注入器进行预加载。

示例1：

<li ng-repeat="x in items track by $index">  
    <strong>{

{x}}

</li>

对应关系：
ng-app="myApp" <——> angular.module('myApp', []);
ng-controller="myCtrl" <——> app.controller('myCtrl', function ($scope)

ng-app指令的定义和用法:
ng-app指令用于告诉AngularJS应用当前这个元素是根元素。
所有AngularJS应用都必须需要一个根元素。
HTML文档中只允许有一个ng-app指令，如果有多个ng-app指令，则只有第一个会被使用。

输出：

fengfeng
I
love
you
!
示例2
```
    {
```
{a}}+{
{b}}={
{c}}

V(View)：

中文翻译过来是视图、外表展示。
但是在AngularJS中的View表示的是视图层,负责展示。
AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服务。接下来Big-man会一一进行分析其中的作用。
ng-view
ng-view 标记只是简单地创建一个占位符，是一个相应的视图(HTML或ng-template视图)，可以根据配置来放置。

…

Love Rose
**使用功能：**定义一个div与ng-view在主模块中。
ng-template
ng-template 指令是用来创建使用script标签的HTML视图。它包含一个用于由**$routeProvider映射控制器视图“id”属性**。

…
**使用功能：**定义类型作为主模块中 ng-template 的脚本块。
$routeProvider
$routeProvider是组网址的配置，将它们映射相应的HTML页面或 ng-template，并附加一个控制器使用相同键的服务。

…

使用功能：定义类型作为主模块中 ng-template 的脚本块。

var mainApp = angular.module(“mainApp”, [‘ngRoute’]);

mainApp.config([‘$routeProvider’,

function($routeProvider) {
 $routeProvider.
   when('/loveRose', {
    templateUrl: 'loveRose.html',
    controller: 'loveRoseController'
   }).
   when('/viewRose', {
    templateUrl: 'viewRose.html',
    controller: 'viewRoseController'
   }).
   otherwise({
    redirectTo: '/loveRose'
   });
}]);

使用功能： 定义主模块的脚本块，并设置路由配置。
结合上面的分析，Big-man总结出了以下需要考虑的重要问题：
- $routeProvider被定义为使用关键字作为**’$routeProvider’**下mainApp模块的配置功能；
- $routeProvider当定义了URL“/addStudent”映射到”addStudent.html”。 addStudent.html应存在于相同的路径主要的html 页面。如果htm页面没有定义，那么ng-template被**id=“addStudent.html”**使用。我们已经使用了ng-template；
- "otherwise"是用来设置的默认视图；
- "conlloer"是用来设置该视图对应的控制器；
完整实例：下面Big-man将会给出一个较为完整的实例，但是分析输出结果，还请大家进行分析。

Angular JS Views

AngularJS Sample Application

Love Rose

View Rose

C(Controller)：

中文翻译过来是控制器、控制者;
但是在AngularJS中的Controlller表示的是业务逻辑和控制逻辑。
控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，Big-man用它来给作用域对象设置初始状态，并添加自定义行为。
当Big-man在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于Angularjs会自动实例化控制器，所以Big-man只需要写构造函数即可。
下面的例子展示了控制器初始化：

function my Controller($scope){
$scope.msg=”hello, jackdan9!”;
}
Big-man分析了上面的创建控制器的方法，Big-man个人认为这样的创建方式会污染全局命名空间，更合理的办法是创建一个模块，然后在模块中创建控制器，如下：

var myApp=angular.module(“myApp”,[]);
myApp.controller(“myController”,function($scope){
$scope.msg=”hello, jackdan9!”;
})
Big-man采用内置指令ng-click可以将按钮、链接等其他任何DOM元素同点击事件进行绑定。ng-click指令将浏览器中的mouseup事件，同设置在DOM元素上的事件处理程序绑定在一起（例如，当浏览器在某个DOM元素上触发了点击事件，函数就会被调用）。和前面的例子类似，绑定看起来是这样的：

The simplest adding machine ever

Subtract

Current count: {
{ counter }}
按钮和链接都被绑定在了内部$scope的一个操作上，当点击任何一个元素时AngularJS都会调用相应的方法。

注意，当设置调用哪个函数时，会同时用括号传递一个参数（add(1)）

app.controller(‘FirstController’, function($scope) {

$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };

});

Angularjs与其他框架的最大区别在于，控制器并不适合来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作，它只是视图和$scope之间的桥梁。

控制器嵌套（作用域包含作用域）
AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对于ng-app所处的层级来讲，它的父级作用域就是$rootScope。
默认情况下，AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。如果AngularJS找不到对应的属性，会顺着父级作用域一直向上寻找，直到抵达$rootScope为止。如果在$rootScope中也找不到，程序会继续运行，但视图无法更新。Big-man个人认为在这一点上，类似于js的作用域链，这一层无法找到的作用域会反馈到上一层的作用域上。
通过例子来看一下这个行为。创建一个ParentController，其中包含一个user对象，再创建一个ChildController来引用这个对象：

app.controller(‘ParentController’, function($scope) {
```
$scope.person = {greeted: false};
```
});
app.controller(‘ChildController’, function($scope) {
```
$scope.sayHello = function() {
    $scope.person.name = 'Ari Lerner';
};
```
});
如果我们将ChildController置于ParentController内部，那ChildController的$scope对象的父级作用域就是ParentController的$scope对象。根据原型继承的机制，我们可以在子作用域中访问ParentController的$scope对象。

Say hello

{
{ person }}