一，路由的规划。

需要模拟的页面有三个：all,active,conplete.

首先，写好铺垫需要的各种东西，重要的组件的引用等——

这里我们会将index.html设为主页，将body.html加载到主页上——

 <html lang="en" ng-app="myTodo"><head>

         <meta charset="utf-8">

         <title>angularjs • TodoMVC</title>

         <link rel="stylesheet" href="node_modules/todomvc-common/base.css">

         <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">

         <style>

             .pagination {

                 overflow: hidden;

                 padding: 20px;

             }

             .pagination ul li {

                 width: 60px;

                 height: 30px;

                 line-height: 30px;

                 border:1px solid black;

                 float: left;

                 list-style-type: none;

                 margin-right: 10px;

                 text-align: center;

             }

         </style>

     </head>

     <body>

         <ng-view></ng-view> <!-- 路由区域，视图区域-->

         <script src="node_modules/angular/angular.js"></script>

         <script src="node_modules/angular-route/angular-route.js"></script>

         <script src="js/app.js"></script>

 </body>

 </html>

主页的框架已经搭好，接下来是内容——body.html

 <section id="todoapp">

     <header id="header">

         <h1>todos</h1>

         <form style="margin:0" ng-submit="addTodo()">

             <input ng-model="newTodo" id="new-todo" placeholder="What needs to be done?" autofocus="">

         </form>

     </header>

     <section id="main" style="display: block;">

         <input ng-click="markAll(checked_statsus)" ng-model="checked_statsus" id="toggle-all" type="checkbox">

         <label for="toggle-all">Mark all as complete</label>

         <ul id="todo-list">

             <li ng-repeat="item in itemList|filter:filterStatus|createtimeSort track by $index" ng-class="{completed: item.completed, editing: item.edit_status}">

                 <div class="view">

                     <input class="toggle" type="checkbox" ng-model="item.completed">

                     <label ng-dblclick="editTodo(item)">{{item.title}}</label>

                     <button class="destroy" ng-click="remove(item)"></button>

                 </div>

                 <form ng-submit="saveEdit(item)">

                     <input todo-focus="item.edit_status" class="edit" ng-blur="saveEdit(item)" ng-model="item.title">

                 </form>

             </li>

         </ul>

         <div class="pagination">

             <ul>

                 <li ng-click="prevPage()">prevPage</li>

                 <li ng-click="setPage(index)" ng-repeat="index in pagelist()">{{index + 1}}</li>

                 <li ng-click="nextPage()">nextPage</li>

             </ul>

         </div>

     </section>

     <footer id="footer" style="display: block;">

     <span id="todo-count"><strong>{{remainCount}}</strong> items left</span>

     <ul id="filters">

         <li>

             <a ng-class="{selected: routName == 'all'}" href="#/all">All</a>

         </li>

         <li>

             <a ng-class="{selected: routName == 'active'}" href="#/active">Active</a>

         </li>

         <li>

             <a ng-class="{selected: routName == 'completed'}" href="#/completed">Completed</a>

         </li>

     </ul>

     <button id="clear-completed" ng-click="clearCompleted()">Clear completed</button>

 </footer>

 </section>

因为要被加载到index上面，所以这个html中只有body部分的代码就够了。基本框架如上所示，其中的方法需要讲解一下——

第4行——ng-submit="addTodo()"

　　当这个表单被提交的时候会触发这个方法，方法是用来将内容记录下来的。

第5行——

<input ng-model="newTodo" id="new-todo" placeholder="What needs to be done?" autofocus="">

　　一个input组件，设定了默认文字和自动获取光标

第9行——

<input ng-click="markAll(checked_statsus)" ng-model="checked_statsus" id="toggle-all" type="checkbox">
一个选项框，点击之后触发markAll(checked_statsus)方法，作用是全选所有的列表项。

11-22——

循环输出所需要的列表项。12行的前面是过滤，后面是动态加载css类。

24-28——

三个按钮，分别控制前一页后一页

32——<span id="todo-count"><strong>{{remainCount}}</strong> items left</span>

动态显示某个内容，这个remainCount是后台的一个变量

33-43 ——

三个超链接，用于进行跳转。前面的ng-class用于动态切换css，当内容变为ng-class="{selected: true'}"的时候会使得自身处于被选中的css下。后面的是【页内】跳转。

44——

里面的方法clearCompleted()用于清空表单内容。

至此，所有需要的方法，类，和注意事项已经书写清楚。css使用bookstap便足够，接下来就是app.js部分。

