Angularjs + Bootstrap 制作的一个TODO List

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

看了一个关于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">&times;</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;
            }

总结

代码不多,思想很深邃。更多内容可以参照
Angularjs 中文学习手册

目录
相关文章
|
8月前
|
Web App开发 弹性计算 安全
零基础入门Serverless:Todo List应用创建
通过Serverless架构创建一个TodoList案例
89 0
|
9月前
|
自然语言处理 JavaScript 前端开发
[JavaScript实例解析]简易TODO List
[JavaScript实例解析]简易TODO List
82 0
|
11月前
|
存储 前端开发 API
用 Python 撸一个 Web 服务器-第6章:完善 Todo List 应用
用 Python 撸一个 Web 服务器-第6章:完善 Todo List 应用
|
Web App开发 弹性计算 安全
利用Serverless创建Todo list 应用
利用Serverless创建Todo list 应用实践
202 0
利用Serverless创建Todo list 应用
|
弹性计算 监控 安全
零基础入门Serverless:Todo List应用创建(体验函数计算抽盲盒,1500等领)
今年天猫双十一,阿里云Serverless支撑业务场景更多,范围更广。越来越多企业和开发者正在尝试使用Serverless,而Serverless开发者工具无疑是加速Serverless快速落地的利器。 这一次,我们基于阿里云函数计算+Serverless开发者工具Serverless Devs打造场景,让你用“一行代码” 极速进入Serverless的世界。
零基础入门Serverless:Todo List应用创建(体验函数计算抽盲盒,1500等领)
|
Web App开发 弹性计算 JavaScript
利用RDS MySQL数据库云开发ToDo List
场景介绍基于云开发平台、Midway FaaS 和 云数据库RDS MySQL 版快速开发一个 Todo List。
利用RDS MySQL数据库云开发ToDo List
|
存储 JavaScript NoSQL
云开发平台开箱,零基础3分钟实战Serverless数据库开发一个 Todo List
阿里云云开发平台是阿里云提供的一站式、全云端的开发平台,目标是打开浏览器就可以开发、调试、上线,是未来研发的的风向标,指北针。这一次,我们就来手把手教你,如何在阿里云云开发平台中使用 Midway FaaS 构建函数应用,从账号的创建到一键部署,零基础创建一个有前后端交互、数据增删改查等行为的 Todo List 应用。
3537 0
云开发平台开箱,零基础3分钟实战Serverless数据库开发一个 Todo List
|
Java Android开发
Todo List
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/voidreturn/article/details/78702613 fragment里面如何处理back按键事件。
992 0
|
JavaScript 前端开发
【曹操】 angular js双向绑定数据通过bootstrap请求获取不到表单数据
在做项目的时候,在VidyoCallFlowEntry页面中,通过name字段双击跳转弹出VidyoCallFlow页面,同时传入name的值作为参数进行查询,并展示查询结果。但在路由中获取到name的值,通过angular js双向绑定的方式赋值给VidyoCallFlow页面的vidyoname的值,发现并没有查询到结果,但是根据该name的值在数据库中查询,是有结果的。
1482 0
|
JavaScript 前端开发 API