AngularJS入門之如何快速上手

概述： AngularJS（ng）是一個純JS框架，AngularJS易於構建CRUD應用(CRUD意思是增刪改查)

適用於以資料操作為主的SPA（Single Page Application）應用。
基於jQuery對傳統的DOM操作進行進一步的封裝---使用MVC操作代替了所有的DOM操作。
不再是“先查詢元素再操作元素”，
所有的操作都是以“業務資料“為中心

搭建環境：

使用 AngularJS 的步驟：
1.引入必需的js檔案 : angular.js
2.為父元素宣告ngApp屬性(這裡的父元素一般指html)(系統會自動載入或啟動一個NG應用，這個ngApp是唯一的，只能有一個)
3.為父元素內部使用angularJS相關內容
4.

<!DOCTYPE html> <html lang= "en" ng-app= "haixin" > <head> <meta charset= "UTF-8" >

<title>ng</title> <!--[if lte IE 9 ]> <script src= "public/js/html5shiv.min.js" ></script>

<script src= "public/js/respond.min.js" ></script> <![endif]--> <script src= "public/js/jquery-2.2.3.min.js" ></script> <script src= "public/js/bootstrap.js" ></script> <script src= "public/js/angular.js" ></script> <link rel= "stylesheet" href= "public/css/bootstrap.css" > <link rel= "stylesheet" href= "public/css/animation.css" > </head> <body> </body> </html>

　　ng四大特性：

1.採用MVC模式，頁面中再也無需出現DOM操作。
2.雙向資料繫結。
3.依賴注入
4.模組化設計

ng四大特性之一MVC模式：

(1)Model: 模型，指業務資料，web專案中由js變數擔當model。
(2)View: 檢視，使用者介面，HTML
(3)Controller: 控制器，Function

ng指令：

AngularJS 中ng模組提供的指令(directive)
(1) ngApp：自動載入/啟動一個AngularJS應用
(2) ngInit：用於宣告Model（模型）變數
(3) ngController：建立一個控制器物件的例項
(4) ngBind：在當前元素的innerHTML上輸入指定的表示式的值
(5) ngRepeat：為HTML增加迴圈功能，迴圈輸出當前元素
(6) ngIf：為HTML增加選擇功能，只有在表示式值為true時，當前元素才新增到DOM樹
(7) ngSrc：解決img等標籤的src屬性中包含{{}}產生的問題
語法： <img ng-src="路徑/{{表示式}}"/>
(8) ngClick: 為元素繫結監聽函式(不是全域性函式，而是Model函式)
語法： <ANY ng-click="模型函式()">
(9) 使用$scope.模型函式名 = function(){}格式來宣告模型函式
(10) ngStyle: 賦值為一個Model物件，用於為當前元素指定樣式
(11) ngShow/ngHide: 通過display：none/block來控制當前元素是否顯示
(12) ngDisabled: 賦值為true/false，可以控制當前元素是否禁用
(13) ngChecked: 賦值為true/false，可以控制當前元素是否選中

Angular中宣告變數——Model資料
有兩種方式可以宣告Model變數：
(1)使用ngInit指令宣告
ngInit 指令可以宣告為HTML元素的屬性或樣式
    ngInit 指令宣告的Model變數可以先使用再宣告
    ngInit 指令可以一次宣告多個Model變數，用分號隔開即可
ngInit 指令可以宣告哪些型別的Model變數：
number、string、boolean、物件、陣列、物件的陣列
注意：使用ngInit定義Model變數時不能使用new關鍵字；此方法
把View和Model混雜在一起，不推薦使用！

(2)使用Controller建立Model變數——推薦使用
建立Module <= 建立Controller <= 建立Model變數
注意：新版本的Angular要求控制器必須宣告在一個模組中！

具體步驟：
1)宣告一個自定義的模組(module)
angular.module('模組名', [ ])
2)在當前AngularJS應用中註冊自定義模組
ng-app="模組名"
3)在自定義模組中建立Controller函式，其中建立Model資料
$scope.模型變數名 = 值
4)在View中建立Controller物件的例項，指定其作用範圍
<標籤 ng-controller=“控制器名”>...控制器的有效範圍...</標籤>
5)在控制器的作用範圍內輸出Model變數
可以使用{{}}輸出Model變數的值開發人員來編寫

$scope $rootScope
(1)每個控制器的例項都對應一個作用範圍物件，即$scope
(2)在控制器中宣告的Model資料，必須儲存在一個作用範圍內
(3)一個HTML中可以宣告多個控制器例項，每個控制器都有自己的作用範圍，這些範圍內的資料彼此隔離不會互相影響，

