從無到有構建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、調用控制器函數、創建控制器對象
               <div controller='控制器名'></div>
           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:註釋<!– directive: 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

請查看示例代碼