AngularJS基礎知識

AngularJS

概念

一款優秀的前端JS框架 偽靜態文本展示設計的聲明式語言

優點

為瞭克服HTML在構建應用上的不足 開發周期短 完成相同功能的代碼量少

使用場景

web開發 SPA(single web page application) 單頁面應用 混合APP開發

對比

JavaScript : 刀耕火種 函數類庫(JQuery): 鐵犁牛耕 框架(AngularJS): 機械化種地

缺點

不適用DOM操作頻繁的操作(遊戲和網頁編輯器等)

框架

AngularJS VueJS Backbone

歷史

2009年 Misko Hevery創建,後被Google收購並用於很多Google項目 數據:17000 6 1500 3 學習版本:1.5.8

下載

npm install angular

主要內容

1.指令

1.1 系統指令

渲染指令(解釋)

ng-app:定義angularjs生效的范圍 ng-model:定義模型數據 ng-controller:定義控制器($scope) ng-bind:綁定文本模型 等價於:{{}} 事件指令

ng-click ng-mouseover|mouseout|mouseenter|mouseleave ng-submit ng-change: 節點指令-DOM操作

ng-checked ng-switch/ng-switch-when ng-style ng-class ng-hide/ng-show ng-href/ng-src ng-repeat ng-repeat=”user in userlist” [{},{},{}] ng-include

1.2 自定義指令

// HTML代碼

// 標簽指令

// class指令

// 屬性指令

// 註釋指令

2.服務(Service):控制器都可以使用的數據,就定義為服務

2.1 系統服務

$http(ajax) $timeout $interval

$http服務:(Promise)

$http.get(url, [config]).then(successCallback, errorCallback)

$http.post(url[,data][, config]).then(successCallback, errorCallback)

$timeout/$interval:執行結束之後會自動觸發臟值檢測

setTimeout/setInterval:也會執行,但是不會觸發臟值檢測,不能同步更新視圖

2.2 自定義服務

// 1.新建模塊

var app = angular.module('myApp', []);

// 2.新建服務:

// 使用service創建的服務最終隻可以返回對象

app.service('ZuliaoService', function() {

// 返回一個對象

return {

username: "足療小妹",

age: 18,

work: function() {

alert('技術棒棒的');

}

};

// 返回字符串無效

// return 'hello H511';

})

// 使用factory創建的服務可以返回字符串和對象

app.factory('ZuliaoFactory', function() {

// 返回對象

return {

username: "洗發小妹",

age: 22,

work: function() {

alert('給凡凡洗的一頭懵逼');

}

};

// 返回字符串

return 'hello world';

})

3.過濾器(filter)

3.1 系統過濾器

currency:貨幣

number

limitTo

lowercase

uppercase

date

filter

orderBy

3.2 自定義過濾器

// 1.新建模塊

var app = angular.module('myApp', []);

// 2.創建自定義的過濾器 3999=>3999.00

app.filter('formatNumber', function() {

// 返回一個函數,函數的參數是需要過濾的值

return function(i) {

// 保留兩位小數點

return i.toFixed(2);

}

})

4.路由:引導用戶訪問指定的頁面 = get+請求路徑

// 1.新建模塊

var app = angular.module('myApp', ['ngRoute']);

// 2.新建路由:routeProvider:路由提供者

app.config(function($routeProvider) {

// 建路由(鏈式調用)

$routeProvider

.when('/index', {

// 當請求/index路由的時候,template內容被寫入到ng-view中

template: '

這是首頁

'! }) .when('/list', { // 通過ajax從服務器獲取,所以必須用localhost訪問 templateUrl: 'template/list.html', // 與list頁面匹配的控制器 controller: 'ListController' }) .when('/content', { templateUrl: 'template/content.html', // 與content頁面匹配的控制器 controller: 'ContentController' }) .otherwise({ // 如果請求的路由都不存在,重定向到/index首頁 redirectTo: '/index' }) })

常用方法

// 手動監聽price和num的變化

$scope.$watch('price',function(){})

$scope.$watch('num+price',function(){})

$scope.$watch('cartlist',function(){},true) 深度監聽

// 遍歷數據

angular.forEach($scope.shoplist,function(value,key){})

動畫效果

依賴CSS效果

表單驗證

表單name名.表單元素name.validvalid invaliddirty pristrineerror.required

核心思想

MVC

Model 模型,跟頁面數據 ng-model Controller 控制器 控制當前范圍內的邏輯操作 ng-controller View 視圖,HTML模板內容 HTML標簽 模塊化 MVVM model-view-viewmodel 數據的雙向綁定 依賴註入

發佈留言