可以由不同開發人員來編寫
(4)為了在多個控制器間共享資料，可以將Model資料儲存在一個“全域性作用範圍內”——$rootScope——整個AngularApp中

有且只有一個$rootScope物件，且此物件是所有的$scope的父作用域物件
(5)作用域物件間可以實現繼承，只需要將某個控制器例項宣告在另一個控制器例項的有效作用域內部即可。
模組：
基本語法：

<script>
    angular.module("haixin",[]).controller("方法名",function($scope){
        $scope.mobile1="";
        $scope.mobile2="";
    })
</script>

控制器：
定義物件屬性：

<script>
    function studentController($scope){
        $scope.student={
            stu1:"zhangsan",
            stu2:"lisi"
        }
    }
</script>

控制器：
定義方法：

<script>
    function studentController($scope){
        $scope.student={
            sName1:"zhangsan",
            sName2:"lisi",
            allName:function(){
                var  n;
                n=$scope.student;
                return n.sName1+""+n.sName2;
            }
        }
    }
</script>

PS：小練習：
(1)建立一個新的頁面，其中宣告module、controller、model變數：一個學生物件，其中包含sname、gender、birthday、

score等屬性，在view中顯示這些model資料
(2)建立一個新的頁面，其中宣告module、controller、model變數：5個分陣列成的陣列，在view中的一個列表中輸出這5個數字
(3)五個商品的資料顯示在View中的table元素中，使用ngRepeat指令進行迴圈
案例答案：

<html lang= "en" ng-app= "haixin" > <body> <section ng-controller= "practice" > <p>{{obj}}</p> <ul> <li ng- repeat = "k in arr" >{{k}}</li> <li ng- repeat = "(k,v) in arr" >{{k}}:{{v}}</li> </ul> </section> <section ng-controller= "commodity" > <table class= "table table-bordered table-hover text-center" > <th>序號</th><th>商品名字</th> <th>商品價格</th><th>商品圖片</th> <tr ng- repeat = "i in arr1" > <td>{{$index+ 1 }}</td> <td>{{i.name}}</td> <td>{{i.price}}</td> <td><img ng-src= "{{i.img}}" width= "60" ></td> </tr> </table> <button class= "btn btn-block btn-primary" ng-click= "add()" >點選載入</button> </section> <script> angular.module( "haixin" ,[]).controller( "practice" ,function($scope){ $scope.obj = new Object(); $scope.obj.name = "Tom" ; $scope.obj.gender = "boy" ; $scope.obj.birthday = "4.18" ; $scope.arr=[ 10 , 20 , 30 ]; }).controller( "commodity" ,function ($scope) { $scope.arr 1 =[ {name: "商品1" ,price: "77" ,img: "images/1.jpg" }, {name: "商品2" ,price: "33" ,img: "images/2.jpg" }, {name: "商品3" ,price: "55" ,img: "images/3.jpg" } ]; $scope.add=function () { for(var i= 0 ;i< 3 ;i++){ var arr 2 ={}; arr 2 .name= "商品" ; arr 2 .price= "11" ; arr 2 .img= "images/" +( 1 +i)+ ".jpg" ; $scope.arr 1 .push(arr 2 ); } } }) </script> </body> </html>

　　 ng四大特性--雙向資料繫結：

方向一：把Model資料繫結到View上
把Model資料繫結到View上後，任何Model資料的修改，都會自動更新到View上（{{ }}、ngBind、ngRepeat、

ngSrc...都實現了方向1的繫結）

方向二：把View繫結到Model上
把View資料繫結到Model後，任何View資料的修改，都會自動更新到Model上
此後不論任何時候，只要View中的資料一修改，Model中的資料會自動隨之修改。實現方法：只有ngModel指令。

可以使用$scope.$watch(‘模型變數名’, fn)監視一個模型變數值的改變；單行文字輸入域、多行文字輸入域、下拉框、

單選按鈕控制元件預設會把自己的value屬性值繫結到一個Model變數；複選框會把一個true/false值繫結到一個Model變數。

ng模組中提供的服務(service)
(1)$rootScope: 用於在不同的控制器間共享資料
(2)$interval: 提供週期性定時器服務
(3)$interval.cancel(t)：清除定時器
(4)$timeout: 提供一次性定時器服務
(5)$http: 發起非同步的Ajax請求服務
定時器小案例：input值改變的時候，控制檯也會改變，若只寫input和P的時候，input值改變的時候P的內容也跟著改變。
程式碼如下：

