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的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。
- 这或许是我见过的最简单的正则表达式教程(一)
- Linux下如何安装和卸载JDK
- 讨厌算法的程序员 2 - 证明算法的正确性
- Day4上午解题报告
- [编程经验] Python正则表达式
- Day4下午解题报告
- linux下 Error running javac compiler
- 讨厌算法的程序员 1 - 插入排序
- Linux下使用ssh密钥实现无交互备份
- [编程经验] Python中的continue和break语句
- 洛谷 P3386 【模板】二分图匹配 Dinic版
- [编程经验] 拉勾网爬虫数据的后续处理
- Linux下使用rsync实现文件备份
- 【干货】基于TensorFlow卷积神经网络的短期股票预测
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- vivo 基于原生 RabbitMQ 的高可用架构实践
- 数据库锁
- 现在单细胞还想“水”CNS恐怕得多组学了
- 7个处理JavaScript值为undefined的技巧
- Python高级知识点
- 三阴性乳腺癌表达矩阵探索之数据下载及理解
- 6种展示代码的工具,你学会了吗?
- 巧用 Ansible 实现配置管理:多环境配置问题
- 三阴性乳腺癌表达矩阵探索笔记之差异性分析
- TCGA官方数据挖掘文章教你机器学习or深度学习
- 2020年入门数据分析选择Python还是SQL?七个常用操作对比!
- 朋友圈选美大赛
- 在Linux服务器里面安装GISTIC软件
- 苹果上架的整个流程
- 三阴性乳腺癌表达数据分析笔记之TNBC定义