开发者社区> 郭璞> 正文

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 中文学习手册

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
9163 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
12612 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19813 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
32842 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18063 0
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
34632 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24837 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14687 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
17050 0
+关注
郭璞
一切就交给时间,它会给我答案。
369
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载