《Pro AngularJS》学习小结-01

时间：2014-05-02 05:16:51 收藏：0 阅读：477

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

一、开发环境设置

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

NodeJS——这个必须装
karma——测试环境，前期还没有用到，以后认真研究，毕竟AngularJS一大特点是Unit Test
bootstrap——这个现在应该普遍使用了，O(∩_∩)O
webstorm——现在唯一支持AngularJS插件的IDE

我基本没学过NodeJS，只好使用了webstorm中的内置项目：Node.js Boilerplate来傻瓜化新建项目了。其启动NodeJS过程如下图（基本可按指示一步一步做⊙﹏⊙）：

bubuko.com,布布扣

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

我的项目目录如下： bubuko.com,布布扣

说明：

首页文件名必须是ｉｎｄｅｘ．ｈｔｍｌ，其他的html文件我放在partial目录下（这个可以自己定义）
在server.js中可以修改NodeJs的port，默认的是8081，在浏览器中输入http://localhost:8081可直接跳转到static目录下的index.html

二、准备数据

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

[
    { "name" : "Product #1", "description" : "A product", "category": "Category #1", "price": "100" },
    { "name" : "Product #2", "description" : "A product", "category": "Category #1", "price": "110" },
    { "name" : "Product #3", "description" : "A product", "category": "Category #2", "price": "210" },
    { "name" : "Product #4", "description" : "A product", "category": "Category #3", "price": "202" },
    { "name" : "Product #1", "description" : "A product", "category": "Category #1", "price": "100" },
    { "name" : "Product #2", "description" : "A product", "category": "Category #1", "price": "110" },
    { "name" : "Product #3", "description" : "A product", "category": "Category #2", "price": "210" },
    { "name" : "Product #4", "description" : "A product", "category": "Category #3", "price": "202" }
]

products.json

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

angular.module("sportsStore")
    .controller("sportsStoreCtrl", function ($scope, $http) {
        $scope.data = {};
        $http.get("products.json")
            .success(function(data){
                $scope.data.products = data;
            }).error(function(error){
                $scope.data.error = error;
            });
});

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

bubuko.com,布布扣

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

<!DOCTYPE html>
<html ng-app="sportsStore">   <!-- 标志AngularJs的开始 -->
<head>
<title>SportsStore</title>
<script src="js/lib/angular.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
<script>
    angular.module("sportsStore", []);   <!--加入sportsStore模块 -->
</script>
<script src="js/controllers/sportsStore.js"></script>
</head>
<body ng-controller="sportsStoreCtrl">   <!-- 控制器sportStoreCtrl将应用于整个页面 -->
    <div class="navbar navbar-inverse">
        <a class="navbar-brand" href="#">SPORTS STORE</a>
     </div>
    <div class="panel panel-default row">
        <div class="col-xs-3 col-md-3">Categories go here</div>
        <div class="col-xs-8 col-md-8">
        <div class="well" ng-repeat="item in data.products">
        　　<h3>
       　　 <strong>{{item.name}}</strong>           <!--数据绑定 -->
        　　<span class="pull-right label label-primary">
        　　{{item.price | currency}}       <!-- currency filter将使该span的内容显示为货币格式 -->
        　　</span>
        　　</h3>
        　　<span class="lead">{{item.description}}</span>     <!--数据绑定 -->
        </div>
        </div>
    </div>
</body>
</html>

四、定义左侧Category导航面板

1、加入的HTML

...
angular.module("sportsStore", ["customFilters"]); <!--加入customFilters模块 -->
...
<div class="panel panel-default row">
    <div class="col-xs-3 col-md-3">
    　　<a ng-click="selectCategory()" class="btn btn-block btn-default btn-lg">Home</a>  <!--加入click事件 -->
   　　 <a ng-repeat="item in data.products | orderBy:‘category‘ | unique:‘category‘"     <!--添加unique过滤，定义为按category属性过滤 -->
　　　　　　　　ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg">     <!--加入click事件 -->
    　　　　{{item}}
   　　 </a>
    </div>
    ......
</div>

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

angular.module("customFilters", [])
    .filter("unique", function () {
        return function (data, propertyName) {
            if (angular.isArray(data) && angular.isString(propertyName)) {
                var results = [];
                var keys = {};
                for (var i = 0; i < data.length; i++) {
                    var val = data[i][propertyName];
                    if (angular.isUndefined(keys[val])) { //?
                        keys[val] = true;
                        results.push(val);
                    }
                }
                return results;
            } else {
                return data;
            }
        }
});

3. 新建productListControllers.js —— 实现按分类category显示产品信息（动态显示右边的面板内容）

bubuko.com,布布扣

angular.module("sportsStore")
.controller("productListCtrl", function ($scope, $filter) {
　　var selectedCategory = null;
　　$scope.selectCategory = function (newCategory) {
　　　　selectedCategory = newCategory;
　　}
　　$scope.categoryFilterFn = function (product) {
　　　　return selectedCategory == null ||
　　　　product.category == selectedCategory;
　　}
});

注意：

selectedCategory只是一般普通的Javascript变量，没有定义在$scope范围内，也就是说不能从directive或视图view中绑定的数据访问该变量
categoryFilterFn是用来在产品详细信息面板中过滤product objects

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

