zoukankan      html  css  js  c++  java
  • AngularJS in Action读书笔记4(实战篇)——创建Statistic模块

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

      设计初衷是要在原来的Angello项目的基础上添加一个模块Statistic,类似于User模块,但是在点进去User后,可以出来一个统计报告,用于显示出该用户每个status(toDoinProgresscodeReviewqaReview, 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. 微信

                          

  • 相关阅读:
    bzoj-2748 2748: [HAOI2012]音量调节(dp)
    bzoj-2338 2338: [HNOI2011]数矩形(计算几何)
    bzoj-3444 3444: 最后的晚餐(组合数学)
    codeforces 709E E. Centroids(树形dp)
    codeforces 709D D. Recover the String(构造)
    codeforces 709C C. Letters Cyclic Shift(贪心)
    codeforces 709B B. Checkpoints(水题)
    codeforces 709A A. Juicer(水题)
    Repeat Number
    hdu 1003 Max Sum (动态规划)
  • 原文地址:https://www.cnblogs.com/bigdataZJ/p/AngularjsInAction4.html
Copyright © 2011-2022 走看看