Angularjs結(jié)合Bootstrap制作的一個(gè)TODO List

更新時(shí)間：2016年08月18日 09:25:16 作者：Marksinoberg

這篇文章主要介紹了Angularjs結(jié)合Bootstrap制作的一個(gè)TODO List 的相關(guān)資料，感興趣的小伙伴們可以參考一下

看了一個(gè)關(guān)于Angularjs的視頻，視頻內(nèi)容講解的是如何制作一款TODO list形式的SPA（Simple Page Application,單頁(yè)面應(yīng)用)。為了增強(qiáng)理解，下面寫了一篇文章，用以復(fù)習(xí)鞏固。

準(zhǔn)備

Angularjs下載

說(shuō)是下載，其實(shí)只要能在我們的頁(yè)面中引用到Angularjs即可?？梢杂腥缦路绞健?/p>

CDN加速

使用國(guó)內(nèi)的CDN加速服務(wù)也是可以的。

復(fù)制代碼代碼如下:

npm 方式

使用Nodejs的包管理工具也挺方便的，基本上來(lái)說(shuō)兩步就搞定了。
首先進(jìn)入到我們將要寫代碼的文件夾。
•安裝Angularjs：npm install angular
•頁(yè)面上引入使用：

<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ò)誤的話，還望博友指出來(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)化了模塊之間的耦合性，使得代碼編寫的更加規(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ù)是書寫在相關(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ù)類型

   // 為方便頁(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ì)稍微麻煩一點(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ù)滿足條件，事件已完成
    });
    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">&times;</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也就起到了容器的作用，聲明了變量的可見范圍。
  ,['$scope',function($scope){
   // $scope 作用就是往視圖中添加元素
   // 文本框中的數(shù)值
   $scope.text = ''; // 會(huì)使用雙向綁定的數(shù)據(jù)類型

   // 為方便頁(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ì)稍微麻煩一點(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ù)滿足條件，事件已完成
    });
    return temp.length;
   }

總結(jié)

代碼不多，思想很深邃。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: