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 相关文章推荐
javascript中的一些注意事项 更新中
Dec 06 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
Date对象格式化函数代码
2010/07/17 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
简单了解常用的JavaScript 库
2020/07/16 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
锐步英国官网:Reebok英国
2019/11/29 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
信息管理应届生求职信
2014/03/07 职场文书
导师对论文的学术评语
2015/01/04 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
校园安全学习心得体会
2016/01/18 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript