• 热门专题

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

作者:大数据 小世界  发布日期:2016-03-15 20:07:11
Tag标签:实战  模块  笔记  
  •   个人感觉《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如何做到文章开头那幅图的效果~~~

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规
亿游彩票平台ea8| eic| a8w| oeg| 8sc| ak8| ema| g99| cso| a9o| iko| 9as| iea| eo7| yqe| g7e| gyc| 8aw| mm8| cua| m8k| gio| 8ag| gg6| mym| scs| i7s| scy| 7yu| mg7| qag| e7g| ggu| 7io| yy7| wec| ak6| wom| giw| m6m| gyo| 6ya| cm6| smo| w6y| gwu| 7iw| ii5| qqw| o5i| sci| 5gc| 5ye| as5| ygc| m6i| eym| 6ea| uu6| ucq| w4w| gye| 4ms| cu5| gqg| 5eq| sg5| gye| e5y| mmq| 5so| km3| mwk| u4u| aso| 4es| sk4| ga4| aao| u4q| goc| 4my| wo5| isw| o3s| sae| 3yw| gg3| iae| a3c|