<input type= "text" ng-model= "Uname" > <p>{{name}}</p> <script> $scope.$watch( "Uname" ,function () { console.log($scope.Uname); }) </script>

PS：小練習
1：簡易版的點選次數計算器
2：簡易版的輪播廣告
3：用Bootstrap元件製作一個進度條（每隔0.2s，前進10%）取消定時：$interval.cancel(t);
4：簡易版的購物車
5：同意使用條款，則可以註冊，否則禁止註冊
6：簡易版模擬QQ選擇切換頭像
7：全選或取消全選（PS：4,5,6,7這四個小練習是雙向資料綁定了，直接加ng指令就可實現。下面案例中圖片

名字一律為n.jpg【n 為正整數】）
案例程式碼如下：

<html lang= "en" ng-app= "haixin" > <body> <section class= "container" > <section ng-controller= "lunbo" > <p>{{n}}</p> <button class= "btn btn-danger" ng-click= "fn()" >點選加一</button><br/> <img ng-src= "images/{{img}}.jpg" alt= "" width= "300" > <button class= "btn btn-success" ng-click= "prev()" >上一個</button> <button class= "btn btn-success" ng-click= "next()" >下一個</button> </section> <section class= "progress" ng-controller= "jindutiao" > <div class= "progress-bar" role= "progressbar" aria-valuenow= "85" aria-valuemin= "0" aria-valuemax= "100" ng-style= "myStyle" ></div> </section> <section ng-controller= "a2" > <form> 單價：<input type= "number" placeholder= "請輸入價錢" ng-model= "price" > 數量：<input type= "number" placeholder= "請輸入數量" ng-model= "num" > 小計：<span>{{price*num}}</span> </form> <input type= "checkbox" ng-model= "agree" >我同意本站的使用條款 <button class= "btn btn-success" ng-disabled= "!agree" >提交註冊</button> <button class= "btn btn-danger" ng-if= "agree" >提交註冊</button> <button class= "btn btn-primary" ng- show = "agree" >提交註冊</button> <select ng-model= "pic" > <option value= "images/1.jpg" >帥鍋</option> <option value= "images/2.jpg" >蕾女</option> <option value= "images/3.jpg" >大爺</option> <option value= "images/4.jpg" >大叔</option> </select> <span><img ng-src={{pic}} width= "200" ></span> <aside> <input type= "checkbox" ng-checked= "checkAll" >A <input type= "checkbox" ng-checked= "checkAll" >B <input type= "checkbox" ng-checked= "checkAll" >C <input type= "checkbox" ng-model= "checkAll" > <span ng- hide = "checkAll" >全選</span> <span ng- show = "checkAll" >取消全選</span> </aside> </section> </section> <script> angular.module( "haixin" ,[]).controller( "lunbo" ,function ($scope) { $scope.n = 10 ; $scope.fn=function () { $scope.n++; }; $scope.img = 1 ; $scope.next=function () { $scope.img++; if($scope.img== 5 ){ $scope.img= 1 ; } }; $scope.prev=function () { $scope.img--; if($scope.img< 1 ){ $scope.img= 4 ; } } }).controller( "jindutiao" ,function ($scope,$interval) { $scope.n= 10 ; $scope.myStyle={ "width" : "0%" }; var t = $interval(function () { $scope.myStyle.width=$scope.n+ "%" ; $scope.n+= 10 ; if($scope.n== 90 ){ $interval.cancel(t); } }, 200 ) }) </script> </body>

ng四大特性之—依賴注入：

依賴： Driver物件的建立和執行必需一個car物件，稱為Driver物件“依賴於”Car物件。依賴注入體現著“最少知識法則”

依賴物件的解決方法：

(1)主動建立

	var c=new Car();   //建立被依賴的物件
	var d=new Driver(c); //使用被依賴的物件

(2)被動注入(inject)
一般由特定框架來建立Driver物件，發現其依賴於一個Car物件，框架自動建立被依賴的Car物件——稱為“依賴注入”。
依賴注入的典型例子：

	angular.module.controller('控制器名', function( $scope, $http ){ })

注意：
控制器物件的建構函式是由AngularJS來呼叫的，不能手動呼叫
Angular會根據控制器物件的建構函式的形參名來建立依賴的引數物件——形參名不能隨意指定！
若控制器物件未宣告形參，則Angular不會傳遞任何實參進來
控制器物件的形參名（PS：此處的形參名是不能夠隨意定的）必需是Angular可識別的，但數量和順序都沒有限制—Angular會

