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.valid valid invalid dirty pristrine error.required

核心思想

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