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 相关文章推荐
菜单效果
Oct 14 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
vue实现标签云效果的示例
Nov 09 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
编写python代码实现简单抽奖器
2020/10/20 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
机械设计职业生涯规划书
2013/12/27 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
三年级学生评语大全
2014/12/26 职场文书
团员年度个人总结
2015/02/26 职场文书
同意转租证明
2015/06/24 职场文书