angular

時間 2019-11-29

原文原文鏈接

1、什麼是angularjs 001

angularjs誕生於2009年，由Misko Hevery等人建立，後爲Google所收購。是一款優秀的前端JS框架。已經被用於Google的多款產品中。 angularjs有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。目前AgularJS應用很是普遍國內比較大型的公司如阿里雲、騰訊都在使用。php

2、AngularJS下載地址 001

http://angularjs.org 文檔查看 http://docs.angularjs.cn/api 調試工具 batarang 主要功能：查看做用域、輸出調試信息、性能監控安裝：https://pan.baidu.com/s/1jGILtzgcss

3、基本angular程序（模塊、控制器、視圖模型、雙向數據綁定） 002

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../../org/angular.min.js"></script> </head> <body> <div ng-app="app" ng-controller="ctrl"> {{name}} <!--雙向數據綁定--> <input type="text" name="" id="" ng-model="name"> </div> <script> // 註冊模塊m var m = angular.module('app', []); //註冊控制器ctrl m.controller('ctrl', ['$scope', function($scope) { //$scope 視圖模型 $scope.name = '老周'; }]) </script> </body> </html>

4、MVVM 002

5、依賴注入 003

<script>
    //          模塊名      依賴的模塊
    var m = angular.module('app', []);
    // 規範依賴注入寫法-避免代碼壓縮後出問題
    // m.controller('ctrl', ['$scope', function($scope) {
    //     $scope.name = '老周';
    // }])
    //              a能夠隨便變，由於是按前面$scope注入的，由於字符串是不會被壓縮的
    m.controller('ctrl', ['$scope', function(a) {
        a.name = '周宇翔';
    }])
</script>

6、scope基本使用方法 004

7、ng-bind、ng-cloak解決閃屏問題 005

原理：頁面會先解析css樣式，而後angular在進行處理。因此內容會被先隱藏，angular解析完以後纔會顯示 display:block。這個過程angular自動處理。html

樣式表中增長樣式 .ng-cloak前端
```
.ng-cloak{
    display:none;
}
```
標籤上增長 ng-cloak屬性和 ng-cloak的classjquery
```
<div ng-cloak class="ng-cloak">{{name}}</div>
```

8、ng-model在表單中雙向數據綁定實例分析 007

9、angular中的單選框 008

10、angular中複選框的使用 009

11、angular中select下拉框的使用 010

12、函數的使用大小寫轉化與對象深拷貝 011

version
lowercase
uppercase
copy

十3、函數使用之對象擴展與數據遍歷 012

extend
forEach

十4、angularjs中的json數據轉換與本地存儲及$scope數據序列化提交到後臺 013

toJson ： json對象轉json格式的字符串
fromJson ： json格式字符串轉json對象

十5、數據類型判斷函數與數據比較方法的使用 014

isArray
isDate
isDefined
isUndefined
isFunction
isNumber
isObject
isElement

* equals

十6、ng-init與ng-trim及表單中value及$scope提交 015

ng-init

* ng-trim: ng-model寫了自帶 ng-trim

當點擊submit提交的時候，提交的是value中的數據，仍然會有空格，可是$scope中的數據通過 trim處理以後，沒有空格了。

十7、ng-if、ng-show、ng-disable、ng-init實現網站註冊協議設置 016

ng-show : 使用css display:none display:block 控制

ng-if: 移除和添加dom節點的方式控制顯示隱藏

十8、ng-repeat實例講解 017

$first
$last
$middle
$odd
$evengit
```
<li ng-repeat="(k,v) in data">
```

重複數據出錯--track by $indexangularjs

$scope.data = ['qq','百度','qq']
<li ng-repeat="(k,v) in data track by $index">

十9、ng-selected、ng-disabled、ng-readonly實例 018

readonly:不能修改能夠提交
disabled:不能修改也不能提交
selected：默認被選中的

二10、全選與取消全選 019

二11、設置數據同步更新時機 020