根據每一個形參的名稱來查詢建立被依賴的物件，並自動注入進來。

ng四大特性之—模組化設計：

模組化設計體現著“高內聚低耦合”設計原則。

專案中，可以根據功能的不同，將不同的元件放置在不同的模組中
AngularJS中有兩種模組：
(1)AngularJS官方提供的模組：ng、ngRoute、ngAnimate、ngTouch、....
(2)使用者自定義的模組：userModule、productModule、orderModule、....
一個NG模組中可以包含多個元件：
（1）controller元件：用於維護模型資料
（2）directive元件：用於在View中輸出/繫結Model資料
（3）service元件：用於在不同的控制器中提供某種函式服務
（4）filter元件：用於對View中輸出的資料進行格式化
……..
Filter元件（過濾器）：
用於Model資料在View中呈現時進行某種格式的篩選/過濾/格式化。
在View中使用過濾器時，需要藉助於管道：|
ng模組中提供的過濾器：(ps:HH指的是24小時制)
(1)lowercase：把資料格式化為小寫
(2)uppercase：把資料格式化為大寫
(3)number：把數字型資料格式化為三位一個逗號的字元串同時指定小數點位數 eg: {{price | number : 2 }}
(4)currency：把數字型資料格式化為貨幣格式的字串，同時指定貨幣符號 eg: {{price | currency : '￥' }}
(5)date：把數字/Date型資料格式化為特定日期時間格式的字串

	<p>{{name | lowercase}}</p>
	<p>{{name | uppercase}}</p>
	<p>{{num  | number:2}}</p>
	<p>{{num  | currency:"￥"}}</p>
	<p>{{time | date:"yyyy年MM月dd日 HH時mm分ss秒"}}</p>
	<p>{{time | date:"yyyy-MM-dd HH:mm:ss"}}</p>

PS案例：點選一個按鈕“載入員工資料”，向伺服器發起非同步的Ajax請求，獲取服務端的一段JSON資料，顯示在一個

表格中（注意資料格式）；載入完資料後，按鈕即禁用/消失。
案例答案：

<!DOCTYPE html> <html ng-app= "haixin" > <head lang= "en" > <meta charset= "UTF-8" > <title>Title</title> <link rel= "stylesheet" href= "../css/bootstrap.css" > </head> <body> <section class= "container" ng-controller= "a1" > <table class= "table table-bordered table-hover" > <tr> <th>序號</th> <th>姓名</th> <th>工資</th> <th>入職日期</th> </tr> <tr ng- repeat = "j in pro" > <td>{{$index+ 1 }}</td> <td>{{j.ename}}</td> <td>{{j.salary |number}}</td> <td>{{j.hiredate |date: "yyyy年MM月dd日" }}</td> </tr> </table> <button ng-click= "add()" class= "btn btn-block btn-success" ng-disabled= "tab" >點選</button> </section> <script src= "../js/jquery-1.11.3.js" ></script> <script src= "../js/bootstrap.js" ></script> <script src= "../js/angular.js" ></script> <script> angular.module( "haixin" ,[]).controller( "a1" ,function ($scope,$http) {

AngularJS入門之如何快速上手

AngularJS入門之如何快速上手

入門之快速排序

排序算法入門之快速排序（java實現）

Solidity 語言簡易入門，快速上手！

angularJs入門之購物車實現

TensorFlow 之快速上手詳解

SpringSecurity學習之快速上手

【筆記】webpack4.0教程_配置詳解_圖文_新手入門_快速上手

react-native入門之快速入門---返回鍵實現

排序入門之快速排序簡單入門

MVC5開發前端框架AngularJS快速入門之Controller

python編程快速上手之第10章實踐項目參考答案(11.11.2)

python編程快速上手之第10章實踐項目參考答案(11.11.3)

python編程快速上手之第10章實踐項目參考答案(12.13.1)

python編程快速上手之第13章實踐項目參考答案(13.6.1)

python編程快速上手之第13章實踐項目參考答案(13.6.2)

python編程快速上手之第15章實踐項目參考答案(17.7.2)

python編程快速上手之第15章實踐項目參考答案(17.7.3)

Laravel入門及實踐，快速上手社交系統ThinkSNS+二次開發

【第二篇】ASP.NET MVC快速入門之數據註解（MVC5+EF6）

AngularJS入門之如何快速上手

相關推薦