看了一個(gè)關(guān)于Angularjs的視頻，視頻內(nèi)容講解的是如何制作一款TODO list形式的SPA（Simple Page Application,單頁面應(yīng)用)。為了增強(qiáng)理解，下面寫了一篇文章，用以復(fù)習(xí)鞏固。
準(zhǔn)備
Angularjs下載
說是下載，其實(shí)只要能在我們的頁面中引用到Angularjs即可。可以有如下方式。
CDN加速
使用國內(nèi)的CDN加速服務(wù)也是可以的。
npm 方式
使用Nodejs的包管理工具也挺方便的，基本上來說兩步就搞定了。
首先進(jìn)入到我們將要寫代碼的文件夾。
•安裝Angularjs：npm install angular
•頁面上引入使用：
<!-- 這個(gè)src地址視自己的情況而定-->
<script src="node_modules/angular/angular.js"></script>
常規(guī)方式
常規(guī)方式就是我們手動(dòng)的下載相關(guān)的文件，然后手動(dòng)的引入，由于比較繁瑣。這里不再過多的敘述。
Bootstrap下載
作為一款很流行的現(xiàn)代化的前端框架，Bootstrap可謂是風(fēng)頭盡出了。下載地址
知識(shí)儲(chǔ)備
MVC 架構(gòu)
Angularjs 核心采用MVC架構(gòu)，事件驅(qū)動(dòng)應(yīng)用。我也是剛接觸，所以理解的也不是很到位。有錯(cuò)誤的話，還望博友指出來。
ng-app
其作為整個(gè)單頁面的大管家，app 即application，應(yīng)用的意思。我們的單頁面的服務(wù)就充當(dāng)了這么一個(gè)app的作用。
一般來說，ng-app 要作為ng-controller的父容器來嵌套。否則可能不會(huì)出現(xiàn)預(yù)期的結(jié)果
ng-controller
控制器，頁面上應(yīng)用的左膀右臂，控制器的存在簡化了模塊之間的耦合性，使得代碼編寫的更加規(guī)范和簡單。
ng-model
模型處理，一般會(huì)和頁面元素進(jìn)行綁定輸出，實(shí)現(xiàn)無刷新的頁面效果。
事件基礎(chǔ)
ng-click
在我們的單頁面應(yīng)用中，聲明了此屬性的元素就具備了點(diǎn)擊事件的功能。至于調(diào)用的是那一部分的函數(shù)，其實(shí)是和該元素所在的容器內(nèi)相關(guān)的。
也就是說，點(diǎn)擊事件對(duì)應(yīng)的函數(shù)是書寫在相關(guān)控制器里面的用于完成特定的功能的代碼。
完整代碼
下面 貼出來本例詳細(xì)的代碼
main.js
(function(window){ // 注冊(cè)一個(gè)應(yīng)用程序主模塊 var todoapp = window.angular.module('todoapp',[]); // 注冊(cè)控制器 // window.angular.module('todoapp') todoapp.controller('maincontroller' ,['$scope',function($scope){ // $scope 作用就是往視圖中添加元素 // 文本框中的數(shù)值 $scope.text = ''; // 會(huì)使用雙向綁定的數(shù)據(jù)類型 // 為方便頁面展示，手動(dòng)添加一串列表 $scope.todolist = [{ text:'Angularjs', done:false },{ text:'Bootstrap', done:false }]; // 添加函數(shù)，響應(yīng)交互 $scope.add = function(){ var text = $scope.text.trim(); if(text) { $scope.todolist.push({ text:text, done:false }); $scope.text = ''; } } // 點(diǎn)擊刪除按鈕的響應(yīng)事件 $scope.delete = function(todo){ var index = $scope.todolist.indexOf(todo) $scope.todolist.splice(index,1);// 起刪除的作用 } // 獲取已完成的事件的個(gè)數(shù)，按照checkbox的選擇與否實(shí)現(xiàn) // 由于頁面是動(dòng)態(tài)變化的，所以要使用函數(shù)，或者干脆使用模型綁定，但是那樣的話會(huì)稍微麻煩一點(diǎn) $scope.doneCount = function(){ // 使用filter來實(shí)現(xiàn) var temp = $scope.todolist.filter(function(item){ return item.done;// 返回true表示當(dāng)前的數(shù)據(jù)滿足條件，事件已完成 }); return temp.length; } }]);})(window)todolist.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Angularjs 整合Bootstrap實(shí)現(xiàn)任務(wù)清單</title> <!-- 引入 Bootstrap --> <link rel="stylesheet"> <style> .container { max-width: 720px; } .done { color: #cca; } .checkbox { margin-right: 12px; margin-bottom: 0; } .done > .checkbox > label > span { text-decoration: line-through; } </style> <script src="node_modules/angular/angular.js"></script> <script src="myjs/app.js"></script></head><body > <div class="container" ng-app="todoapp"> <header> <h1 class="display-3">TODO LIST</h1> <hr></header> <!-- 內(nèi)容部分--> <section ng-controller="maincontroller"> <!--為了實(shí)現(xiàn)好看的界面，所以用了表單控制--> <form class="input-group input-group-lg"> <input type="text" class="form-control" ng-model="text" name=""> <span class="input-group-btn"> <button class="btn btn-secondary" ng-click="add()">Add</button> </span> </form> <ul class="list-group" style="padding:12px;"> <li class="list-group-item" ng-class="{'done':item.done}" ng-repeat="item in todolist" > <button type="button" class="close" aria-label="close" ng-click="delete(item)"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <div class="checkbox"> <label> <input type="checkbox" ng-model="item.done"> <span>{{item.text }}</span> </label> </div> </li> </ul> <p> 總共 <strong>{{todolist.length }}</strong> 個(gè)任務(wù)，已完成 <strong>{{doneCount()}}</strong> 個(gè) </p> </section> </div></body></html>頁面效果
代碼詳解
代碼中最外邊包裹的一層代碼可以很好的起到臨時(shí)空間的效果，防止命名空間的污染。
(function(window){ // to do something})(window)注意最后面的(window)不可缺少。
創(chuàng)建應(yīng)用
// 注冊(cè)一個(gè)應(yīng)用程序主模塊
var todoapp = window.angular.module('todoapp',[]);
創(chuàng)建控制器
todoapp.controller('maincontroller' // 這里的$scope也就起到了容器的作用，聲明了變量的可見范圍。 ,['$scope',function($scope){ // $scope 作用就是往視圖中添加元素 // 文本框中的數(shù)值 $scope.text = ''; // 會(huì)使用雙向綁定的數(shù)據(jù)類型 // 為方便頁面展示，手動(dòng)添加一串列表 $scope.todolist = [{ text:'Angularjs', done:false },{ text:'Bootstrap', done:false }]; }]);完善功能函數(shù)
// 添加函數(shù)，響應(yīng)交互 $scope.add = function(){ var text = $scope.text.trim(); if(text) { $scope.todolist.push({ text:text, done:false }); $scope.text = ''; } } // 點(diǎn)擊刪除按鈕的響應(yīng)事件 $scope.delete = function(todo){ var index = $scope.todolist.indexOf(todo) $scope.todolist.splice(index,1);// 起刪除的作用 } // 獲取已完成的事件的個(gè)數(shù)，按照checkbox的選擇與否實(shí)現(xiàn) // 由于頁面是動(dòng)態(tài)變化的，所以要使用函數(shù)，或者干脆使用模型綁定，但是那樣的話會(huì)稍微麻煩一點(diǎn) $scope.doneCount = function(){ // 使用filter來實(shí)現(xiàn) var temp = $scope.todolist.filter(function(item){ return item.done;// 返回true表示當(dāng)前的數(shù)據(jù)滿足條件，事件已完成 }); return temp.length; }總結(jié)
代碼不多，思想很深邃。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
