Angularjs结合Bootstrap制作的一个TODO List

2024-11-27 10:24:11

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

准备

Angularjs下载

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

CDN加速

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

代码如下:

npm 方式

使用Nodejs的包管理工具也挺方便的，基本上来说两步就搞定了。
首先进入到我们将要写代码的文件夹。
•安装Angularjs：npm install angular
•页面上引入使用：

<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>

页面效果

代码详解

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

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

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

AngularJS bootstrap启动详解及实例代码

对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了. 绑定初始化通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script s
利用Angularjs和bootstrap实现购物车功能

先来看看效果图: 购物车一.代码如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式,有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码,不过 jQuery 对 ajax的
BootStrap+Angularjs+NgDialog实现模式对话框

本篇文章主要介绍了"angularjs+bootstrap+ngDialog实现模式对话框",对于Javascript教程感兴趣的同学可以参考一下: 在完成一个后台管理系统时,需要用表显示注册用户的信息.但是用户地址太长了,不好显示.所以想做一个模式对话框,点击详细地址按钮时,弹出对话框,显示地址. 效果如下图: 通过查阅资料,选择使用ngDialog来实现,ngDialog是一个用于Angular.js应用的模式对话框和弹出窗口.ngDialog非常小(?2K),拥有简约的API,通
Bootstrap和Angularjs配合自制弹框的实例代码

指令 directive('bsPopup', function ($parse) { return { require: 'ngModel', restrict: 'A', link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem
AngularJs bootstrap详解及示例代码

AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu
AngularJS Bootstrap详细介绍及实例代码

AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstrap教程. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)

1.indexedDB(Model) -- 前端浏览器对象型数据库,一般我们后台用的数据库都是关系型数据库.那么indexeddb有什么特点呢: 首先,从字义上它是索引型数据库,从实际使用中可以体现为,它需要为表创建索引才可以根据某个字段来获取数据,而在关系型数据库中,这明显是不需要的. 其次,我不需要行列数据的转化,我只需要通过类似于数组的处理方式: 复制代码代码如下: objectStore.push(data); 有点像是把一个json对象塞入数据库,是不是很暴力? 2.bootstra
利用Angularjs和Bootstrap前端开发案例实战

我们将利用Angularjs 和 Bootstrap,开发一个前端应用实例,通过这一次简单的项目实战,引领大家进入AngularJS前端开发的殿堂,并向大家介绍一下几个知识点: 1.MVC 基础,通过项目实例,让大家初步体会MVC设计模式的应用. 2.构建我们第一个AngularJS应用,通过一个实际用例的开发,大家可以对前端开发获得一定的感性认识. 3.初步了解AngularJS三个最重要的组成部件,他们分别是Model, View, 和Controller. 4.初步了解Angula
angularjs封装bootstrap时间插件datetimepicker

背景:angular与jquery类库的协作第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

Angularjs结合Bootstrap制作的一个TODO List

相关推荐

随机推荐