angular项目——小小记事本2的更多相关文章

  1. angular项目——小小记事本1

    这次的项目是制作一个记事本,有点类似于手机qq聊天信息. 内容:在一个input当中输入一行数据,之后提交,这个数据便会记录在下面.随着提交的增加,数据会以列表形式排列下来. 列表中,前面有一个组件, ...

  2. angular.js——小小记事本3

    app.js部分,首先是路由.这个之前讲过了,链接在这里—— http://www.cnblogs.com/thestudy/p/5661556.html var app = angular.modu ...

  3. 把angular项目整合到.net mvc中

    之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...

  4. 个人从源码理解angular项目在JIT模式下的启动过程

    通常一个angular项目会有一个个模块(Module)来管理各自的业务,并且必须有一个根模块(AppModule)作为应用的入口模块,整个应用都围绕AppModule展开.可以这么说,AppModu ...

  5. Angular20 nginx安装，angular项目部署

    1 nginx安装(Windows版本) 1.1 下载安装包 到官网下载Windows版本的nginx安装包 技巧01:下载好的压缩包解压即可,无需安装 1.2 启动nginx 进入到解压目录,点击 ...

  6. Angular4--提速--提升Angular项目的首页打开速度（包含微信登录优化）

    Angular项目的首页打开速度很慢,有时候会有几秒的加载时间.如果在手机端访问的话,怕是要等待十多秒,这对用户体验很差.下面参考http://www.cnblogs.com/feiyu159/p/8 ...

  7. Angular4---部署---将Angular项目部署到IIS上

    ---恢复内容开始--- Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网址:https://www.microsoft.com/en-us/download/de ...

  8. 网站开发进阶(二十一)Angular项目信息错位显示问题解决

    Angular项目信息错位显示问题解决 绪 最近在项目开发过程中遇到这样一个棘手的问题:查询出所有订单信息后,点击选择某一个订单,查询出的结果是上一次查询所得的结果.而且会出现点击两次才可以显示订单详 ...

  9. [转]Angular4---部署---将Angular项目部署到IIS上

    本文转自:https://www.cnblogs.com/kingkangstudy/p/7699710.html Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网 ...

随机推荐

  1. 【卷二】网络三—UDP服务器与客户端

    这是另一个类型的服务器/客户端,无连接的 UDP: (User Datagram Protocol) 用户数据报协议 参考: P58~P60 UDP 时间戳服务器 [时间戳 就是ctime()显示的内 ...

  2. 解决Windows内存问题的两个小工具RamMap和VMMap(这个更牛更好)

    来源:http://www.cr173.com/html/13006_1.html .net程序内存监测分配工具(CLR Profiler for .NET Framework 4)官方安装版 类型: ...

  3. 使用SyncToy 同步两台机器上的文件夹

    @echo off echo 准备启动同步... net use \\WIN-AJH8QENQQGK "123456" /user:Administrator Z:\SyncToy ...

  4. LWP::UserAgent介绍2

    #这个LWP::UserAgent一般要配合其他模块使用 #比如: #HTTP::Request #HTTP::Cookie #HTTP::Respose #HTTP::Status #LWP::Us ...

  5. 关于用PS改变图像颜色

    由于写的一个页面主色调变了,里面的一些图标颜色也要相应改变,自己难得重新去psd里面截图,就想着用ps,看能否直接能变换一下图标颜色.其实方法也很简单的. 1:用ps打开需要改变图标颜色的文件,然后选 ...

  6. 5个可用提高Godaddy主机速度的第三方CDN加速服务商

    毕竟Godaddy主机数据中心位于美国.新加坡.欧洲三个数据中心,一般我们都会选择美国数据中心,相比较其他2个机房的速度是快和稳定的,很多人要说为什么新加坡数据中心速度不好呢?因为目前的新加坡机房不是 ...

  7. Linux下安装awstats日志统计分析

    1. 下载安装 cd /data/software wget http://prdownloads.sourceforge.net/awstats/awstats-7.0-1.noarch.rpm 2 ...

  8. ZOJ 1655 FZU 1125 Transport Goods

    迪杰斯特拉最短路径. 1.every city must wait till all the goods arrive, and then transport the arriving goods t ...

  9. JS复习：第七章

    第七章  函数表达式 一.定义函数的方式有两种:函数声明和函数表达式. 1.函数声明: function functionName(arg0 , arg1 , arg2){ //函数体... } 函数 ...

  10. 关于JavaScript的小笔记

    1.当 JavaScript 中的变量被声明的时候,程序内部会给它一个初始值 undefined.当你对一个值为 undefined 的变量进行运算操作的时候,算出来的结果将会是 NaN,NaN 的意 ...