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的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ThoughtWorks

无法登录的用户

自从ins项目上线以后,团队其他成员都纷纷下了项目,只留下他这个项目经理留在一线解决问题。登录这块总是出现问题,上次就出现过一次,不过上次是机房网络原因,而这次...

13610
来自专栏程序你好

一个微服务架构的简单示例

51030
来自专栏北京马哥教育

系统负载能力浅析

系统负载能力浅析 互联网时代,高并发是一个老生常谈的话题。无论对于一个web站点还是app应用,高峰时能承载的并发请求都是衡量一个系统性能的关键标志。像阿里双十...

32560
来自专栏张善友的专栏

zookeeper 分布式锁服务

分布式锁服务在大家的项目中或许用的不多,因为大家都把排他放在数据库那一层来挡。当大量的行锁、表锁、事务充斥着数据库的时候。一般web应用很多的瓶颈都在数据库上,...

23280
来自专栏逢魔安全实验室

从CPU漏洞Meltdown&Spectre看侧信道攻击

0x00 前言 2018伊始,两个芯片级漏洞Meltdown(熔断)、Spectre(幽灵)漏洞震惊的安全界。受影响的CPU包括Intel、AMD和ARM,...

37950
来自专栏全栈开发

webpack构建优化:bundle体积从3M到400k之路

在CQM平台开发时,把demo网站给同事体验,都纷纷反馈第一次打开页面的时候需要等待很久,页面一直在转菊花。作为一个为韩国头部厂商提供优质服务的网站,接到这种反...

76940
来自专栏CDN及云技术分享

原来你是这样的http2

目前HTTP/2.0(简称h2)已经在广泛使用(截止2018年8月根据Alexa流行度排名的头部1千万网站中,h2占比约29%,https://w3techs....

766130
来自专栏即时通讯技术

移动端IM开发需要面对的技术问题

P2P多见于局域网内聊天工具,典型的应用有:飞鸽传书、天网Maze(你懂的)等。这类软件在启动后一般做两件事情:

17010
来自专栏TSW

5201314对程序员意味着什么?

作为年轻人的潮流聚集地,Qzone在每个特殊的日子总会迎来一波猛烈的流量冲击。比如刚过去的520,下图是今年5月20号的流量情况:

25170
来自专栏杨建荣的学习笔记

Oracle 12C打补丁的简单尝试(r10笔记第55天)

最近在服务器盘点的时候,发现测试环境还是值得整合一下,因为服务器资源老旧,整体配置不高,服务器资源使用率不高,业务要求不高,多个实例分散在多台服务器上,要考虑灾...

40080

扫码关注云+社区

领取腾讯云代金券