我們將利用Angularjs 和 Bootstrap，開發一個前端應用執行個體，通過這一次簡單的項目實戰，引領大家進入AngularJS前端開發的殿堂，並向大家介紹一下幾個知識點：
1.MVC 基礎，通過項目執行個體，讓大家初步體會MVC設計模式的應用。
2.構建我們第一個AngularJS應用，通過一個實際用例的開發，大家可以對前端開發獲得一定的感性認識。
3.初步瞭解AngularJS三個最重要的組成組件，他們分別是Model, View, 和Controller.
4.初步瞭解AngularJS的Scope對象的使用。
MVC模式的基本介紹:
MVC是一種UI架構模式，它的目的是將應用的功能分解到專門的模組，實現模組的重用性，減少模組間的耦合度，增強系統的魯棒性。MVC模式主要分成三部分：
Model: 用來儲存系統資料
View: 用來實現系統的UI介面
Controller: 用於銜接Model和View.
在我看來，學習的最好方式是實踐，我們將開發一個前端應用執行個體，通過這個執行個體，一方面我們可以加深對AngularJS架構的理解，同時我們也能感受到MVC模式如何嵌入到開發流程當中。
應用介紹（代碼路徑：http://xiazai.jb51.net/201608/yuanma/Bootstrap-mooc(jb51.net).rar)
我們將做一個猜數位web應用，介面如下：
應用後台會隨機產生一個範圍在1到1000之內的隨機數，使用者在文字框中輸入猜測的數字，如果輸入正確，應用會在下方彈出綠色的提示，如果錯誤，例如輸入的數字比後台產生的數字大或者小，那麼應用會彈出相應提示，例如：
在底部顯示出的數字表明我們猜測了多少次。
整個應用的代碼目錄結構如下：
由於我們當前做的是一個簡單的應用執行個體，所以我們將各個模組的代碼放在一起，以後我們構建大規模的前端應用時，我們會非常小心的去安排整個項目的代碼目錄結構。
在上圖所表示的檔案組成中，angular.js 是我們賴以開發應用的架構檔案，bootstrap.min.css是用於設計UI介面的介面庫檔案，而numberGuessing.html 將是我們要開發的應用主體檔案。接下來我們將一步一步向numberGuessing.html添加代碼，逐步增加應用的功能。
首先，我們要做的是構建一個簡單的html模板，在此模板上，我們才好慢慢添加功能，模板代碼如下：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Guess The Number !</title> <link href="bootstrap.min.css" rel="stylesheet"></head><body > <script src="angular.js"></script></body></html>
在上面的模板代碼中，注意到有一行 ” meta… charset=”UTF=8” “
這行的目的是讓瀏覽器正確的顯示中文，如果沒有這一行，瀏覽器在顯示中文時會出現代碼，在模板中，我們先將後面要使用到的架構代碼和UI介面庫代碼引入。完成後，我們將其載入到瀏覽器，看看有沒有錯誤，如果沒錯的話，當前我們看到的是一片空白：
接下來，我們將開發應用的後台邏輯代碼，我們先確定幾個要用到的變數：
originalVal , 用來儲存產生的隨機數
userGuess, 儲存使用者當前輸入的猜測數字
numOfTries, 記錄使用者嘗試了多少次
deviation: 記錄使用者輸入的數字與後台隨機數的差別，如果使用者輸入的數字大了，那麼deviation > 0; 輸入小了， devitation < 0;如果輸入正確， 那麼devitation == 0
Controller 模組的實現
Controller用於串連Model和View兩個模組,系統的商務邏輯也放在Controller中實現。當使用者在介面端做某些操作，例如點擊按鈕，輸入內容時，Controller接收到View端的相應資訊，然後Controller觸發相應的事件處理邏輯，例如使用者在介面輸入數字，點擊確定按鈕後，Controller從View拿到輸入的數值，然後從Model拿出應用產生的隨機數，兩廂比較，把比較的結果deviation返回給View, View根據返回的deviation值，展現相應的介面變化。我們看看Controller的邏輯主體是如何?的：
function GuessTheNumberController($scope) { $scope.verifyGuess = function () { $scope.deviation = $scope.originalVal - $scope.userGuess; $scope.numOfTries = $scope.numOfTries + 1; } $scope.initializeGame=function() { $scope.numOfTries = 0; $scope.originalVal = Math.floor((Math.random() * 1000) + 1); $scope.userGuess = null; $scope.deviation = null; } $scope.initializeGame(); }
GuessTheNumberController 函數設立起了Model對象的數值屬性，這些數值的意義在前頭我們已經提到過，同時這個Controller函數還匯出了兩個介面調用，一個是verifyGuess，當介面上的確定按鈕點擊後，View模組會調用該介面，用於判斷使用者輸入的資料是否正確，同時該調用會更新deviation 和 numOfTries兩個屬性的值。
initializeGame 用於對整個系統應用進行初始化，先是產生隨機數，然後初始化一些變數為空白。
在我們的Controller主體函數中，傳入了一個參數$scope, 這個參數是AngularJS傳給我們的，它基本上等價於MVC模式中的M,也就是Model, 它類似於一個資料庫，專門用來儲存應用的資料和邏輯代碼，大家可以看到，在initializeGame調用中，Controller將numOfTries, originalVal等這些資料放入到$scope對象中，在verifyGuess調用中，又從$scope拿到這些資料進行計算修改。
上面的Controller代碼加入到我們的模板檔案numberGuessing.html中後，結果如下：
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Guess The Number !</title> <link href="bootstrap.min.css" rel="stylesheet"></head><body > <script src="angular.js"></script> <script type="text/javascript"> function GuessTheNumberController($scope) { $scope.verifyGuess = function () { $scope.deviation = $scope.originalVal - $scope.userGuess; $scope.numOfTries = $scope.numOfTries + 1; } $scope.initializeGame=function() { $scope.numOfTries = 0; $scope.originalVal = Math.floor((Math.random() * 1000) + 1); $scope.userGuess = null; $scope.deviation = null; } $scope.initializeGame(); } </script></body></html>
App View 應用的介面設計
視圖，也就是MVC中的View, 其實就是將Model中的資料通過圖形介面展現出來。我們當前的應用簡單，基於簡單原則，介面設計的使用者體驗未必很好，但足以讓我們快速理解如何利用AngularJS結合Bootstrap快速構建一個程式的前端介面。
我們看看介面的搭建，同時把Controller跟介面邏輯整合起來：
<body ng-app="app"><div class="container" ng-controller="GuessTheNumberController"> <h2>猜數字 !</h2> <p class="well lead">請猜出電腦產生的隨機數，它的範圍在1到1000之間.</p> <label>請您出手: </label><input type="number" ng-model="userGuess"/> <button ng-click="verifyGuess()" class="btn btn-primary btn-sm">確定</button> <button ng-click="initializeGame()" class="btn btn-warning btn-sm">重來</button> <p> <p ng-show="deviation<0" class="alert alert-warning">爺，您出價過高了！</p> <p ng-show="deviation>0" class="alert alert-warning">爺，少了，再加點，再加點.</p> <p ng-show="deviation===0" class="alert alert-success">爺，還真讓您說准了!.</p> </p> <p class="text-info">您猜過的次數是 : <span class="badge">{{numOfTries}}</span><p></div>
MVC中的C,也就是Controller,它是介面(view)和資料(Model)的橋樑，要想把這三者關聯起來，我們需要把他們三個都嵌入到AngularJS架構中，然後依賴於AngularJS的架構機制，實現三者間的相互聯動。
為了將視圖嵌入到AngularJS, 上面中的代碼語句：
<body ng-app="app">
ng-app 這條屬性告訴Angular，body 標籤內的HTML代碼將作為視圖部分嵌入到AngulaJS架構中，”app”作為ng-app屬性值，通知AngularJS架構去載入一個名為”app”的模組(module)。這個模組相當於一個儲存倉庫，我們把前端應用的各種功能分解成各個單元，這些單元就存放在名為app的模組裡，controller, model 也都是功能單元，稍後我們會看到他們會被加入到名為app的模組裡，AngularJS架構會從這個模組中拿出controllre 和 model這兩個單元來使用。
接下來，我們先將這個名為app的模組放入AngularJS架構，代碼如下：
<script type="text/javascript"> angular.module('app',[]) function GuessTheNumberController($scope) { .... }<script>
這樣我們在AngularJS架構中就有了名為app的模組，並且通過ng-app=”app”將該模組和介面關聯了起來，接下來，我們需要把Controller單元放入到app模組中，代碼如下：
<script type="text/javascript"> angular.module('app',[]) .controller('GuessTheNumberController', GuessTheNumberController); function GuessTheNumberController($scope) { .... }</script>
angular.module 函數產生並返回一個module對象，這個對象含有一個介面叫controller,通過這個介面，可以把我們自己開發的controller功能單元放入到module裡面，從上面代碼可以看出，我們在module中放入一個controller單元，這個單元的名字就叫GuessTheNumberController，也就是controller函數的第一個輸入參數，第二個輸入參數是controller單元的功能邏輯主體，也就是我們前頭開發的GuessTheNumberController函數。
做完上面的步驟後，我們的應用就開發完畢，此時可從瀏覽器載入我們的html，於是就可以看到具體效果了。
在收尾前，我們深入代碼看看，AngularJS是如何將各個模組整合起來，形成一個完整的前端應用的。在代碼中，有一些特殊符號和屬性，特殊符號，例如：{{ }}, 特殊屬性形如： ng-app, ng-controller等。在Angular語境下，{{ 和 }} 合在一起稱為插值符號，ng-* 形式的屬性，稱之為Angular指令。Angular 會把夾在{{ 和 }} 中的變數轉換為變數對應的數值，例如下面的程式碼片段：
<p class="text-info">您猜過的次數是 : <span class="badge">{{numOfTries}}</span><p>
numOfTries表示使用者嘗試猜測了多少次，如果numOfTries的值是0的話，AngularJS會把上面的代碼轉義為：
<p class="text-info">您猜過的次數是 : <span class="badge">0</span><p>
於是瀏覽器便會將介面渲染成如下情形：
AngularJS指令是一個複雜的技術知識點，在後續的討論中，我們會進行詳細的探討，這裡我們簡單介紹下，AngularJS指令的作用，主要擴充HTML的文法功能，指令是AngularJS架構中，功能最為強大的地方。我們簡單介紹下代碼中用到的AngularJS指令.
ng-controller: 該指令將Controller和HTML表示的View銜接起來，使用該指令，View才能夠訪問Controller設定的變數和介面，大家可以嘗試在代碼中把
ng-model=ng-controller=”GuessTheNumberController”
這一句去掉，然後看看有什麼結果。
ng-model: 將Model中的變數與View中的控制項進行雙向繫結，例如：
<input type="number" ng-model="userGuess"/>
這條語句將model中的變數userGuess與介面上的輸入文字框綁定，當文字框中的數值改變時，userGuess對應的值也跟著改變，反之，如果guess的值在後台改變了，那麼文字框中的內容也做相應的變化。
ng-click：將介面產生的點擊事件跟Controller的處理邏輯串連起來，例如：
<button ng-click="verifyGuess()" class="btn btn-primary btn-sm">確定</button>
上面的代碼，將”確定”按鈕的點擊事件跟Controller的verifyGuess()函數串連起來，一旦按鈕被點擊，這個函數就會被執行。
ng-show: 用來控制View的控制項是否要顯示出來，如果ng-show 對應的運算式的值為true, 那麼控制項就顯示，如果為false，那麼控制項就不顯示，例如：
<p ng-show="deviation<0" class="alert alert-warning">爺，您出價過高了！</p>
上面的代碼，功能是，當變數deviation 的值小於0時，段落元素P的內容就會顯示到介面上。
AngularJS是一個強大但也是比較複雜的前端開發架構，我們這一執行個體作用僅僅是幫大家初步認識AngularJS的強大功能，先獲得一定的感性認識，以便為我們今後理性的分析掌握整個AngularJS前端開發技術打下堅實的基礎。
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap外掛程式使用教程
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。
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
