DDR爱好者之家

Angularjs结合Bootstrap制作的一个TODO List
站长资源 2025/10/27 佚名
73 1538
DDR爱好者之家 Design By 杰米

看了一个关于Angularjs的视频，视频内容讲解的是如何制作一款TODO list形式的SPA（Simple Page Application,单页面应用)。为了增强理解，下面写了一篇文章，用以复习巩固。

准备

Angularjs下载

说是下载，其实只要能在我们的页面中引用到Angularjs即可。可以有如下方式。

CDN加速

使用国内的CDN加速服务也是可以的。

复制代码 代码如下:<script src="/UploadFiles/2021-04-02/angular-1.0.1.min.js">

npm 方式

使用Nodejs的包管理工具也挺方便的，基本上来说两步就搞定了。
首先进入到我们将要写代码的文件夹。
 "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="/UploadFiles/2021-04-02/angular.js">


页面效果


Angularjs结合Bootstrap制作的一个TODO List


代码详解


代码中最外边包裹的一层代码可以很好的起到临时空间的效果，防止命名空间的污染。





(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插件使用教程


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米