AngularJS 手机目录应用教程

概述

这个应用将带领开发者贯穿使用angularjs来开发一个web-app程序。这个应用程序是基于 Google Phone Gallery

但它现在已经不存在了。这是一个借鉴参考文档。

每一个标记的提交是一个关于angularjs某一方面单独的教程

全部的教程可以在以下网址找到: http://docs.angularjs.org/tutorial.

 

需要的工具

Git

Node.js and Tools

程序的运作

这个应用的文件系统布局结构是基于 angular-seed

这个程序没有动态的后台(没有服务器)我们将以一些json文件作为假数据

阅读在最后的开发部分让你自己熟悉怎么运行和开发一个angular程序

 

教程大纲

你可以通过git checkout step-?来检查教程的任何一点

通过 git diff command. git diff step-?..step-?看查看两个教程之间的变化

 

step-0

增加ngApp指令部署app

用一个表达式增加简单的模板

 

step-1

向静态的html列表增加两个手机到index.html,我们利用angular.js将这个静态的页面变成动态

 

 

step-2

通过以下途径将静态的html变成动态的

    为程序创建一个控制器PhoneListCtrl

  将数据从html中提取出来并将它移到控制器中作为缓存数据集

  通过使用ng-repeat指令迭代数据集中的手机可以将静态的html转换为angula-repeat会将数据集中的每个对象都clone出来并渲染在页面上

增加一个简单的单元 test 去展示怎么样去写tests和用karam运行他们