Angularjs结合Bootstrap制作的一个TODO List


Posted in Javascript onAugust 18, 2016

看了一个关于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>

页面效果

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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的slideToggle方法实例
May 07 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 Javascript
AngularJS 执行流程详细介绍
Aug 18 #Javascript
AngularJS国际化详解及示例代码
Aug 18 #Javascript
ECMAScript6轮播图实践知识总结
Aug 17 #Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 #Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 #Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 #Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 #Javascript
You might like
浅析php单例模式
2014/11/25 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
python对数组进行反转的方法
2015/05/20 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
谈谈Python中的while循环语句
2019/03/10 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
python3中rank函数的用法
2019/11/27 Python
python django中8000端口被占用的解决
2019/12/17 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
股东合作协议书范本
2014/04/14 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
业务员岗位职责
2015/02/03 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技