擁抱AngularJS

時間 2019-11-09

標籤擁抱 angularjs 欄目 AngularJS 简体版

原文原文鏈接

文中一些地方AngularJS簡稱ngjavascript

簡介：

　　ng誕生於2009年，由Misko Hevery等建立，後被Google收購，爲克服HTML在構建應用上的不足而設計。html

　　是一款優秀的前端JS框架，核心特性：MVVM（Model-View-ViewModel）、模塊化、雙向數據綁定、依賴注入。前端

　　官網：https://angularjs.org/java

　　中文網：http://www.apjs.net/jquery

入門：

　　參考地址
git

書籍：

　　用AngularJS開發下一代Web應用angularjs

　　 AngularJS權威教程github

源碼：

　　GitHubweb

　　https://code.angularjs.org/spring

API：

　　AngularJS API

介紹：

　　模塊介紹：（v1.4.0）

angular.js ng 核心
angular-route.js　　　　 ng 路由（參考地址）
angular-animate.js ng 動畫（參考地址）
angular-cookies.js ng Cookie（參考地址）
angular-sanitize.js ng 安全模塊（應對XSS）
angular-messages.js ng 表單驗證（參考地址）
angular-resource.js ng restful數據交互（然並卵，只是封裝了一層$http，能夠用來請求本地json文件）
angular-mocks.js ng 單元測試工具類（參考地址）
angular-loader.js ng http請求loading效果（參考地址）
angular-scenario.js ng 單元測試用
angular-touch.js ng gestoures（針對移動端，基於jQuery Mobile的touch事件。不過貌似不太好用）
angular-aria.js ng 富互聯網應用（Accessible Rich Internet Applications，貌似沒啥用）
angular-meesage-format.js ng 編譯相關（謹慎使用，該文件只有當閉合編譯器的高級選項標識時纔會編譯）

控制器（controller）：

　　簡單理解爲－經過依賴注入的方式，把service、依賴關係以及其餘對象串聯到一塊兒，而後經過$scope把它們關聯到view上。

var app = angular.module('app', []);
app.controller('indexCtrl', ['$scope', 'demoService', function($scope, demoService) {
　　$scope.name = demoService.getName();
}])

　　路由控制：

var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/list', {
        	templateUrl: 'module/order/list.html', 
        	controller: 'listCtrl'
    	})
        .when('/detail/:orderid', {
        	templateUrl: 'module/order/detail.html', 
        	controller: 'detailCtrl'
    	})
        .otherwise({redirectTo: '/dashboard'});
}])

指令（directive）：

　　簡單理解爲－在特定DOM上運行的函數，指令能夠擴展這個DOM的功能。

　　應用場景：封裝通用插件

var app = angular.module('app', []);
app.directive('tree', function($location) {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            treeNodes: '='
        },
        templateUrl: './script/directive/template/treeTmpl.html',
        link: function($scope, $element, $attrs) {
        　　$scope.directTo = function(url) {
                if(!!url) {
                    $location.path(url);
                }
        　　}
        }
    }
})

　　參考資料：

服務（service）：

　　簡單理解爲－單例對象

　　三種構建方式：

　　　　factory、service、provider

　　區分：

　　factory須要建立一個對象，並return這個對象。比較經常使用且容易理解。　

var app = angular.module('app', []);
app.factory('demoService', function() {
　　var service = {
　　　　getName: function() {
　　　　　　var myName = 'Tom';　　　
　　　　　　return myName;
　　　　}
　　};
　　return service;
})

　　service接收一個構造函數，不須要建立一個對象並return。跟factory的方式區別不大，源碼裏只是加了層封裝。

var app = angular.module('app', []);
app.service('demoService', function() {
	this.getName: function() {
		var myName = 'Tom';
		return myName;
	}
})

　　provider是建立service最底層的方法，須要在自帶的$get()方法裏作邏輯。跟上面兩個的區別在於：能夠經過config()方法配置建立service。

var app = angular.module('app', []);
app.provider('demoService', function() {
	this.$get = function() {
	    var service = {
	    	getName: function() {
	    		var myName = 'Tom';
	    		return myName;
	    　　}
	    }
	    return service;
    }
})

　　provider應用場景：

當咱們須要在應用開始前對service進行配置的時候，eg：咱們須要配置services在不一樣的部署環境裏（開發、測試、生產），使用不一樣的後端接口處理時。
當咱們打算髮布開源時。

　　參考資料：AngularJS中factory，service，provider的區別

過濾器（filter）：

　　用於處理數據的格式化（format），eg：日期格式化、數字精度處理、字符串截取、對象排序等。

var app = angular.module('app', []);
app.filter('sortFilter', function() {
    return function(type) {
        if(type.toUpperCase() == 'ASC') {
            return 'DESC';
        } else {
            return 'ASC';
        }
    }
})

　　參考資料：AngularJS filter詳解