ng-model-optionsweb

失去焦點更新：chrome

<input type="text" ng-model="data" ng-model-options="{updateOn:'blur'}"/> {{data}}

三秒後更新：json

<input type="text" ng-model="data" ng-model-options="{debounce:3000}"/> {{data}}

三秒後更新或失去焦點更新：

<input type="text" ng-model="title" ng-model-options="{updateOn:'default blur',debounce:{default:3000,blur:0}}"/> {{title}}

二12、ng-class動態改變樣式 021

ng-class
ng-class-odd ng-class-even

二十3、ng-style動態改變樣式 022

二十4、事件處理指令 023

ng-click: 單擊事件
ng-dblclick: 雙擊事件
ng-change:改變觸發必須同時有ng-model
ng-blur:失去焦點
ng-focus: 獲取焦點
ng-keyup: 鍵盤擡起
ng-keydown: 按下鍵盤
ng-keypress: 按下擡起
ng-mousedown:按下鼠標
ng-mouseenter:鼠標進入
ng-mouseleave:鼠標離開
ng-mousemove:鼠標移動

二十5、微信菜單實例 024

二十6、filter變量調節器與貨幣變量調節器 025

過濾器：對數據進行二次處理

currency：金錢修飾符，四捨五入

<span>{{price|currency:'￥':1}}</span>

number：數字處理，保留幾位小數點，四捨五入
```
<span>{{price|number:2}}</span>
```
lowercase:轉小寫
```
<p>{{city|lowercase}}</p>
```
uppercase：轉大寫
```
<p>{{name|uppercase}}</p>
```
limitTo: 截取幾個字符
```
<p>{{title|limitTo:3}}</p>
```
date: 日期過濾器
```
<p>{{time|date:'yy-MM-dd HH:mm:ss'}}</p>
```
二十7、orderBy排序與filter過濾 026
orderBy:'排序字段':升降序 true/false
```
<div>{{data|orderBy:'id':true}}</div>
```

filter:過濾字符:是否徹底匹配

<!-- 不傳第二個參數，無論哪一個值含有3都算 -->
<div>{{data|filter:'3'}}</div>
<!-- 第二個參數true徹底匹配 -->
<div>{{data|filter:3:true}}</div>

二十8、控制器中使用過濾服務 027

二十9、callee與過濾器結合製做表格升降序排序 028

$scope.orderBy = function(field) {
    if (arguments.callee[field] == undefined) {
        arguments.callee[field] = false;
    }
    arguments.callee[field] = !arguments.callee[field];
    $scope.data = $filter('orderBy')($scope.data, field, arguments.callee[field]);
}

三10、使用scope處理升降序 029

    $scope.status = {
        id: false,
        title: false,
        age: false
    };
    $scope.orderBy = function(field) {
        $scope.status[field] = !$scope.status[field];
        $scope.data = $filter('orderBy')($scope.data, field, $scope.status[field]);
    }

三11、$scope.$watch監聽數據變化 030

監聽普通變量

                                新數據    舊數據
$scope.$watch('title', function(newData, oldData) {
    $scope.error = $scope.title.length > 3 ? '標題長度不能超過三個' : '';
})

監聽對象:第三個參數true必須寫

$scope.data = {
    title: ''
};
$scope.$watch('data', function(newData, oldData) {
    $scope.error = newData.title.length > 3 ? '標題長度不能超過三個' : '';
}, true)

* 監聽函數 030-3.html

三12、$scope.$watch結合filter過濾器製做數據篩選實例 031

    //排序顯示數據臨時變量
    $scope.lists = $scope.data;
    $scope.$watch('search', function(n, o) {
        $scope.lists = $filter('filter')($scope.data, n);
    })

三十3、自定義過濾器之手機加星過濾器 032

        /html
        <td>{{u.phone|truncate:3}}</td>
        /js
        var m = angular.module('app', []);
        m.filter('truncate', function() {
            return function(str, len) {
                return str.substr(0, 11 - len) + new String('*').repeat(3);
            }
        })

