安古拉js和Bootstrap制作的待办事项列表

我看了一个关于Angularjs的视频，里面解释了如何以TODO列表的形式制作一个SPA(简单页面应用)。为了增强理解，下面写一篇文章进行复习巩固。

准备

Angularjs下载

说下载，其实只要我们在我们的页面中可以参考Angularjs。可以有以下几种方式。

CDN加速度

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

复制了以下代码： script src=' http :http://code.angularjs.org/angular-1.0.1.min.js'/script

Npm模式

使用Nodejs的包管理工具也很方便，基本上分两步完成。首先进入我们将编写代码的文件夹。安装anglarjs:NPM安装angular页面介绍：

！-src地址取决于您自己的情况-脚本src=' http : node _ modules/angular/angular . js '/脚本

传统方式

常规的方式是我们手动下载相关文件，然后手动导入，比较繁琐。这里就不多描述了。

引导下载

Bootstrap作为一种流行的现代前端框架，已经脱颖而出。下载地址

知识储备

MVC架构

Angularjs内核采用MVC架构和事件驱动应用。刚接触，所以不是很懂。如有错误，希望我的博主指出。

ng-app

作为整单页面的管家，app意味着应用。我们的单页服务就是这样一个应用。

一般来说，ng-app应该嵌套为ng-controller的父容器。否则，预期的结果可能不会出现

ng-控制器

控制器是页面上应用程序的得力助手，它简化了模块之间的耦合，使代码编写更加标准和简单。

ng模型

模型处理，通常与页面元素绑定，可以达到不刷新页面的效果。

事件基础

ng点击

在我们的单页应用程序中，声明该属性的元素具有click事件的功能。至于调用函数的哪一部分，实际上与元素所在的容器有关。

也就是说，点击事件对应的功能是在相关控制器中编写的完成特定功能的代码。

完全码

下面公布了这个例子的详细代码

main.js

(函数(window){ //注册一个应用主模块var todo app=window . angular . module(' todo app '，[])；//注册控制器//window . angular . module(' to doapp ')to doapp . controller(' main controller '，['$ scope '，function($ scope){/$ scope用于向视图添加元素。//文本框中的值为$ scope.text=//将使用双向绑定的数据类型。//为了方便页面显示，手动添加一个$ scope的列表。todolist=[{text:' angular js '，done3360 false}，{text:' bootstrap '，done 3360 false }]；//添加一个函数来响应交互$作用域。Add=function () {var text=$ scope。文字。trim()；if(text){ $ scope . todolist . push({ text : text，done : false })；$ scope.text=} }//点击删除按钮的响应事件为$ scope . delete=function(todo){ var index=$ scope . todolis . index of(todo)$ scope . todolis . split(index，1)；//起到删除的作用}//根据复选框的选择与否获取已完成的事件数。//因为页面是动态变化的，所以使用函数或者简单的使用模型绑定。但那会有点麻烦$scope.doneCount=function(){ //使用filter实现vartemp=$ scope . todolist . filter(function(item){ return item . done；//返回true，表示当前数据符合条件，事件已经完成})；返回温度长度；} }]);})(窗口)todolist.html

！DOCTYPE html html head meta charset=' utf-8 ' title angularjs整合引导程序实现任务清单/title！-引入引导链接。bdimg。com/libs/bootstrap/3。3 .0/CSS/bootstrap。量滴CSS ' rel='样式表'样式。容器{最大宽度： 720像素；} .已完成{ color: # cca}。复选框{ margin-right : 12px；保证金-底部： 0;} .完成了。复选框标签span { text-decoration : line-through；}/style脚本src=' http : node _ modules/angular/angular。js '/script script src=' http 3360 myjs/app。js '/script/head dy div class=' container ' ng-app=' TODO app ' header h1 class=' display-3 ' TODO LIST/h1 HR/header！-内容部分-截面ng-控制器='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=' padd 336012 px；Li class=' list-group-item ' ng-class=' { ' done ' : item。done } ' ng-repeat=' todolit中的项目'按钮类型=' button ' class=' close ' aria-label=' close ' ng-click=' delete(item)' span aria-hidden=' true '/span class=' Sr-only ' close/span/button div class=' checkbox '标签输入类型=' checkbox ' ng-model=' item。done ' span { { item }。文本} }/span/标签总共strong { {待办事项列表。长度} }/strong个任务，已完成strong{{doneCount()}}/strong个/p /section /div/body/html页面效果

代码详解

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

（函数（窗口){ //做某事})(窗口)注意最后面的（窗口)不可缺少。

创建应用

//注册一个应用程序主模块var todo app=window。棱角分明。模块(' todo app '，[])；

创建控制器

托多阿普。控制器('主控制器'//这里的$范围也就起到了容器的作用，声明了变量的可见范围，['$scope '，function($scope){ //$scope作用就是往视图中添加元素//文本框中的数值$ scope.text=//会使用双向绑定的数据类型//为方便页面展示，手动添加一串列表$ scope。todolist=[{ text : ' Anglarjs '，done:false }，{ text:'Bootstrap '，done : false }]；}]);完善功能函数

//添加函数，响应交互$ scope。add=function(){ var text=$ scope。文字。trim()；if(text){ $ scope。托多里斯。push({ text : text，done : false })；$ scope.text=} } //点击删除按钮的响应事件$ scope。delete=function(todo){ var index=$ scope。todolis t . indexof(todo)$ scope。todolis t . splice(索引，1)；//起删除的作用} //获取已完成的事件的个数，按照检验盒的选择与否实现//由于页面是动态变化的，所以要使用函数，或者干脆使用模型绑定，但是那样的话会稍微麻烦一点$scope.doneCount=function(){ //使用过滤器来实现var temp=$ scope。托多里斯。过滤器(功能(项目){返回项目。完成；//返回真实的表示当前的数据满足条件，事件已完成});返回温度长度；}总结

代码不多，思想很深邃。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

引导程序学习教程

引导程序实战教程

引导程序插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。