Angularjs結(jié)合Bootstrap制作的一個(gè)TODO List
看了一個(gè)關(guān)于Angularjs的視頻，視頻內(nèi)容講解的是如何制作一款TODO list形式的SPA（Simple Page Application,單頁(yè)面應(yīng)用)。為了增強(qiáng)理解，下面寫(xiě)了一篇文章，用以復(fù)習(xí)鞏固。
準(zhǔn)備
Angularjs下載
說(shuō)是下載，其實(shí)只要能在我們的頁(yè)面中引用到Angularjs即可?？梢杂腥缦路绞?。
CDN加速
使用國(guó)內(nèi)的CDN加速服務(wù)也是可以的。
npm 方式
使用Nodejs的包管理工具也挺方便的，基本上來(lái)說(shuō)兩步就搞定了。
首先進(jìn)入到我們將要寫(xiě)代碼的文件夾。
•安裝Angularjs：npm install angular
•頁(yè)面上引入使用：
<!-- 這個(gè)src地址視自己的情況而定-->
<script src="node_modules/angular/angular.js"></script>
常規(guī)方式
常規(guī)方式就是我們手動(dòng)的下載相關(guān)的文件，然后手動(dòng)的引入，由于比較繁瑣。這里不再過(guò)多的敘述。
Bootstrap下載
作為一款很流行的現(xiàn)代化的前端框架，Bootstrap可謂是風(fēng)頭盡出了。下載地址
知識(shí)儲(chǔ)備
MVC 架構(gòu)
Angularjs 核心采用MVC架構(gòu)，事件驅(qū)動(dòng)應(yīng)用。我也是剛接觸，所以理解的也不是很到位。有錯(cuò)誤的話(huà)，還望博友指出來(lái)。
ng-app
其作為整個(gè)單頁(yè)面的大管家，app 即application，應(yīng)用的意思。我們的單頁(yè)面的服務(wù)就充當(dāng)了這么一個(gè)app的作用。
一般來(lái)說(shuō)，ng-app 要作為ng-controller的父容器來(lái)嵌套。否則可能不會(huì)出現(xiàn)預(yù)期的結(jié)果
ng-controller
控制器，頁(yè)面上應(yīng)用的左膀右臂，控制器的存在簡(jiǎn)化了模塊之間的耦合性，使得代碼編寫(xiě)的更加規(guī)范和簡(jiǎn)單。
ng-model
模型處理，一般會(huì)和頁(yè)面元素進(jìn)行綁定輸出，實(shí)現(xiàn)無(wú)刷新的頁(yè)面效果。
事件基礎(chǔ)
ng-click
在我們的單頁(yè)面應(yīng)用中，聲明了此屬性的元素就具備了點(diǎn)擊事件的功能。至于調(diào)用的是那一部分的函數(shù)，其實(shí)是和該元素所在的容器內(nèi)相關(guān)的。
也就是說(shuō)，點(diǎn)擊事件對(duì)應(yīng)的函數(shù)是書(shū)寫(xiě)在相關(guān)控制器里面的用于完成特定的功能的代碼。
完整代碼
下面 貼出來(lái)本例詳細(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ù)類(lèi)型
// 為方便頁(yè)面展示，手動(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)
// 由于頁(yè)面是動(dòng)態(tài)變化的，所以要使用函數(shù)，或者干脆使用模型綁定，但是那樣的話(huà)會(huì)稍微麻煩一點(diǎn)
$scope.doneCount = function(){
// 使用filter來(lái)實(shí)現(xiàn)
var temp = $scope.todolist.filter(function(item){
return item.done;// 返回true表示當(dāng)前的數(shù)據(jù)滿(mǎn)足條件，事件已完成
});
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>
頁(yè)面效果
代碼詳解
代碼中最外邊包裹的一層代碼可以很好的起到臨時(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也就起到了容器的作用，聲明了變量的可見(jiàn)范圍。
,['$scope',function($scope){
// $scope 作用就是往視圖中添加元素
// 文本框中的數(shù)值
$scope.text = ''; // 會(huì)使用雙向綁定的數(shù)據(jù)類(lèi)型
// 為方便頁(yè)面展示，手動(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)
// 由于頁(yè)面是動(dòng)態(tài)變化的，所以要使用函數(shù)，或者干脆使用模型綁定，但是那樣的話(huà)會(huì)稍微麻煩一點(diǎn)
$scope.doneCount = function(){
// 使用filter來(lái)實(shí)現(xiàn)
var temp = $scope.todolist.filter(function(item){
return item.done;// 返回true表示當(dāng)前的數(shù)據(jù)滿(mǎn)足條件，事件已完成
});
return temp.length;
}
總結(jié)
代碼不多，思想很深邃。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專(zhuān)題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了shiro授權(quán)的實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
在 ES5 中，類(lèi)的繼承可以有多種方式，然而過(guò)多的選擇有時(shí)反而會(huì)成為障礙，ES6 統(tǒng)了類(lèi)繼承的寫(xiě)法，避免開(kāi)發(fā)者在不同寫(xiě)法的細(xì)節(jié)之中過(guò)多糾纏，但在介紹新方法之前，還是有必要先回顧下ES5中類(lèi)的繼承方式2022-08-08
JS開(kāi)發(fā)中基本數(shù)據(jù)類(lèi)型具體有哪幾種
JS的數(shù)據(jù)類(lèi)型包括基本數(shù)據(jù)類(lèi)型、復(fù)雜數(shù)據(jù)類(lèi)型和特殊數(shù)據(jù)類(lèi)型，今天我們主要先講解一下基本數(shù)據(jù)類(lèi)型。感興趣的朋友一起看看吧2017-10-10
js parseInt("08")未指定進(jìn)位制問(wèn)題
今天在做JS關(guān)于月份的判斷，對(duì)于parseInt("01")到parseInt("07");都能得到正確的結(jié)果，但如果是parseInt("08")或parseInt("09")則返回0，首先看parseInt語(yǔ)法：parseInt(string, radix);2010-06-06
小程序?qū)崿F(xiàn)展開(kāi)/收起的效果示例
這篇文章主要介紹了小程序?qū)崿F(xiàn)展開(kāi)/收起的效果示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
ajax提交并返回xml的實(shí)現(xiàn)代碼2008-11-11
微信小程序授權(quán)登錄解決方案的代碼實(shí)例（含未通過(guò)授權(quán)解決方案）
這篇文章主要介紹了微信小程序授權(quán)登錄解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這次是更改后的代碼實(shí)現(xiàn)以下功能：去掉了“確定”，“取消”按鈕。變單擊為雙擊事件，用戶(hù)按ESC鍵，取消更改感興趣的朋友可以了解下2013-01-01
Kibo 用于處理鍵盤(pán)事件的Javascript工具庫(kù)
Kibo是一個(gè)簡(jiǎn)單的用于處理鍵盤(pán)事件的Javascript工具庫(kù)。2011-10-10
js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02