腳本之家服務器常用軟件

快捷導航

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

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

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

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

準備

Angularjs下載

說是下載，其實只要能在我們的頁面中引用到Angularjs即可。可以有如下方式。

CDN加速

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

復制代碼代碼如下:

npm 方式

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

<script src="node_modules/angular/angular.js"></script>

常規(guī)方式

常規(guī)方式就是我們手動的下載相關的文件，然后手動的引入，由于比較繁瑣。這里不再過多的敘述。

Bootstrap下載

作為一款很流行的現(xiàn)代化的前端框架，Bootstrap可謂是風頭盡出了。下載地址

知識儲備

MVC 架構(gòu)

Angularjs 核心采用MVC架構(gòu)，事件驅(qū)動應用。我也是剛接觸，所以理解的也不是很到位。有錯誤的話，還望博友指出來。

ng-app

其作為整個單頁面的大管家，app 即application，應用的意思。我們的單頁面的服務就充當了這么一個app的作用。

一般來說，ng-app 要作為ng-controller的父容器來嵌套。否則可能不會出現(xiàn)預期的結(jié)果

ng-controller

控制器，頁面上應用的左膀右臂，控制器的存在簡化了模塊之間的耦合性，使得代碼編寫的更加規(guī)范和簡單。

ng-model

模型處理，一般會和頁面元素進行綁定輸出，實現(xiàn)無刷新的頁面效果。

事件基礎

ng-click

在我們的單頁面應用中，聲明了此屬性的元素就具備了點擊事件的功能。至于調(diào)用的是那一部分的函數(shù)，其實是和該元素所在的容器內(nèi)相關的。

也就是說，點擊事件對應的函數(shù)是書寫在相關控制器里面的用于完成特定的功能的代碼。

完整代碼

下面貼出來本例詳細的代碼

main.js

(function(window){
 // 注冊一個應用程序主模塊
 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ù)，響應交互
   $scope.add = function(){
    var text = $scope.text.trim();
    if(text) {
     $scope.todolist.push({
      text:text,
      done:false
     });
     $scope.text = '';
    }
   }

   // 點擊刪除按鈕的響應事件
   $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表示當前的數(shù)據(jù)滿足條件，事件已完成
    });
    return temp.length;
   }
 }]);

})(window)

todolist.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Angularjs 整合Bootstrap實現(xiàn)任務清單</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">&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>
    個任務，已完成 <strong>{{doneCount()}}</strong>
    個
   </p>
  </section>
 </div>

</body>
</html>

頁面效果

代碼詳解

代碼中最外邊包裹的一層代碼可以很好的起到臨時空間的效果，防止命名空間的污染。

(function(window){
 // to do something
})(window)

注意最后面的(window)不可缺少。

創(chuà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ù)，響應交互
   $scope.add = function(){
    var text = $scope.text.trim();
    if(text) {
     $scope.todolist.push({
      text:text,
      done:false
     });
     $scope.text = '';
    }
   }

   // 點擊刪除按鈕的響應事件
   $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表示當前的數(shù)據(jù)滿足條件，事件已完成
    });
    return temp.length;
   }

總結(jié)

代碼不多，思想很深邃。

如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：

Bootstrap學習教程

Bootstrap實戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: