《Pro AngularJS》学习小结-01

《Pro AngularJS》该书以一个SportsStore案例为主线铺开。

一、开发环境设置

该书中所用的server开发环境是Deployed，从来没听说过，而且作者也说该server没什么人用，我干脆弃用之。其他的环境包括

NodeJS——这个必须装

karma——测试环境，前期还没有用到，以后认真研究，毕竟AngularJS一大特点是Unit Test

bootstrap——这个现在应该普遍使用了，O(∩_∩)O

webstorm——现在唯一支持AngularJS插件的IDE

我基本没学过NodeJS，只好使用了webstorm中的内置项目：Node.js

Boilerplate来傻瓜化新建项目了。其启动NodeJS过程如下图（基本可按指示一步一步做⊙﹏⊙）：

新建好项目后将所有文件放在static目录下，就先这样凑合着用了。我也暂时不使用数据库，直接使用JSON文件。

我的项目目录如下：

说明：

首页文件名必须是ｉｎｄｅｘ．ｈｔｍｌ，其他的html文件我放在partial目录下（这个可以自己定义）

在server.js中可以修改NodeJs的port，默认的是8081，在浏览器中输入http://localhost:8081可直接跳转到static目录下的index.html

二、准备数据

我不熟悉NodeJs，使用一个Json文件作为数据源

products.json

创建sportsStore.js来引入并定义数据

三、显示产品细节页面——直接上代码，即index.html

该代码主要用来显示产品的详细信息，即右边的面板panel的内容

四、定义左侧Category导航面板

1、加入的HTML

2. 新建customFilters.js——创建一个unique过滤，用来过滤Category

3. 新建productListControllers.js ——

实现按分类category显示产品信息（动态显示右边的面板内容）

注意：

selectedCategory只是一般普通的Javascript变量，没有定义在$scope范围内，也就是说不能从directive或视图view中绑定的数据访问该变量

categoryFilterFn是用来在产品详细信息面板中过滤product objects

4. 应用productListControllers和过滤产品——修改index.html

5. 高亮显示左边导航按钮（Highlighting the Selected Category）——使用

修改productListControllers.js

修改index.html中左边面板相关内容

四、加入分页（pagination）

1. 修改productListControllers.js

2. 修改customFilters.js——添加了两个过滤，range和pageCount

3. 修改index.html——加入分页代码