TodoMVC简单介绍

Nov 15, 2016


###TodoMVC 介绍

1. 准备工作

进入 官网

点击View on GitHub进入

图

进入如图所示链接,该目录中的examples中,存放todoMVC各种方法实现的源代码, 供开发者参考使用。

图

这里我们主要用AngularJs实现整个开发过程,首先我们开发者的主要任务是代码 实现你的思路,在此todoMVC为我们提供了开发模板,点击进入图中tastejs目录, 找到todomvc-app-template(todo开发模板),点击进入后,如下图所示,把项目clone 到本地项目文件夹

图

命令行操作截图如下,该步骤是吧github提供的模板克隆到本地,默认会在当前目录新建git文件夹的名字:

图

进入新生成文件夹(你命名的:如此处的todoTest;或者是默认生成的),运行index.html文件,无任何样式, 打开控制台,有多处报错,仔细看目录文件,存在package.json文件,但是本地并没有这些文件, 说明依赖包没下载,执行如图命令:

图

执行上图中的$:npm install命令后,目录中生成node_modules文件夹,重新刷新index页面,样式布局正确了,但是点击、切换等 功能还是不能没有实现,这部分就是我们自己要完成的。

打开控制台,有时会报找不到learn.json的错误,它是官方用来展示吐下文件的,我们开发 无需此文件,可以直接去掉对这个文件的请求

图

在index.html文件中,我们可以看到引入的base.js包,它在todomvc-common中,在开发中, 这个文件夹内容是无用的,我们可以直接删除

图

卸载掉并且在配置文件中清理掉,并在index.html中删除引入base.js和base.css的代码,此处的app.js是写好的js 模板,我们可以添加自己的js。再看index.html的运行页面,控制台警告已去掉。到此,todoMVC 模板已待用。

图

2. Angularjs实现demo

引入angular.js包文件,此时在项目文件的node_modules文件夹下,生成angular目录

图

在html中引入angular包,分析功能,todo小案例需要一个模块即可,主要包含两个功能块:任务列表用数组其中包含多个对象,每个 对象用于记录该任务的完成情况,输入需要文本框。