<divclass="panel panel-default row" ng-controller="productListCtrl">   <!--加入新的div层，使左右面板包含到该div，并加入productListCtrl -->
　　<div class="col-xs-3 col-md-3">
　　　　<a ng-click="selectCategory()" class="btn btn-block btn-default btn-lg">Home</a>
　　　　<a ng-repeat="item in data.products | orderBy:‘category‘ | unique:‘category‘"
　　　　　　ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg">
　　　　　　{{item}}
　　　　</a>
　　</div>
　　<div class="col-xs-8 col-md-8">
　　　　<div class="well"　ng-repeat="item in data.products | filter:categoryFilterFn"> 
    <!--加入categoryFilterFn，使得该div的内容随着右边面板的点击事件而变化-->
　　　　<h3>
　　　　　　<strong>{{item.name}}</strong>
　　　　　　<span class="pull-right label label-primary">
　　　　　　　　{{item.price | currency}}
　　　　　　</span>
　　　　</h3>
　　　　<span class="lead">{{item.description}}</span>
　　　　</div>
　　</div>
</div>

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

bubuko.com,布布扣

修改productListControllers.js

angular.module("sportsStore")
.constant("productListActiveClass", "btn-primary")   //使用constant方法定义一个常量productListActiveClass
.controller("productListCtrl", function ($scope, $filter, productListActiveClass) {//
　　var selectedCategory = null;
　　$scope.selectCategory = function (newCategory) {
　　　　selectedCategory = newCategory;
　　}
　　$scope.categoryFilterFn = function (product) {
　　　　return selectedCategory == null ||
　　　　product.category == selectedCategory;
　　}
　　$scope.getCategoryClass = function(category) {
　　　　return selectedCategory == category ? productListActiveClass : "";
　　}
});

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

...
.controller("productListCtrl", function ($scope, $filter, productListActiveClass) {
...
<div class="col-xs-3 col-md-3">
　　<a ng-click="selectCategory()" class="btn btn-block btn-default btn-lg">Home</a>
　　<a ng-repeat="item in data.products | orderBy:‘category‘ | unique:‘category‘"
　　　　ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg"
　　　　ng-class="getCategoryClass(item)">
　　　　{{item}}
　　</a>
</div>
...

四、加入分页（pagination）

bubuko.com,布布扣

1. 修改productListControllers.js

angular.module("sportsStore")
.constant("productListActiveClass", "btn-primary")
.constant("productListPageCount", 3)   //常量productlistPageCount，每页显示的产品数目
.controller("productListCtrl", function ($scope, $filter, productListActiveClass, productListPageCount) {
　　var selectedCategory = null;
　　$scope.selectedPage = 1;
　　$scope.pageSize = productListPageCount;
　　$scope.selectCategory = function (newCategory) {
　　　　selectedCategory = newCategory;
　　　　$scope.selectedPage = 1;
　　}
　　$scope.selectPage = function (newPage) {
　　　　$scope.selectedPage = newPage;
　　}
　　$scope.categoryFilterFn = function (product) {
　　　　return selectedCategory == null ||
　　　　product.category == selectedCategory;
　　}
　　$scope.getCategoryClass = function (category) {
　　　　return selectedCategory == category ? productListActiveClass : "";
　　}
　　$scope.getPageClass = function (page) {
　　　　return $scope.selectedPage == page ? productListActiveClass : "";  //为分页加入高亮filter
　　}
});

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

angular.module("customFilters", [])
　　.filter("unique", function () {
　　......
　　})
　　.filter("range", function ($filter) {
　　　　return function (data, page, size) {
　　　　　　if (angular.isArray(data) && angular.isNumber(page) && angular.isNumber(size)) {
　　　　　　　　var start_index = (page - 1) * size;
　　　　　　　　if (data.length < start_index) {
　　　　　　　　　　return [];
　　　　　　　　} else {
　　　　　　　　　　return $filter("limitTo")(data.splice(start_index), size);
　　　　　　　　}
　　　　　　}else {
　　　　　　　　　　return data;
　　　　　　}
　　　}
})
.filter("pageCount", function () {
　　return function (data, size) {
　　　　if (angular.isArray(data)) {
　　　　　　var result = [];
　　　　　　for (var i = 0; i < Math.ceil(data.length / size) ; i++) {
　　　　　　　　result.push(i);
　　　　　　　}
　　　　　　return result;
　　　　} else {
　　　　　　return data;
　　　　}
　　}
});

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

......
<div class="col-xs-8 col-md-8">
　　<div class="well" ng-repeat="item in data.products | filter:categoryFilterFn | range:selectedPage:pageSize">
　　<h3>
　　　　<strong>{{item.name}}</strong>
　　　　<span class="pull-right label label-primary">
　　　　{{item.price | currency}}
　　　　</span>
　　</h3>
　　<span class="lead">{{item.description}}</span>
</div>
<div class="pull-right btn-group">
　　<a ng-repeat="page in data.products | filter:categoryFilterFn | pageCount:pageSize"
　　　　ng-click="selectPage($index + 1)" class="btn btn-default"
　　　　ng-class="getPageClass($index + 1)">
　　　　{{$index + 1}}
　　</a>
</div>
......

《Pro AngularJS》学习小结-01,布布扣,bubuko.com