开发者社区> 郭璞> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

相关文章
angular36-todoMVC准备工作
angular36-todoMVC准备工作
0 0
Angular DefaultDomRenderer2.setProperty - HTML的值是如何从Angular Component flow过来的,以及跨平台支持
Angular DefaultDomRenderer2.setProperty - HTML的值是如何从Angular Component flow过来的,以及跨平台支持
0 0
Angular开发 使用 ngx-bootstrap作为样式库
ngx-bootstrap里面可以复制你想要的样式组件,官方有介绍怎么使用,不过本人稍微修改了下 使用ngx-bootstrap的步骤 1、npm install ngx-bootstrap –save 2、npm install bootstarap –save-dev 3、在angular-cli.
1179 0
AngularJS学习笔记--002--Angular JS路由插件ui.router源码解析
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分。 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute。 不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!! 于是,一个基于ngRoute开发的第三方路由模块,叫做ui.router,受到了大家的“追捧
1321 0
+关注
郭璞
一切就交给时间,它会给我答案。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Angular从零到一
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载