三十4、自定義指令directive的restrict屬性說明 033

shiy

    /html
    <div zyx></div>
    <zyx></zyx>
    <div class="zyx"></div>
    /js
    var m = angular.module('app', []);
    m.directive('zyx', [function() {
        return {
            restrict: 'AEC',//A attr-屬性 E-element 元素標籤 C-class 類名
            template: 'angular學習'
        }
    }])

三十5、自定義指令命名規範 034

angular自有指令都是 ng-開頭的，那咱們自定義的指令也保持這種風格，但不要使用ng-，可使用如 zyx- jy-等。那麼在命名的時候須要使用駝峯命名法。代碼以下

        /html
        <zyx-show></zyx-show>
        /js
        var m = angular.module('app', []);
        m.directive('zyxShow', [function() {
            return {
                restrict: 'E',//A attr-屬性 E-element 元素標籤 C-class 類名
                template: 'angular學習'
            }
        }])

三十6、自定義template函數式操做 035

    <body ng-app="app" ng-controller="ctrl">
        <jy-show color="red">這裏是文字</jy-show>
        <script>
            var m = angular.module('app', []);
            m.directive('jyShow', [function() {
                return {
                    restrict: 'E',
                    template: function(elem, attr) { //elem是當前元素標籤的angular對象能夠引入jquery用$()包裹，而後用jquery中的方法，attr是屬性集合
                        // console.log(elem, attr);
                        //return 123; //返回什麼內容就是什麼；
                        // return $(elem).html();
                        return "<span style='color:" + attr.color + "'>" + $(elem).html() + "</span>"
                    }
                }
            }])
            m.controller('ctrl', ['$scope', function($scope) {
                $scope.name = '老周';
            }])
        </script>
    </body>

三十7、自定義指令replace屬性詳解 036

    var m = angular.module('app', []);
    m.directive('jyShow', [function() {
        return {
            restrict: 'E',
            template: '<span>這是模板內容</span>',
            replace: true //true:將template中的內容替換指令所在位置，false嵌入指令內
        }
    }])

三十7、自定義指令之transclude和templateUrl 037

transclude/ng-transclude

<jy-cms>這裏是指令標籤內的內容</jy-cms>
<script>
    var m = angular.module('app', []);
    m.directive('jyCms', [function() {
        return {
            restrict: 'E',
            template: '<div><p ng-transclude=""></p>今每天氣不錯</div>',
            transclude: true //true時，會將標籤指令中的內容替換掉 ng-transclude所在標籤的位置
        }
    }])
    m.controller('ctrl', ['$scope', function($scope) {
        $scope.name = '老周';
    }])
</script>

templateUrl

/view/jsCms.html
<div>
    這裏是templateUrl指定的模板內容
</div>

/2.html
<jy-cms>這裏是指令標籤內的內容</jy-cms>
<script>
    var m = angular.module('app', []);
    m.directive('jyCms', [function() {
        return {
            restrict: 'E',
            templateUrl: './view/jyCms.html', //想要正常打開，須要在localhost的方式訪問（啓動phpstudy），不能直接打開靜態文靜的方式引入
            replace: true //使用replacetrue的前提是，templateUrl模板中的內容，必須包在一個塊標籤內
        }
    }])
    m.controller('ctrl', ['$scope', function($scope) {
        $scope.name = '老周';
    }])
</script>

三十8、controller控制器scope父子集做用域講解 038

做用域分析 038-1
繼承隔離： 038-2 子集繼承父級的變量，可是子集改變不影響父級
繼承不隔離：038-3 利用對象傳址的特性，實現繼承繼承不隔離，子集改變，也影響父級

三十9、指令scope做用域分析 039

