MDL+AngularJS制作TodoList · 拖鞋党的拖鞋摊

##起因
有时候会有很多事情要做。但又不是私事不想记在手机上的Inbox上。申请马甲邮箱网页登陆Inbox还得在手机客户端激活一下才能使用。太麻烦了。找了一段时间没有找到比较简单纯粹的TodoList应用。干脆自己做一个。顺便学习AngularJS和Material Design Light的用法。

##框架简介

###Material Design Lite(MDL)
Material Design Lite是Google推出的一个CSS框架，作用类似于Bootstrap，用于快速开发出符合Material Design风格的网页。

###AngularJS
AngularJS是Google推出的一个JS框架，用于制作网页应用。其特点是双向数据绑定，MVC等。

##需求定义
这个清单（TodoList）需求很简单。只需要能够记录待办事项即可。稍微详细的需求如下

支持输入待办事项
支持标记待办事项为完成
支持储存。关闭网页后再打开待办事项还在
拥有良好的交互界面

##实现

###实现思路
其实完全可以用纯HTML和jQuery来制作。甚至不需要jQuery只需要原生JS。整个页面只需要有一个输入框，一个确定按钮，一个列表(无序列表<ul>或有序列表<ol>均可)。使用jQuery来做就是一个操纵DOM的过程。而使用AngularJS框架的双向数据绑定功能就不需要操纵DOM，只需要关注逻辑，修改数据存储的变量即可。

###获取Material Design Lite
打开Material Design Lite的起步页面，选择获取方式。因为国内连接比较慢，所以我选择了下载的方式。

###获取AngularJS
打开AngularJS的主页，点击Download，因为要开发所以选择Uncompressed不压缩版。

###第一版

工程的目录结构如下。

F:\
├─MDL
│  └─material.css
├─AngularJS
│  └─angular.js
└─TodoList
   └─TodoList.html

引入MDL和AngularJS
通过<script>标签和<link>标签在<head>引入即可

1
2
3

<link rel="stylesheet" type="text/css" href="../MDL/material.min.css">
<script type="text/javascript" src="../MDL/material.min.js"></script>
<script type="text/javascript" src="../AngularJS/angular.js"></script>

搭建AngularJS的Hello World
因为会写一些AngularJS代码。所以我们在TodoList文件夹下新建一个Javascript文件，名称是todolist.js。输入以下代码
1
var todoList = angular.module('todo-list',[]);
在TodoList.html中的<html>标签加入属性ng-app，在<body>中添加以下代码。
1
2
<input type="text" ng-model="helloworld"><button>DO IT</button>
<p>Hello,{{helloworld}} !</p>

###第一版测试

运行发现输入什么就会显示什么。没有使用任何Javascript代码就实现了输入的数据同步到helloworld这个变量（暂且这么认为），helloworld变量的改变有同步到了引用它的地方这一个双向的过程。

目前的问题有

没有实现记事功能
太丑

###第二版
Hello World搭建完毕后，接下来就是引入Material Design Lite的样式。首先我们需要一个输入框和按钮的样式，还有一个列表的样式。按钮的样式可以在Material Design Lite的按钮组件页面获取。这里选择了带ripple的按钮，样式如下

1
2
3

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>

输入框的样式可以在Material Design Lite的输入框组件页面获取。这里选择了简单的输入框。样式如下

<!-- Simple Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield textfield-demo">
    <input class="mdl-textfield__input" type="text" id="sample1" />
    <label class="mdl-textfield__label" for="sample1">Text...</label>
  </div>
</form>

列表的样式可以在Material Design Lite的表格组件页面获取。这里是因为看起来差不多才选择了表格组件。样式如下

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

将代码整合一下。完整的代码如下

<!DOCTYPE html>
<html ng-app>
<head>
	<meta charset="utf-8">
	<title>待办事项</title>
	<link rel="stylesheet" type="text/css" href="../MDL/material.min.css">
	<script type="text/javascript" src="../MDL/material.min.js"></script>
	<script type="text/javascript" src="../AngularJS/angular.js"></script>

	<title>待办事项</title>
</head>

<body>
  <form>
  	<div class="mdl-textfield mdl-js-textfield textfield-demo">
  	  <input class="mdl-textfield__input" type="text" id="sample1" ng-model="helloworld" />
  	  <label class="mdl-textfield__label" for="sample1">想做啥？</label>
  	</div>
  	<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">DO IT</button>
  </form>
  <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
    <thead>
    </thead>
    <tbody>
      <tr>
        <td>Hello, {{ helloworld }}!</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

###第二版测试
虽然还是很丑，但是基本的外观还是有的。现在的主要问题有

没有实现记事功能
太丑
丑