Angularjs結合Bootstrap製作的一個TODO List_javascript技巧

來源:互聯網
上載者:User

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

準備

Angularjs下載

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

CDN加速

使用國內的CDN加速服務也是可以的。

複製代碼 代碼如下:
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

npm 方式

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

<!-- 這個src地址視自己的情況而定-->
<script src="node_modules/angular/angular.js"></script>

常規方式

常規方式就是我們手動的下載相關的檔案,然後手動的引入,由於比較繁瑣。這裡不再過多的敘述。

Bootstrap下載

作為一款很流行的現代化的前端架構,Bootstrap可謂是風頭盡出了。下載地址

知識儲備

MVC 架構

Angularjs 核心採用MVC架構,事件驅動應用。我也是剛接觸,所以理解的也不是很到位。有錯誤的話,還望博友指出來。

ng-app

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

一般來說,ng-app 要作為ng-controller的父容器來嵌套。否則可能不會出現預期的結果 

ng-controller

控制器,頁面上應用的左膀右臂,控制器的存在簡化了模組之間的耦合性,使得代碼編寫的更加規範和簡單。

ng-model

模型處理,一般會和頁面元素進行綁定輸出,實現無重新整理的頁面效果。

事件基礎

ng-click

在我們的單頁面應用中,聲明了此屬性的元素就具備了點擊事件的功能。至於調用的是那一部分的函數,其實是和該元素所在的容器內相關的。

也就是說,點擊事件對應的函數是書寫在相關控制器裡面的用於完成特定的功能的代碼。

完整代碼

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

main.js

(function(window){ // 註冊一個應用程式主模組 var todoapp = window.angular.module('todoapp',[]); // 註冊控制器 // window.angular.module('todoapp') todoapp.controller('maincontroller'  ,['$scope',function($scope){   // $scope 作用就是往視圖中添加元素   // 文字框中的數值   $scope.text = ''; // 會使用雙向繫結的資料類型   // 為方便頁面展示,手動添加一串列表   $scope.todolist = [{    text:'Angularjs',    done:false   },{    text:'Bootstrap',    done:false   }];   // 添加函數,響應互動   $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);// 起刪除的作用   }   // 擷取已完成的事件的個數,按照checkbox的選擇與否實現   // 由於頁面是動態變化的,所以要使用函數,或者乾脆使用模型繫結,但是那樣的話會稍微麻煩一點   $scope.doneCount = function(){    // 使用filter來實現    var temp = $scope.todolist.filter(function(item){     return item.done;// 返回true表示當前的資料滿足條件,事件已完成    });    return temp.length;   } }]);})(window)

todolist.html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Angularjs 整合Bootstrap實現任務清單</title> <!-- 引入 Bootstrap --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" 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>  <!-- 內容部分-->  <section ng-controller="maincontroller">   <!--為了實現好看的介面,所以用了表單控制-->   <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>    個任務,已完成 <strong>{{doneCount()}}</strong>    個   </p>  </section> </div></body></html>

頁面效果

代碼詳解

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

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

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

建立應用

// 註冊一個應用程式主模組
var todoapp = window.angular.module('todoapp',[]);

建立控制器

todoapp.controller('maincontroller' // 這裡的$scope也就起到了容器的作用,聲明了變數的可見範圍。  ,['$scope',function($scope){   // $scope 作用就是往視圖中添加元素   // 文字框中的數值   $scope.text = ''; // 會使用雙向繫結的資料類型   // 為方便頁面展示,手動添加一串列表   $scope.todolist = [{    text:'Angularjs',    done:false   },{    text:'Bootstrap',    done:false   }]; }]);

完善功能函數

// 添加函數,響應互動   $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);// 起刪除的作用   }   // 擷取已完成的事件的個數,按照checkbox的選擇與否實現   // 由於頁面是動態變化的,所以要使用函數,或者乾脆使用模型繫結,但是那樣的話會稍微麻煩一點   $scope.doneCount = function(){    // 使用filter來實現    var temp = $scope.todolist.filter(function(item){     return item.done;// 返回true表示當前的資料滿足條件,事件已完成    });    return temp.length;   }

總結

代碼不多,思想很深邃。

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

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap外掛程式使用教程

以上就是本文的全部內容,希望對大家的學習有所協助,也希望大家多多支援雲棲社區。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.