Angular的简单入门：2个基本指令，MVC，模块化和SPA的概念

Angular是一款优秀的前端js框架，用它可以轻松构建SPA(Single Page Application，单页面应用程序) ，它的特征是：具有mvc的架构模式，便于模块化开发，自动化双向数据绑定和特有的指令系统。它最大限度的解放了Dom操作，让js代码更专注于业务逻辑的实现，通过简单的指令，结合页面结构和逻辑数据，通过自定义指令，实现组件化编程，代码结构更合理，维护成本更低。

Angular 程序的简单实现

• html结构：

<script src='http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js'></script>
<div ng-app='myNgApp' ng-controller='myCtrl'>
  <input ng-model='user.name'><br>
  <input ng-model='user.gender'><br>
  <input ng-model='user.age'>
  <div>{{user.rank}}</div>
  <div>{{user.happy}}</div>
  <div>{{user.learn}}</div>
</div>

说明：
① 上面div标签中的属性ng-app和ng-controller是angular的两个指令。
② 第一个代表angular程序的作用范围:每个angular程序必须有这个入口，如果没有的话，需要用angular.bootstrap来手动驱动。
② 第二个代表angular程序的控制器,控制器必须在ng-app的范围之内，否则失效。
③ ng-model是用于表单的模型，用于代替表单的值，用作和程序之间交流的模型，可以进行双向的数据绑定
④ {{}}表达式只能够单向的绑定数据。实现从逻辑层到视图层的单向绑定，呈现数据。

• JavaScript结构：

// 获取html中的myNgApp这个入口模块
var ngApp = angular.module('myNgApp',[]);
// 获取html中的控制器
myNgApp.controller('myCtrl',function($scope){
  $scope.user={
    name:'Tom',
    gender:'男',
    age:11,
    rank:1,
    happy:'i am happy',
    learn:'i am learning } });

说明：

① 上面的$scope其值不能更改，是angular的一个视图模型。
② 上面的写法在压缩的时候会有问题，因为$scope是不能更改的，如果压缩时候启用了混淆，那么在局部作用域的$scope就会变成简单的字符如a，这样在angular里面就会发生错误。
③ 需要修改成下面这样:

myNgApp.controller('myCtrl',['$scope',function($scope){
  $scope.user={
    name:'Tom',
    gender:1,
    age:11,
    rank:1,
    happy:'i am happy',
    learn:'i am learning } }]);

什么是MVC

• mvc属于一种软件架构层面的东西，不属于设计模式
• m(model模型),v(view视图),c(controller控制器)，使应用程序分为3个组成部分，每个组成部分之间有自己明确的职责(软件开发中的单一职责原则)，相互之间没有依赖关系，这就是软件开发中的高内聚，低耦合原则。
• m 专注于处理数据和业务逻辑；v 专注于以友好的方式，向用户展示数据；c 用于组织和调度处理模型，实现m和v之间的纽带。

Angular中的模块化

模块化编程方式，每个模块实现特定功能，职责比较单一，模块与模块之间耦合度低，因为这样，组织和调度之间就会很有效率，增加代码的重用性。下面看下模块的定义和获取。

/* 这种方式定义一个模块1，不需要依赖其他模块 */
var module1 = angular.module('module1', []);

/* 定义一个模块2，依赖模块1 */
var module2 = angular.module('module2', ['module1']);

/* 没有第二个参数，表示获取一个module2的模块，赋值给变量module3 */
var module3 = angular.module('module2');

SPA的基本实现

• spa是基于hashchange事件来实现的，通过不同的hash值，我们可以判断用户需要有什么样的资源，然后我们就给用户他们想要的资源

• html结构:

<ul>
    <li><a href='#/music'>请求音乐资源</a></li>
    <li><a href='#/video'>请求视频资源</a></li>
    <li><a href='#/picture'>请求图片资源</a></li>
</ul>

• JavaScript结构：

window.addEventListener('hashchange',function(){
    var hash = window.location.hash.substr(2);
    switch(hash) {
      case 'music':
        console.log('请求了音乐资源'); // 这里表示对应的业务逻辑
        break;
      case 'video':
        console.log('请求了视频资源'); // 同上
        break;
      case 'picture':
        console.log('请求了图片资源'); // 同上
        break;
      default:
        console.log('没有相关匹配');
    }
});

针对Angular总结一下：

Angular是什么

• 一个前端框架，提供一种无DOM操作的编程方式，在前端页面中引入了传统在后台开发中使用的一些思想，增强代码的结构和可维护性
• 一个功能非常完备的前端框架，通过增强HTML的方式提供一种便捷开发Web应用程序的方式
• 其核心特点就是几乎无任何DOM操作，让开发人员的精力和时间全部集中于业务
• MVC的特性增强了代码的结构和可维护性，应对需求的变化做出最小的改动

为什么使用Angular

• 构建SPA富客户端应用程序，模块化开发应用，使用更少的代码实现更强劲的功能

如何使用Angular

• 在HTML代码中引入Angular.js包
• 在HTML代码中将刚刚定义的模块通过ng-app="yourModuleName"指令的方式作用到一个特定的元素上
• 在JS代码中通过angular.module('yourModuleName', []) 注册一个模块
• 根据当前页面的情况（业务块）划分控制器
• 在HTML代码中将刚刚定义的控制器通过ng-controller="ControllerName"作用到特定的元素上
• 建模（根据界面原型抽象一个数据模型）得到一个视图模型（ViewModel）
• 在JS代码中通过$scope暴露需要提供到页面的数据成员
• 在HTML代码中将刚刚暴露出来的数据通过类似ng-model/{{}}/ng-click之类的指令绑定到特定的元素上
• 在JS中完成业务逻辑