AngularJS in Action读书笔记4(实战篇)——创建Statistic模块

　　个人感觉《Angularjs in action》这本书写的很好，很流畅，循序渐进，深入浅出，关键是结合了一个托管于Github上的实例讲解的，有代码可查，对于初学者应该是个不错的途径。（不是打广告）其实书早已经看完一遍，脑瓜子里面已经存储了一些module、controller、directive、scope等等这些概念，但是怎么把这些东西串起来，用起来，不动手，还是不能检验看书的效果。所以从这篇就来结合自己的实操经验来分享下自己是如何消化（囫囵吞枣）这些概念和设计理念的。

　　设计初衷是要在原来的Angello项目的基础上添加一个模块Statistic，类似于User模块，但是在点进去User后，可以出来一个统计报告，用于显示出该用户每个status（toDo，inProgress，codeReview，qaReview, verified）下各有几个story，并根据这些status的个数绘制一个饼状图（基于D3引擎）。代码已经上传到Github上^^，欢迎来轻拍~~~

　　Github地址：https://github.com/DMinerJackie/angelloExtend （代码持续更新中。。。）

　　最终效果如下：

今天主要内容是一个从无到有，屡屡进坑又出坑过程的分享：

一.搭架子

1. 首先仿照其他模块，新建出statistic模块的目录结构

　　目录中包含了controllers、directives和存放html的tmpl，在statistic目录下新建Statistic.js用于声明一个模块，也就是一个命名空间。包括后面要讲到的DataController.js和D3Chart.js都会包装到这个Angello.Statistic的module中。

angular.module('Angello.Statistic', ['Angello.Common']);

　　

　　2.创建页面和控制器

　　statistic.html

<div class="container chart-wrapper">
    <h3>User Stories by Type~~~<span ng-model = 'statistic.style'></span>
    123</h3>
    <h3>{{statistic.style}}</h3>
</div>

　　

　　StatisticController.js

angular.module('Angello.Statistic')
.controller('StatisticCtrl', function($scope){
var statistic = this;
statistic.style = "+++++++++++++++++++++++++";
});

　　

　　3.添加路由

　　已经有了要显示的页面，并且statistic.html页面中绑定的变量已经在StatisticController中定义了，但是如果没有路由，我们还是没有办法访问到这个页面。所以需要添加路由，在angello.js文件中加入代码

.when('/statistic',{
        	templateUrl: 'src/angello/statistic/tmpl/statistic.html',
        	controller: 'StatisticCtrl',
        	requiresLogin: true,
        })

　　

　　在不涉及到指令的情况下，做好以上三步，基本就可以如愿的访问Statistis页面了（也就是显示一大串没有意义的“+++++++++++”）。但是这里有些小坑，有一个没填满，都不会出现理想中的界面。

　　（1）每个新建的js文件都要注册

　　我们新创建的控制器StatisticController.js需要到boot.js中注册，即加上一行

{ file: 'src/angello/statistic/controllers/StatisticCtroller.js'},

　　

　　这样的StatisticController.js才是可用，反之如果注释这一行

　　就会看到下面的结果：

　　出现这样的结果说明了什么问题？

　　说明StatisticController控制器没有起到该起的作用，话句话说，就是StatisticController失效，所以需要注册到boot.js以激活使用

　　（2）controlleras参数的使用

　　如果你有读过Angello的代码，你就会发现，在angello的很多模块如users、storyboard等当中都是用了参数controllerAs

　　实验了上面步骤后发现页面是能够正常显示了，之后便渐渐靠近原先的设计，于是将users.html页面全部拷贝到statistic.html中，反复调试都不能像user模块那样显示出用户来，显示界面如下：

　　于是在Angello.js中将原先的路由改为：

.when('/statistic',{
        	templateUrl: 'src/angello/statistic/tmpl/statistic.html',
        	controller: 'StatisticCtrl',
        	controllerAs: 'users',
        	requiresLogin: true,
        })

　　

　　这样就可以正常显示user了。

