这次的项目是制作一个记事本，有点类似于手机qq聊天信息。

　　内容：在一个input当中输入一行数据，之后提交，这个数据便会记录在下面。随着提交的增加，数据会以列表形式排列下来。

　　列表中，前面有一个组件，点击之后，会将这个数据分到【处理完毕】一组队列当中，并且这条数据的css发生改变；没有变化的数据会放到【没有处理】的队列当中。

　　列表的下方有3个超链接，分别跳转到/all【所有任务】，/complete【处理完毕】,/active【没有处理】，三个页面上，点击之后便会显示出对应队列的列表。

　　基本功能就是这样，其他功能看情况添加。

效果图——

设计思路——

1. 首先我们使用angular的模块化思想，将所有代码统统放到一个页面上，通过监听哈希值的改变，模拟页面的跳转。

2. 没有了。

设计步骤：

1. 首先设计好路由

2. 规划好各个页面上显示的东西

3. 添加其他效果

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

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

    一,路由的规划. 需要模拟的页面有三个:all,active,conplete. 首先,写好铺垫需要的各种东西,重要的组件的引用等—— 这里我们会将index.html设为主页,将body.html加 ...

  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. createThread和_beginthreadex区别

    摘自:http://blog.csdn.net/morewindows/article/details/7421759 CreateThread()函数是Windows提供的API接口,在C/C++语 ...

  2. 使 httpClient 支持中文

    一个有效的方法:重载 PostMethod 的 getRequestCharSet 方法 1: class PostChinese { 2: HttpClient httpClient = new H ...

  3. oracle 11g高级 安装图解（摘自网络）

    使用的高级安装 启动OUI后出现“选择安装方式”窗口,我们选择:高级安装 步骤3:出现“选择安装类型”窗口,选择我们需要安装的版本.我们在此肯定是选择企业版. 至于产品语言不用选择,它会根据当前系统的 ...

  4. DSO分类及应用

    1.DSO的分类,标准DSO(生成主数据标识.对于相同关键字段的值进行合并.可直接出具报表).写优化的DSO(不生成主数据标识.不合并相同关键字段的值.速度快可用于存储大容量数据).直接写入的DSO, ...

  5. drupal7 开发block

    在自己开发的模块的module文件中,实现两个钩子:hook_block_info()和hook_block_view() function journal_block_info() { $block ...

  6. python_变量的命名规则

    python 变量的命名规则: 1. 要具有描述性 2.变量名只能由 数字,字母 ,下划线 组成,不可以是空格或者特殊字符(#!%……&) 3.不能以数字开头 4.保留字符不可用(print ...

  7. js中call方法的使用介绍

    js call call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, ...

  8. 第十九节,基本数据类型,集合set

    集合set,无序,是不允许重复内容的,也就是不允许重复元素,如果有重复,会自动忽略,可接收可迭代类型 (一般用于需要判断和处理交集时候用到) 集合与字典的区别是,集合没有键只有值,字典是有键的字典是一 ...

  9. 【Machine Learning in Action --1】机器学习入门指南

    摘自:http://www.jianshu.com/p/c3634a7f2320 机器学习算法 Coursera 上面 Stanford 的 机器学习 课程是优质的算法相关入门课程.Andrew Ng ...

  10. iOS 开发者旅途中的指南针 - LLDB 调试技术

    文章转载于:iOS 开发者旅途中的指南针 - LLDB 调试技术 今天给大家介绍的内容,无关乎任何功能性开发技术,但又对开发的效率影响至深,这就是调试技术. 何为调试呢,比如我们用 print 函数在 ...