利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn)
我們將利用Angularjs 和 Bootstrap，開發(fā)一個(gè)前端應(yīng)用實(shí)例，通過這一次簡(jiǎn)單的項(xiàng)目實(shí)戰(zhàn)，引領(lǐng)大家進(jìn)入AngularJS前端開發(fā)的殿堂，并向大家介紹一下幾個(gè)知識(shí)點(diǎn)：
1.MVC 基礎(chǔ)，通過項(xiàng)目實(shí)例，讓大家初步體會(huì)MVC設(shè)計(jì)模式的應(yīng)用。
2.構(gòu)建我們第一個(gè)AngularJS應(yīng)用，通過一個(gè)實(shí)際用例的開發(fā)，大家可以對(duì)前端開發(fā)獲得一定的感性認(rèn)識(shí)。
3.初步了解AngularJS三個(gè)最重要的組成部件，他們分別是Model, View, 和Controller.
4.初步了解AngularJS的Scope對(duì)象的使用。
MVC模式的基本介紹:
MVC是一種UI架構(gòu)模式，它的目的是將應(yīng)用的功能分解到專門的模塊，實(shí)現(xiàn)模塊的重用性，減少模塊間的耦合度，增強(qiáng)系統(tǒng)的魯棒性。MVC模式主要分成三部分：
Model: 用來存儲(chǔ)系統(tǒng)數(shù)據(jù)
View: 用來實(shí)現(xiàn)系統(tǒng)的UI界面
Controller: 用于銜接Model和View.
在我看來，學(xué)習(xí)的最好方式是實(shí)踐，我們將開發(fā)一個(gè)前端應(yīng)用實(shí)例，通過這個(gè)實(shí)例，一方面我們可以加深對(duì)AngularJS框架的理解，同時(shí)我們也能感受到MVC模式如何嵌入到開發(fā)流程當(dāng)中。
應(yīng)用介紹（代碼路徑：http://xiazai.jb51.net/201608/yuanma/Bootstrap-mooc(jb51.net).rar)
我們將做一個(gè)猜數(shù)字的web應(yīng)用，界面如下：
應(yīng)用后臺(tái)會(huì)隨機(jī)生成一個(gè)范圍在1到1000之內(nèi)的隨機(jī)數(shù)，用戶在文本框中輸入猜測(cè)的數(shù)字，如果輸入正確，應(yīng)用會(huì)在下方彈出綠色的提示，如果錯(cuò)誤，例如輸入的數(shù)字比后臺(tái)生成的數(shù)字大或者小，那么應(yīng)用會(huì)彈出相應(yīng)提示，例如：
在底部顯示出的數(shù)字表明我們猜測(cè)了多少次。
整個(gè)應(yīng)用的代碼目錄結(jié)構(gòu)如下：
由于我們當(dāng)前做的是一個(gè)簡(jiǎn)單的應(yīng)用實(shí)例，所以我們將各個(gè)模塊的代碼放在一起，以后我們構(gòu)建大規(guī)模的前端應(yīng)用時(shí)，我們會(huì)非常小心的去安排整個(gè)項(xiàng)目的代碼目錄結(jié)構(gòu)。
在上圖所表示的文件組成中，angular.js 是我們賴以開發(fā)應(yīng)用的框架文件，bootstrap.min.css是用于設(shè)計(jì)UI界面的界面庫(kù)文件，而numberGuessing.html 將是我們要開發(fā)的應(yīng)用主體文件。接下來我們將一步一步向numberGuessing.html添加代碼，逐步增加應(yīng)用的功能。
首先，我們要做的是構(gòu)建一個(gè)簡(jiǎn)單的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” “
這行的目的是讓瀏覽器正確的顯示中文，如果沒有這一行，瀏覽器在顯示中文時(shí)會(huì)出現(xiàn)代碼，在模板中，我們先將后面要使用到的框架代碼和UI界面庫(kù)代碼引入。完成后，我們將其加載到瀏覽器，看看有沒有錯(cuò)誤，如果沒錯(cuò)的話，當(dāng)前我們看到的是一片空白：
接下來，我們將開發(fā)應(yīng)用的后臺(tái)邏輯代碼，我們先確定幾個(gè)要用到的變量：
originalVal , 用來存儲(chǔ)生成的隨機(jī)數(shù)
userGuess, 存儲(chǔ)用戶當(dāng)前輸入的猜測(cè)數(shù)字
numOfTries, 記錄用戶嘗試了多少次
deviation: 記錄用戶輸入的數(shù)字與后臺(tái)隨機(jī)數(shù)的差別，如果用戶輸入的數(shù)字大了，那么deviation > 0; 輸入小了， devitation < 0;如果輸入正確， 那么devitation == 0
Controller 模塊的實(shí)現(xiàn)
Controller用于連接Model和View兩個(gè)模塊,系統(tǒng)的業(yè)務(wù)邏輯也放在Controller中實(shí)現(xiàn)。當(dāng)用戶在界面端做某些操作，例如點(diǎn)擊按鈕，輸入內(nèi)容時(shí)，Controller接收到View端的相應(yīng)信息，然后Controller觸發(fā)相應(yīng)的事件處理邏輯，例如用戶在界面輸入數(shù)字，點(diǎn)擊確定按鈕后，Controller從View拿到輸入的數(shù)值，然后從Model拿出應(yīng)用生成的隨機(jī)數(shù)，兩廂比較，把比較的結(jié)果deviation返回給View, View根據(jù)返回的deviation值，展現(xiàn)相應(yīng)的界面變化。我們看看Controller的邏輯主體是如何實(shí)現(xiàn)的：
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 函數(shù)設(shè)立起了Model對(duì)象的數(shù)值屬性，這些數(shù)值的意義在前頭我們已經(jīng)提到過，同時(shí)這個(gè)Controller函數(shù)還導(dǎo)出了兩個(gè)接口調(diào)用，一個(gè)是verifyGuess，當(dāng)界面上的確定按鈕點(diǎn)擊后，View模塊會(huì)調(diào)用該接口，用于判斷用戶輸入的數(shù)據(jù)是否正確，同時(shí)該調(diào)用會(huì)更新deviation 和 numOfTries兩個(gè)屬性的值。
initializeGame 用于對(duì)整個(gè)系統(tǒng)應(yīng)用進(jìn)行初始化，先是生成隨機(jī)數(shù)，然后初始化一些變量為空。
在我們的Controller主體函數(shù)中，傳入了一個(gè)參數(shù)$scope, 這個(gè)參數(shù)是AngularJS傳給我們的，它基本上等價(jià)于MVC模式中的M,也就是Model, 它類似于一個(gè)數(shù)據(jù)庫(kù)，專門用來存儲(chǔ)應(yīng)用的數(shù)據(jù)和邏輯代碼，大家可以看到，在initializeGame調(diào)用中，Controller將numOfTries, originalVal等這些數(shù)據(jù)放入到$scope對(duì)象中，在verifyGuess調(diào)用中，又從$scope拿到這些數(shù)據(jù)進(jìn)行計(jì)算修改。
上面的Controller代碼加入到我們的模板文件numberGuessing.html中后，結(jié)果如下：
<!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 應(yīng)用的界面設(shè)計(jì)
視圖，也就是MVC中的View, 其實(shí)就是將Model中的數(shù)據(jù)通過圖形界面展現(xiàn)出來。我們當(dāng)前的應(yīng)用簡(jiǎn)單，基于簡(jiǎn)單原則，界面設(shè)計(jì)的用戶體驗(yàn)未必很好，但足以讓我們快速理解如何利用AngularJS結(jié)合Bootstrap快速構(gòu)建一個(gè)程序的前端界面。
我們看看界面的搭建，同時(shí)把Controller跟界面邏輯整合起來：
<body ng-app="app">
<div class="container" ng-controller="GuessTheNumberController">
<h2>猜數(shù)字 !</h2>
<p class="well lead">請(qǐng)猜出電腦生成的隨機(jī)數(shù)，它的范圍在1到1000之間.</p>
<label>請(qǐng)您出手: </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">爺，您出價(jià)過高了！</p>
<p ng-show="deviation>0" class="alert alert-warning">爺，少了，再加點(diǎn)，再加點(diǎn).</p>
<p ng-show="deviation===0" class="alert alert-success">爺，還真讓您說準(zhǔn)了!.</p>
</p>
<p class="text-info">您猜過的次數(shù)是 : <span class="badge">{{numOfTries}}</span><p>
</div>
MVC中的C,也就是Controller,它是界面(view)和數(shù)據(jù)(Model)的橋梁，要想把這三者關(guān)聯(lián)起來，我們需要把他們?nèi)齻€(gè)都嵌入到AngularJS框架中，然后依賴于AngularJS的框架機(jī)制，實(shí)現(xiàn)三者間的相互聯(lián)動(dòng)。
為了將視圖嵌入到AngularJS, 上面中的代碼語(yǔ)句：
<body ng-app="app">
ng-app 這條屬性告訴Angular，body 標(biāo)簽內(nèi)的HTML代碼將作為視圖部分嵌入到AngulaJS框架中，”app”作為ng-app屬性值，通知AngularJS框架去加載一個(gè)名為”app”的模塊(module)。這個(gè)模塊相當(dāng)于一個(gè)存儲(chǔ)倉(cāng)庫(kù)，我們把前端應(yīng)用的各種功能分解成各個(gè)單元，這些單元就存放在名為app的模塊里，controller, model 也都是功能單元，稍后我們會(huì)看到他們會(huì)被加入到名為app的模塊里，AngularJS框架會(huì)從這個(gè)模塊中拿出controllre 和 model這兩個(gè)單元來使用。
接下來，我們先將這個(gè)名為app的模塊放入AngularJS框架，代碼如下：
<script type="text/javascript">
angular.module('app',[])
function GuessTheNumberController($scope) {
....
}
<script>
這樣我們?cè)贏ngularJS框架中就有了名為app的模塊，并且通過ng-app=”app”將該模塊和界面關(guān)聯(lián)了起來，接下來，我們需要把Controller單元放入到app模塊中，代碼如下：
<script type="text/javascript">
angular.module('app',[])
.controller('GuessTheNumberController', GuessTheNumberController);
function GuessTheNumberController($scope) {
....
}
</script>
angular.module 函數(shù)生成并返回一個(gè)module對(duì)象，這個(gè)對(duì)象含有一個(gè)接口叫controller,通過這個(gè)接口，可以把我們自己開發(fā)的controller功能單元放入到module里面，從上面代碼可以看出，我們?cè)趍odule中放入一個(gè)controller單元，這個(gè)單元的名字就叫GuessTheNumberController，也就是controller函數(shù)的第一個(gè)輸入?yún)?shù)，第二個(gè)輸入?yún)?shù)是controller單元的功能邏輯主體，也就是我們前頭開發(fā)的GuessTheNumberController函數(shù)。
做完上面的步驟后，我們的應(yīng)用就開發(fā)完畢，此時(shí)可從瀏覽器加載我們的html，于是就可以看到具體效果了。
在收尾前，我們深入代碼看看，AngularJS是如何將各個(gè)模塊整合起來，形成一個(gè)完整的前端應(yīng)用的。在代碼中，有一些特殊符號(hào)和屬性，特殊符號(hào)，例如：{{ }}, 特殊屬性形如： ng-app, ng-controller等。在Angular語(yǔ)境下，{{ 和 }} 合在一起稱為插值符號(hào)，ng-* 形式的屬性，稱之為Angular指令。Angular 會(huì)把夾在{{ 和 }} 中的變量轉(zhuǎn)換為變量對(duì)應(yīng)的數(shù)值，例如下面的代碼片段：
<p class="text-info">您猜過的次數(shù)是 : <span class="badge">{{numOfTries}}</span><p>
numOfTries表示用戶嘗試猜測(cè)了多少次，如果numOfTries的值是0的話，AngularJS會(huì)把上面的代碼轉(zhuǎn)義為：
<p class="text-info">您猜過的次數(shù)是 : <span class="badge">0</span><p>
于是瀏覽器便會(huì)將界面渲染成如下情形：
AngularJS指令是一個(gè)復(fù)雜的技術(shù)知識(shí)點(diǎn)，在后續(xù)的討論中，我們會(huì)進(jìn)行詳細(xì)的探討，這里我們簡(jiǎn)單介紹下，AngularJS指令的作用，主要擴(kuò)展HTML的語(yǔ)法功能，指令是AngularJS框架中，功能最為強(qiáng)大的地方。我們簡(jiǎn)單介紹下代碼中用到的AngularJS指令.
ng-controller: 該指令將Controller和HTML表示的View銜接起來，使用該指令，View才能夠訪問Controller設(shè)定的變量和接口，大家可以嘗試在代碼中把
ng-model=ng-controller=”GuessTheNumberController”
這一句去掉，然后看看有什么結(jié)果。
ng-model: 將Model中的變量與View中的控件進(jìn)行雙向綁定，例如：
<input type="number" ng-model="userGuess"/>
這條語(yǔ)句將model中的變量userGuess與界面上的輸入文本框綁定，當(dāng)文本框中的數(shù)值改變時(shí)，userGuess對(duì)應(yīng)的值也跟著改變，反之，如果guess的值在后臺(tái)改變了，那么文本框中的內(nèi)容也做相應(yīng)的變化。
ng-click：將界面產(chǎn)生的點(diǎn)擊事件跟Controller的處理邏輯連接起來，例如：
<button ng-click="verifyGuess()" class="btn btn-primary btn-sm">確定</button>
上面的代碼，將”確定”按鈕的點(diǎn)擊事件跟Controller的verifyGuess()函數(shù)連接起來，一旦按鈕被點(diǎn)擊，這個(gè)函數(shù)就會(huì)被執(zhí)行。
ng-show: 用來控制View的控件是否要顯示出來，如果ng-show 對(duì)應(yīng)的表達(dá)式的值為true, 那么控件就顯示，如果為false，那么控件就不顯示，例如：
<p ng-show="deviation<0" class="alert alert-warning">爺，您出價(jià)過高了！</p>
上面的代碼，功能是，當(dāng)變量deviation 的值小于0時(shí)，段落元素P的內(nèi)容就會(huì)顯示到界面上。
AngularJS是一個(gè)強(qiáng)大但也是比較復(fù)雜的前端開發(fā)框架，我們這一實(shí)例作用僅僅是幫大家初步認(rèn)識(shí)AngularJS的強(qiáng)大功能，先獲得一定的感性認(rèn)識(shí)，以便為我們今后理性的分析掌握整個(gè)AngularJS前端開發(fā)技術(shù)打下堅(jiān)實(shí)的基礎(chǔ)。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 利用VS Code開發(fā)你的第一個(gè)AngularJS 2應(yīng)用程序
- Angularjs單選改為多選的開發(fā)過程及問題解析
- AngularJS框架中的雙向數(shù)據(jù)綁定機(jī)制詳解【減少需要重復(fù)的開發(fā)代碼量】
- 基于NodeJS+MongoDB+AngularJS+Bootstrap開發(fā)書店案例分析
- AngularJS開發(fā)教程之控制器之間的通信方法分析
- Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝
- 總結(jié)AngularJS開發(fā)者最常犯的十個(gè)錯(cuò)誤
- AngularJS應(yīng)用開發(fā)思維之依賴注入3
- angularJS開發(fā)注意事項(xiàng)
相關(guān)文章
這篇文章主要介紹了Ionic2調(diào)用本地SQlite實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
bootstrap選項(xiàng)卡擴(kuò)展功能詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap選項(xiàng)卡擴(kuò)展功能，增加關(guān)閉，超出一行顯示下拉，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript詳解使用Promise處理回調(diào)地獄的兩種方法
這篇文章主要介紹了JavaScript詳解使用Promise處理回調(diào)地獄的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-11-11
初步使用bootstrap快速創(chuàng)建頁(yè)面
初步嘗試使用Express搭建了一個(gè)Web框架，那么接下來就是要在該框架下寫上自己的頁(yè)面，快速創(chuàng)建頁(yè)面這里選擇了bootstrap前端框架，通過它即使你不太懂前端設(shè)計(jì)，寫出來的頁(yè)面也不會(huì)太難看，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript時(shí)間操作之年月日星期級(jí)聯(lián)操作
這篇文章主要介紹了JavaScript時(shí)間操作之級(jí)聯(lián)日期選擇操作，涉及到年、月、日、星期，感興趣的小伙伴們可以參考一下2016-01-01
JavaScript中兩種鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼
方法鏈一般適合對(duì)一個(gè)對(duì)象進(jìn)行連續(xù)操作(集中在一句代碼)。一定程度上可以減少代碼量，缺點(diǎn)是它占用了函數(shù)的返回值。2011-01-01
微信小程序?qū)崿F(xiàn)獲取手機(jī)號(hào)60s倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)獲取手機(jī)號(hào)60s倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
作用域永遠(yuǎn)都是任何一門編程語(yǔ)言中的重中之重，因?yàn)樗刂浦兞颗c參數(shù)的可見性與生命周期。下面給大家介紹Javascript中的作用域及塊級(jí)作用域，需要的朋友參考下吧2017-12-12
JavaScript字符串截取方法總結(jié)(slice、substring、substr等)
在開發(fā)中常常會(huì)需要截取字符串,而 JavaScript 提供了很多種方法實(shí)現(xiàn)截取操作,本文對(duì)各種方法做個(gè)整理,文中通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
生成map對(duì)象的方法或許會(huì)有很多，在本文將為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過2014-01-01