　　为了弄清楚这个controllerAs参数的使用，将这里的controllerAs:'usesrs'改为了controllerAs:'users123'

　　同时将statistic.html对应的users也改成了users123，代码如下：

<div class="user-wrapper">
  <form name="users123.userForm">
      <table class="table edit">
          <thead>
          <tr>
              <th width="40%">Name</th>
              <th width="40%">Email</th>
              <th></th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="user in users123.users">
              <td>
                <ng-form name="userNameForm">
                  <input required name="userName" type="text" class="form-control" ng-model="user.name" ng-blusersers1.updateUser(user.id, user)"/>

                  <div class="error" ng-messages="userNameForm.userName.$error">
                    <div ng-message="required">
                      Please enter a name.
                    </div>
                  </div>
                </ng-form>
              </td>
              <td>
                <ng-form name="userEmailForm">
                  <input required name="userEmail" type="email" class="form-control" ng-model="user.email" ng-blur="users123.updateUser(user.id, user)"/>

                  <div class="error" ng-messages="userEmailForm.userEmail.$error">
                    <div ng-message="required">
                      Please enter an email.
                    </div>
                    <div ng-message="email">
                      Email should be in format example@example.com
                    </div>
                  </div>
                </ng-form>
              </td>
              <td>
                <button type="button" class="btn btn-link"
                        ng-click="users123.removeUser(user.id)">Remove</button>
                <a class="btn btn-link" href="#/users/{{user.id}}">View</a>
              </td>
          </tr>
          </tbody>
      </table>
  </form>

     <div class="well">
        <h4>Add User</h4>

        <form name="users123.newUserForm" class="form-inline new-user" role="form" novalidate ng-submit="users123.addUser()">
            <div class="form-group">
                <input required name="userName" type="text" class="form-control" ng-model="users123.newUser.name" placeholder="Name">
                <div class="error" ng-messages="users123.newUserForm.userName.$error" ng-if="users123.showMessages('userName')">
                    <div ng-message="required">
                      Please enter a name.
                    </div>
                </div>
            </div>
            <div class="form-group">
                <input required name="userEmail" type="email" class="form-control" ng-model="users123.newUser.email" placeholder="Email">
                <div class="error" ng-messages="users123.newUserForm.userEmail.$error" ng-if="users123.showMessages('userEmail')">
                    <div ng-message="required">
                      Please enter an email.
                    </div>
                    <div ng-message="email">
                      Email should be in format example@example.com
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-default">Add</button>
        </form>
    </div>
</div>

　　如此页面依然正常显示，从而得出结论：controllerAs设定的参数值一定要与页面中的变量同名，否则controllerAs参数失效。另外声明一点，通过使用controllerAs这个参数，避免了$scope的使用，使得在StatisticController.js中大幅减少了$scope的出现，简化了代码。

　　除此以外还有一些细节就不再一一说明，类似页面右上角的那个五角星图标，也就是要做的statistic模块的图标，其实用的是bootstrap的一个类class="glyphicon glyphicon-star"，这也是在仿照其他三个图标时发现并在bootstrap库中选择的一个。所以说这些东西不需要背或记，甚至像我一样对此一无所知，但是需要的时候去查，查到了就用上即可。

　　今天主要讲了如何新建一个模块，从页面到控制器到路由，从页面不显示和不能全部正常显示到页面正常显示出预期的结果，明白了如何创建页面、配合控制器、设置路由等等，当然后面还会继续818如何做到文章开头那幅图的效果~~~

　　如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！如果您想持续关注我的文章，请扫描二维码，关注JackieZheng的微信公众号，我会将我的文章推送给您，并和您一起分享我日常阅读过的优质文章。

友情赞助

如果你觉得博主的文章对你那么一点小帮助，恰巧你又有想打赏博主的小冲动，那么事不宜迟，赶紧扫一扫，小额地赞助下，攒个奶粉钱，也是让博主有动力继续努力，写出更好的文章^^。

　　　　1. 支付宝　　　　　　　　　　　　　　　　　　　　　　　　　　2. 微信