AngularJs第一車：AngularJs入門及第一個執行個體 AngularJs簡介 特性簡介 術語講解 文法講解
執行個體講解
摘要：主要給大家介紹了AngularJS及其特性，並以3個執行個體來做說明。 本教程使用AngularJs版本：1.6.4 開發應用軟體博主推薦：WebStorm AngularJs下載地址：http://docs.angularjs.org一、AngualrJs簡介
AngularJS是由Google開發出來的，它是為了克服HTML在構建應用上的不足而設計的。 AngularJS使用了不同的方法，它嘗試去補足HTML本身在構建應用方面的缺陷。 AngularJS通過使用我們稱為標識符(directives)的結構，讓瀏覽器能夠識別新的文法。例如： （1）使用雙大括弧{{}}文法進行資料繫結； （2）使用DOM控制結構來實現迭代或者隱藏DOM片段； （3）支援表單和表單的驗證； （4）能將邏輯代碼關聯到相關的DOM元素上； （5）能將HTML分組成可重用的組件。 AngularJS是一個基於MVC處理模式，實現了MVVM資料雙向繫結的用於開發動態web項目的架構。 以其資料和展現分離、MVVM、MVC、DI等強大的特性活躍於前端開發市場，是前端敏捷開發使用的主流的必須掌握的架構之一。
二、特性
1. 資料繫結 資料繫結可能是AngularJS最酷最實用的特性。它能夠協助你避免書寫大量的初始代碼從而節約開發時間。 一個典型的web應用可能包含了80%的代碼用來處理，查詢和監聽DOM。資料繫結使得代碼更少，你可以專註於你的應用。 一方面，model變化驅動了DOM中元素變化，另一方面，DOM元素的變化也會影響到Model。 這個在使用者互動中更加複雜，因為開發人員需要處理和解析這些互動，然後融合到一個model中，並且更新View。 這是一個手動的複雜過程，當一個應用非常龐大的時候，將會是一件非常費勁的事情。2. 模板 在AngularJS中，一個模板就是一個HTML檔案。但是HTML的內容擴充了，包含了很多協助你映射model到view的內容。 HTML模板將會被瀏覽器解析到DOM中。DOM然後成為AngularJS編譯器的輸入。AngularJS將會遍曆DOM模板來產生一些指導，即，directive（指令）。 所有的指令都負責針對view來設定資料繫結。 資料繫結是DOM變化，不是字串的串連或者innerHTML變化。使用DOM作為輸入，而不是字串，是AngularJS區別於其它的架構的最大原因。 使用DOM允許你擴充指令詞彙並且可以建立你自己的指令，甚至開發可重用的組件。 3. MVC 針對用戶端應用開發AngularJS吸收了傳統的MVC基本原則。MVC或者Model-View-Controll設計模式針對不同的人可能意味不同的東西。 AngularJS並不執行傳統意義上的MVC，更接近於MVVM（Model-View-ViewModel)。其中MVC原理圖可以看看下面的圖片。4、依賴注入（Dependency Injection，即DI） AngularJS擁有內建的依賴注入子系統，可以協助開發人員更容易的開發，理解和測試應用。 DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找建立並且提供給我們。5、Directives（指令） 指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情。那麼AngularJS可以做到。 指令可以用來建立自訂的標籤。它們可以用來裝飾元素或者操作DOM屬性。三、術語講解
模板(template): 包含了Angular特殊擴充標記的HTML代碼.
指令(directive): 擴充的HTML代碼，自訂的標籤、屬性等等.
模型(model): 儲存在JS中，用來和使用者互動的資料.
範圍(scope): 模型資料在HTML頁面中產生作用的範圍.
運算式(expression): AngularJS在HTML頁面中可以運算的文法.
編譯器(compiler): 被用來解釋HTML代碼中的Angular代碼.
過濾器(filter): 對HTML頁面中輸出的資料進行指定格式展示.
視圖(view): 統稱使用者看到的HTML視圖頁面.
資料繫結(data binding): JS中特定的資料和HTML頁面上的資料的關聯關係.
控制器(controller): 給視圖view提供功能支援的東東.
依賴注入(dependency injection): Angular自動建立對象並傳遞對象的一種方式.
注入器(injector): 專門用來實現依賴注入（DI）的容器.
模組(module): Angular用來對項目進行最高層次封裝的東東.
服務(service): Angular用來對視圖view提供業務功能支援的東東.
組件(component): 用於對網頁的公用部分進行封裝重用的Angular代碼通常會包含模板、指令、服務等等.四、文法講解
1.引導程式 任何應用程式，運行過程中都會有一個啟動並執行入口。 AngularJS應用程式也是一樣，正常情況下，引導Ag應用的入口程式有兩種：ng-app指令，bootstrap手工引導。 常規模式下，是通過ng-app指令引導Angular應用進行工作的。 網頁中引入Angular之後，程式運行時會自動尋找ng-app指令並從這個入口開始載入編譯並解釋執行。 代碼：通常，頁面中會定義ng-app熟悉來指定入口在script中通過angular的 module來載入ng-app指定的模組：
<html ng-app=”myApp”> <script> angular.module(“myApp”, []); </script> </html>
代碼：某些特殊情況下，也可以通過指令碼來動態控制載入啟動Angular應用通過angular.bootstrap(dom, module)來啟動應用：
<html><div id=”myDiv”></div><script> angular.module(“myApp”, []); var _div = document.getElementById(“myDiv”); angular.bootstrap(_div, “myApp”);</script></html>
2.基礎文法結構
1.開始深入學習AngularJS之前，先簡單認識AngularJS中的各個部分都是怎麼定義和使用的，方便解決後續學習過程中的一些困擾。
ng-app
2.Angular應用啟動並執行入口指令，常規情況下，是寫在我們前端項目的入口檔案的跟標籤上的，用於在項目啟動的時候引導Angular應用
angular.module(..)
3.Angular是通過模組來管理我們前端項目中的資料的，通常情況下一個項目中會包含各種各樣的資料，如管理員、新聞、公告等等. 模組時需要在應用啟動的時候就需要載入的，所以Angular在設計的過程中對於入口指令進行了改造可以綁定一個值，這個值就是系統的主模組
3.基本指令
指令是Angular中使用比較多的一個部分，Angular中的內建指令都是ng-開頭的一種特殊的文法結構， 如:ng-app等，常見的基本指令如下： ng-app=”myApp”:程式啟動並執行入口，通過名稱綁定一個模組 ng-init:用於在程式啟動並執行過程中，初始化一些變數的資料的操作 ng-model=”param”:資料繫結的指令，主要用於表單元素上的資料繫結 ng-bind:資料繫結的指令，用於將變數的資料顯示到頁面上，用於替代mustache文法的 ng-controller:控制器指令，用於在頁面中指定控制器作用範圍，通常作為屬性出現 ng-[event]:事件指令，用於在頁面中發生某些事件時調用指令的函數
4.基本文法
var app = angular.module(“name”, []):用於定義一個angular的模組 name是模組的名稱 []中可以添加其他的模組 app.controller(“name”, function() {}):用於定義一個angular的控制器 name是控制器的名稱 function(){}是這個控制器要處理功能的函數 $scope範圍 $scope是放在控制器函數中的一個參數。這個參數不需要傳值，而是angular自動賦值. 在操作的過程中$scope就相當於一個容器，可以在$scope上聲明變數或者函數， $scope上的變數和函數會自動和視圖頁面中的變數進行綁定，稱為$scope掛載資料。 $rootScope範圍 $rootScope是AngularJS的根範圍，也是全域範圍，放在控制器函數中的一個參數， 參數不需要傳值，angular會自動賦值，掛載在$rootScope上的資料，會被Angular應用中的所有模組下的子模組和控制器公用。 run()函數 配合$rootScope使用，用於聲明和初始化全域資料 app.run(function($rootScope) { // 處理代碼}) $scope.$watch() 掛載在$scope上，用於監控資料的變化 監控單個變數：$scope.$watch(“name”, function() {// 處理代碼}) 監控多個變數：$scope.$watch(“name1 + name2 + ..” + function() {})
5.angular事件處理
AngularJS中的事件操作，由於它自己虛擬DOM結構所以不支援普通事件， 通常通過它自己的事件指令來調用通過$scope掛在到控制器中的函數執行完成， 事件指令其實就是對於常見事件的封裝，以ng-開頭，加上事件名稱即可，如按一下滑鼠事件ng-click。五、執行個體講解
（1）入門執行個體一
<!DOCTYPE html> <html lang="en" ng-app=""> <head> <meta charset="UTF-8"> <title>AngularJS入門學習</title> <script type="text/javascript" src="./1.5.3/angular.min.js"></script> </head> <body> <p><input type="text" ng-model = "inputValue">請輸入內容</p> <h1>您輸入的內容為：{{inputValue}}</h1> </body> </html>
注意事項： 文本輸入指令<input ng-model="inputValue" />綁定到一個叫inputValue的模型變數。 雙大括弧標記將yourname模型變數添加到問候語文本。 你不需要為該應用另外註冊一個事件接聽程式或添加事件處理常式。 這個頁面非常簡潔，如果用Jquery寫，那麼就得設定input框的chang中事件， 然後更新內容。這一過程比AngularJS來得繁瑣多了。
（2）入門執行個體2
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS入門學習</title> <script type="text/javascript" src="./1.6.4/angular.min.js"></script> </head> <body ng-controller = "myController"> <p><input type="text" ng-model = "inputValue">請輸入內容</p> <h1>您輸入的內容為：{{inputValue}}</h1> </body> <script type="text/javascript"> var app = angular.module('myApp', []);//獲得整個angularJS影響的html元素 //控制器 app.controller('myController', function($scope) { $scope.inputValue = "離襯"; }); </script> </html>
注意，ng-app="myApp",這個不能少，還有ng-controller=“”也不能少， 這兩個分別批明了AngularJS有效範圍和Controller層有效範圍。
(3)入門執行個體3
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS入門學習</title> <script type="text/javascript" src="./1.6.4/angular.min.js"></script> </head> <body ng-controller = "myController"> <button ng-click= "myClick()" ></button> <h1 ng-if = "!flag"> 離襯</h1> </body> <script type="text/javascript"> var app = angular.module('myApp', []);//獲得整個angularJS影響的html元素 //控制器 app.controller('myController', function($scope) { $scope.flag = false; $scope.myClick = function(){ console.log($scope.flag); $scope.flag = !$scope.flag ; console.log($scope.flag); } }); </script> </html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