scope:false 默認是false，繼承而且不隔離。外面會影響裏面，裏面也影響外面
scope:true 繼承隔離，能夠繼承父級的，可是繼承以後，本身用本身的。
scope:{} 徹底獨立。不繼承隔離。
scope:{color:'@color'} 單向文本綁定
scope:{color:'=color'} 雙向文本綁定也能夠綁定引用類型的數據（對象）

四10、scope做用域之=&調用父級做用域中的函數 040

總結：用 = 能夠調用父級做用域中的變量。用&符能夠調用父級做用域中的方法。

四11、指令directive中的controller屬性 041

詳見 041用法

四12、directive的link屬性(對指令標籤的dom操做時使用) 042

四十3、自定義指令的tab面板 043

四十4、$scope.$apply進行數據髒檢查 044

    // 原生方法會觸發angular的髒檢查機制，讓修改後的數據更新，不是綁定在$scope下的方法雖然數據已經被修改了，可是沒有觸發髒檢查機制，致使視圖沒有更新，想要更新視圖，須要單獨調用$scope.$apply() 觸發髒檢查機制更新視圖
    $scope.change = function() {
        $scope.name = '積雲教育';
    }
    $('#jq').click(function() {
        $scope.name = 'jquery修改生效';
        $scope.$apply();

四十5、timeout、interval服務 045

四十6、window服務 046

就是對原生window對象的angular封裝，目的跟timeout等同樣，觸發視圖更新

四十7、sce服務安全的處理html數據 047

帶有元素標籤的數據，標籤不能再頁面正常解析，都會自動轉實體。因此要想正常解析須要兩點

使用 ng-bind-html=「數據」的方式綁定數據
使用$sce.trustAsHtml('<標籤></標籤>');方法來處理數據

四十8、cacheFactory緩存實例 048

建立緩存倉庫
```
var store = $cacheFactory('store');
```
獲取建立的緩存倉庫
```
var obj = $cacheFactory.get('store');
```
銷燬緩存倉庫
```
store.destroy();
```

緩存數據

store.put('web', {
    'title': '騰訊能視頻',
    url: 'www.qq.com'
});

讀取緩存數據
```
    store.get('web')
```

刪除緩存數據

// store.remove('web');//按名刪
// store.removeAll();//全刪
// store.destroy();//把緩存倉庫也刪掉

四十9、$http服務獲取後臺數據 049

    $http({
        url: '1.php',
        method: 'get'
    }).then(function(res) {
        $scope.data = res.data;
    }).then(function(error) {
        console.log(error)
    })

五10、$http請求緩存處理 050

在配置中加入 cache: true 那麼就會將上次請求回來的數據緩存，不會重複發請求。查看chrome瀏覽器的network能夠看到之請求了一次1.php

五11、$http簡寫

    $http.get('1.php',{cache:true}).then(function(res) {
        $scope.data = res.data;
    }).then(function(error) {
        console.log(error)
    })

五12、$http服務向後臺post數據的兩種方式 052

五十3、factory建立服務，利用promise獲取後臺數據 053

五十4、多個控制器共享服務處理實例 054

利用對象引用指向同一個內存空間的特性，刪除數據

五十5、使用service建立自定義服務 055

    m.service('webService', ['$http', function($http) {
        this.get = function() {
            return $http.get('1.php', {
                cache: true
            }).then(function(res) {
                return res.data;
            })
        }
    }])

五十6、uirouter默認路由規則操做 056

    <div ui-view></div>
    ===js===
    var m = angular.module('app', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        //默認路由
        $urlRouterProvider.otherwise('/index');
        //定義路由規則
        $stateProvider.state('default', {
            url: '/index',
            template: '<h1>laozhou</h1>'
        })
    }])

