一、MVC

Model:数据模型,其实就是angular变量($scope.XX,$rootScope.XX);

View:视图层,Html+Directive(指令);

Controller:业务逻辑和控制逻辑,就是function,数据的增删改查;

一个简单的小例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <style type="text/css">
        .main {
            text-align: center;
        }
    </style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<h5 class='main'>尝试修改以下表单。</h5>

<div class='main' ng-app="myApp" ng-controller="myCtrl">
姓: <input type="text" ng-model="lastName"><br>
名: <input type="text" ng-model="firstName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "Menghua";
    $scope.lastName= "Sun";
});
</script>

</body>
</html>

运行结果：

分析这个简单的例子，我们可以比较明显的区分出MVC的各层：

使用angular的module方法定义了一个模块，并在定义的模块上调用了一个controller方法，定义了一个app模块的一个控制器myCtrl;

而p标签的内容很明显就是显示层view，视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{firstName}};

$scope 对象定义了属性firstName,lastName，视图可以获取这些属性,这些定义的属性为数据模型层。

2、Module（模块化）

上例中，将控制器模块化。

可以通过 AngularJS 的 angular.module 函数来创建模块：

<div ng-app="myApp">...</div>

<script>

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

</script>

模块定义中 []参数用于定义模块的依赖关系；[ ]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

添加控制器

可以使用 ng-controller 指令来添加应用的控制器:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

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

app.controller("myCtrl", function($scope) {
    $scope.firstName = "Menghua";
    $scope.lastName = "Sun";
});

</script>

注意：一切都是从模块开始的，我们在使用angularJS时，一定要先想到模块，所有的东西都是建立在模块的基础上，只有定义了模块才能调用其它方法。

上面实例中的ng-app相当于c语言中main函数，所以每个页面中只能定义一个ng-app，他定义了所在的模块。

3、指令系统

AngularJS 通过被称为指令的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="firstName='haiyang'">

<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>

</body>
</html>

运行结果：

数据绑定

上例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

创建自定义的指令

angularjs的自定义指令系统是最有特色、最吸引人的一个特性。下面先看一个实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<hello></hello>

<script>
var app = angular.module("myApp", []);
app.directive("hello", function() {
    return {
        template : "<h1>自定义指令hello!</h1>"
    };
});
</script>

</body>
</html>

运行结果：

可以通过设置restrict的值，通过以下方式来调用指令：

元素名
属性
类名
注释

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<!-- directive: hello -->

<script>
var app = angular.module("myApp", []);
app.directive("hello", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则注释是不可见的。</p>

<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>

</body>
</html>

运行结果：

4、双向数据绑定

大部分框架实现的都是单向数据绑定，单向数据绑定的意思是将数据绑定到模板上，并且显示到界面上，这种模式的缺点是显示出来后，当数据更改时，并不能及时的更新到页面上，因此angular提出了双向数据绑定的定义。

比如上面第一个实例，该实例无论在input中输入任何内容，都会实时的显示在下面的p标签中，我们可以看到该实例中我们没有写任何js代码，我们在input上绑定了一个ng-model，它的值为firstName,lastName，而在p标签中则获取这个值，实时显示在html中。