模型和控制器-起步阶段

MVVM简介

针对客户端应用开发AngularJS吸取了传统的MVC基本原则。MVC(Model-View-Controll)设计模式针对不一样的人可能意味不一样的东西 ,AngularJS并不执行传统意义上的MVC，更接近于MVVM。

MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，经过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。

Model将和ViewModel互动(经过$scope对象)，将监听Model的变化。这些能够经过View来发送和渲染，由HTML来展现你的 代码。View能够经过$routeProvider对象来支配，因此你能够深度的连接和组织你的View和Controller，将他们变成导航 URL。AngualrJS同时提供了无状态的Controller，能够用来初始化和控制$scope对象。

Model与MVC模式同样，Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具备对数据直接访问的权利，例如对数据库的访问，Model不依赖于View和ViewModel，也就是说，模型不关心会被如何显示或是如何被操做，模型也不能包含任何用户使用的与界面相关的逻辑。

ViewModel是一个用来提供特别数据和方法从而维护指定view的对象,。ViewModel是$scope的对象，只存在于AnguarJS的应用中。$scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。

Controller负责设置初始状态和参数化$scope方法用以控制行为。须要指出的controller并不保存状态也不和远程服务互动。

View是AngularJS解析后渲染和绑定后生成的HTML。这个部分帮助你建立web应用的架构。$scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。

使用MVVM模式有几大好处：

 

1. 低耦合：View能够独立于Model变化和修改，一个ViewModel能够绑定到不一样的View上，当View变化的时候Model能够不变，当Model变化的时候View也能够不变。

2. 可重用性：能够把一些视图的逻辑放在ViewModel里面，让不少View重用这段视图逻辑。

3. 独立开发：开发人员能够专一与业务逻辑和数据的开发(ViewModel)。设计人员能够专一于界面(View)的设计。

4. 可测试性：能够针对ViewModel来对界面(View)进行测试。

 

控制器

AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。

ng-controller指令就是用来定义应用程序控制器的，而且同时建立了一个新的做用域关联到相应的DOM元素上。

所谓做用域就是一个指向应用模型的对象，它是表达式的执行环境，做用域有层次结构，这个层次和相应的DOM几乎是同样的，做用域能监控表达式和传递事件而且能够从父做用域继承属性。

每个AngularJS应用都有一个绝对的根做用域。但也可能有多个子做用域。 一个应用能够有多个做用域，由于有一些指令会生成新的子做用域，当新做用域被建立的时候，他们会被当成子做用域添加到父做用域下，这使得做用域会变成一个和相应DOM结构一个的树状结构。

 

控制器属性

如今咱们就用ng-controller指令来建立一个简单的控制器定义，以下所示：

1. <div ng-app="" ng-controller="MyController">
2. <p>请输入一个名字：<input type="text" ng-model="person.name"> </p>
3. <p>Hello <span ng-bind="person.name"></span> </p>
4. </div>
6. <script>
7. function MyController($scope) {
8. $scope.person = {
9. name: "World"
10. };
11. }
12. </script>

如上所述，咱们经过ng-controller指令建立了一个JavaScript对象 —— MyController并带有name属性，那参数$scope是什么呢，表明什么意思呢。

如今咱们就来解答MyController对象参数 —— $scope。

$scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序做用域内的全部HTML元素和执行上下文。做用域呢，就是做为$scope的数据属性关联到DOM上的，而且能在须要调试的时候被获取到。

要明确建立一个$scope对象，咱们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。

全部$scope都遵循原型继承，这意味着它们都能访问父$scope们,对任何属性和方法，若是AngularJS在当前$scope上找不到，就会到父$scope上去找，若是在父$scope上也没找到，就会继续向上回溯，一直到$rootScope上，这个$rootScope是最顶级的$scope，它对应着含有 ng-app指令属性的那个DOM元素，也就是说根做用域关联的DOM就是ng-app指令定义的地方。

也就是说，拥有了$scope，咱们就能够操做做用域内任何咱们想要获取的对象数据。

 

控制器方法

控制器不只声明属性也能够声明方法，以下所示：

1. <div ng-app="" ng-controller="MyController">
2. Your name:
3. <input type="text" ng-model="username">
4. <button ng-click="sayHello()">打招呼</button>
5. <hr>
6. {{greeting}}
7. </div>
8.  
9. <script>
10. function MyController($scope) {
11. $scope.username = 'World';
12. $scope.sayHello = function() {
13. $scope.greeting= 'Hello ' + $scope.username + '!';
14. };
15. }
16. </script>

参考以上代码，赶快动手试试控制器的使用方法吧！

固然若是是开发条件的须要，咱们也能够将控制器写在外部文件中，那如上示例该怎么作呢，很简单，以下简单引用便可：

1. <script src="MyController.js"></script>