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