从无到有构建angular1框架

既然是从无到有构建angular1 的框架，就要首先从angular的基本知识说起，本文将从以下几个方面介绍：

1. Angularjs 技术框架
2. 指令集
3. Service、Route

4. Application

   由于angular1和angular2是完全不同的两个框架，angular2在性能提升等方面都做了很多改进，有想了解ng2朋友可以查看博客：从无到有构建Angular2 后台管理系统的前端架构博客中提供了源码地址可以直接下载运行。

一、Angularjs 技术框架

1、Angular.js 概述

• 致力于Single Page Application (SPA)
• 易于构建页面的CURD操作，以数据为中心
• 操作思路与Dom及jQuery的先查找元素再操作元素不 同，它一切以数据为中心

2、四大特性

2.1 MVC

  1.1.1 MVC介绍

           Model：模型，业务数据，存储于特定作用范围内变量
                  controller中声明模型数据，可以实现module与view的分离
           VIEW：   视图，HTML+directive
           Controller：控制器
 1.1.2 MVC步骤
           1、声明自定义模块
               angular.module('模块名'，[依赖列表])
           2、把自定义的模块注册给当前的应用
               ng-app='模块'
           3、模块中声明控制器函数
               module.controller('控制器名'，function(){...})
           4、调用控制器函数、创建控制器对象
               

           5、在控制器中增删改查数据
               $scope.a=b;
           6、在View中呈现数据
               {{a}}

2.2 数据双向绑定

digest循环以及dirty-checking，包括watch,digest,和$apply
1.每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一条$watch。$watch就是那个可以检测model变化的东西。
2.当浏览器接收到事件时，Angular使用$apply将事件添加到angular context（事件循环机制）中
3.digest循环就会触发。digest将会遍历我们的$watch，然后询问它是否有属性和值的变化，直$watch队列都检查过。

Angular 在启动时会给所有的异步交互点打补丁：

• 超时
• Ajax 请求
• 浏览器事件
• Websockets，等等

在那些交互点，Angular 会对 scope 对象进行变动检查，如果发现有变动就激发相应的监视器重新运行变动检查，检查是否有更多的变化发生，重新运行监视器，等等
Angular 1 绑定运行的后果：
结果是 DOM 一直同简单 Javascript 对象进行同步，尽管这样可以工作，但是这使得有时难以进行推论：
- 不清楚哪些监视器会运行，什么顺序，多少次
- 模型更新顺序难以推论和预期
- 摘要循环多次运行导致时间消耗

2.3 依赖注入

angular.module(‘myApp’, []) 
.controller(‘Ctl’, function ($scope) { 
    $scope.name = ‘leonwgc’;
}); 
上面这段代码就用到了angular的依赖注入，代码首先创建了一个myApp模块，然后在此模块中创建了Ctl控制器，创建控制器函数的第二个参数则是控制器的构造函数， 构造函数声明了对$scope和$log服务的依赖。 当构造函数执行时， 即可获得$scope和$log服务实例，进行操作。

依赖注入有三步：

1. 得到模块依赖项
2. 查找依赖项对应的对象
3. 执行时注入

2.4 模块化设计

Angular.module(name,[,requires])
ng–app = “name”
1.作用：
定义一个应用程序
模块是应用程序中不同部分的容器
模块是应用控制器的容器，控制器必须属于一个模块

2、优点
保持全局命名空间整洁
使应用可以按照任意顺序加载代码

二、指令集

• 内置Directive
• 自定义Directive
• 内置filter
• 自定义filter

1 内置Directive

最常用的内置Directive有：（更多查看官网）

1、ng-bind
2、ng-repeat
3、ng-if
4、ng-class
5、ng-click

具体使用请查看示例代码

2 自定义Directive

属性：
1、restrict：“EACM”
       E:元素  <my-directive>my-directive>
       A:属性  <div my-directive>div>
       C:类    <div class=“my-directive”>div>
       M:注释my-directive -- >
2、template
3、templateUrl

具体使用请查看示例代码

3 内置filter

1、number
2、currency
3、date
4、uppercase
5、lowercase
6、filter
7、json
8、limitTo

具体使用请查看示例代码

4 自定义filter

示例：
app.filter('toFixedTwo', function () {
return function (text) {
    if(!text){
        return "0.00";
    }else{
        var data = parseFloat(text);
        return data.toFixed(2);
    }
}

具体使用请查看示例代码

三、路由

请查看示例代码

1 ngRoute 和 ui-route 相比:

$when          —>   $state          路由状态配置的时候           
$routeParams    —>  $stateParams     带参数的时候的配置$routeProvider  —>  $stateProvider   依赖注入的模块
<div ng-view></div> —>  <div ui-view></div> 页面中绑定的指令

2 路由详解
uiRoute中可以嵌套更深层次的路由，也就是路由中可以有路由（大致有两种情况：1.横向的 2.纵向的）。
（1）嵌套路由
（2) 多视图路由
ngRoute中就不能嵌套更深的路由。

四、angular1 application

请查看示例代码