五十7、uirouter路由跳轉方式 057

    ====html====
    <a ui-sref="index">首頁</a>
    <a ui-sref="home">家目錄</a>
    <a href="#/list">列表頁</a>
    <div ui-view>訪問不存在的路由時，顯示以下提示信息</div>
    ====js=====
    var m = angular.module('app', ['ui.router']);
    m.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
        //默認路由
        $urlRouterProvider.otherwise('/index');
        //定義路由規則
        $stateProvider
            .state('default', {
                url: '/index',
                template: '<h1>首頁</h1>'
            })
            .state('home', {
                url: '/home',
                template: '<h1>家目錄</h1>'
            })
            .state('list', {
                url: '/list',
                template: '<h1>列表頁</h1>'
            })
    }])

五十8、uirouter路由模板設置方式 058

    .state('home', {
        url: '/home',
        templateUrl: './view/home.html'
    })

五十9、uirouter路由模板設置方式 058

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

angular

1、什麼是angularjs 001

2、AngularJS下載地址 001

3、基本angular程序（模塊、控制器、視圖模型、雙向數據綁定） 002

4、MVVM 002

5、依賴注入 003

6、scope基本使用方法 004

7、ng-bind、ng-cloak解決閃屏問題 005

8、ng-model在表單中雙向數據綁定實例分析 007

9、angular中的單選框 008

10、angular中複選框的使用 009

11、angular中select下拉框的使用 010

12、函數的使用大小寫轉化與對象深拷貝 011

十3、函數使用之對象擴展與數據遍歷 012

十4、angularjs中的json數據轉換與本地存儲及$scope數據序列化提交到後臺 013

十5、 數據類型判斷函數與數據比較方法的使用 014

* equals

十6、ng-init與ng-trim及表單中value及$scope提交 015

* ng-trim: ng-model寫了自帶 ng-trim

當點擊submit提交的時候，提交的是value中的數據，仍然會有空格，可是$scope中的數據通過 trim處理以後，沒有空格了。

十7、ng-if、ng-show、ng-disable、ng-init實現網站註冊協議設置 016

十8、ng-repeat實例講解 017

十9、ng-selected、ng-disabled、ng-readonly實例 018

二10、全選與取消全選 019

二11、設置數據同步更新時機 020

二12、ng-class動態改變樣式 021

二十3、ng-style動態改變樣式 022

二十4、事件處理指令 023

二十5、微信菜單實例 024

二十6、filter變量調節器與貨幣變量調節器 025

二十7、orderBy排序與filter過濾 026

二十8、控制器中使用過濾服務 027

二十9、callee與過濾器結合製做表格升降序排序 028

三10、使用scope處理升降序 029

三11、$scope.$watch監聽數據變化 030

* 監聽函數 030-3.html

三12、$scope.$watch結合filter過濾器製做數據篩選實例 031

三十3、自定義過濾器之手機加星過濾器 032

三十4、自定義指令directive的restrict屬性說明 033

三十5、自定義指令命名規範 034

三十6、自定義template函數式操做 035

三十7、自定義指令replace屬性詳解 036

三十7、自定義指令之transclude和templateUrl 037

三十8、controller控制器scope父子集做用域講解 038

三十9、指令scope做用域分析 039

四10、scope做用域之=&調用父級做用域中的函數 040

四11、指令directive中的controller屬性 041

四12、directive的link屬性(對指令標籤的dom操做時使用) 042

四十3、自定義指令的tab面板 043

四十4、$scope.$apply進行數據髒檢查 044

四十5、timeout、interval服務 045

四十6、window服務 046

四十7、sce服務安全的處理html數據 047

四十8、cacheFactory緩存實例 048

四十9、$http服務獲取後臺數據 049

五10、$http請求緩存處理 050

五11、$http簡寫

五12、$http服務向後臺post數據的兩種方式 052

五十3、factory建立服務，利用promise獲取後臺數據 053

五十4、多個控制器共享服務處理實例 054

五十5、使用service建立自定義服務 055

五十6、uirouter默認路由規則操做 056

五十7、uirouter路由跳轉方式 057

五十8、uirouter路由模板設置方式 058

五十9、uirouter路由模板設置方式 058

十5、數據類型判斷函數與數據比較方法的使用 014