[关闭]
@bornkiller 2014-11-21T15:45:50.000000Z 字数 1098 阅读 2419

Angularjs开发模板

angularjs


前言

Angularjs相对来说算是上手难度较大的框架之一,官方提供的angular-seed自觉不够好用,对新手也非常不友好,所以才会自己搞angular-boilerplate出来,无论是用以学习,还是做简单组件开发,可以节省不少时间。
地址:https://github.com/bornkiller/angular-boilerplate

使用说明

已预先配置好package.jsonbower.json文件,确保本机Node, NPM环境,预先安装好bowergruntgulp工具。

  1. npm install;
  2. bower install;

使用环境基本上搭建完毕,预先配置构建工具的部分任务:

  1. # 本地预览
  2. grunt connect;
  3. # 代码质量检测
  4. gulp jshint;
  5. # 单元测试
  6. karma start;
  7. # 持续集成
  8. grunt karma

博文中仅说明简易组件开发与测试。示例模块名为shuffleApp,未设置任何依赖。

  1. angular.module('shuffleApp', []);

组件开发

提供了控制器,服务,过滤器,指令的简单demo,自行查看即可。

组件测试

angular的测试高度规范化,所以按照标准流程走即可,对几个要点做简要说明。

  1. var $rootScope, $controller, $scope;
  2. beforeEach(module('shuffleApp'));
  3. beforeEach(inject(function (_$rootScope_, _$controller_) {
  4. $rootScope = _$rootScope_;
  5. $controller = _$controller_;
  6. }));
  7. beforeEach(function () {
  8. $scope = $rootScope.$new();
  9. $controller('MainCtrl', {
  10. '$scope': $scope
  11. });
  12. });

测试文件遵循:模块加载---依赖注入---测试用例的模式。全局module方法加载待测试模块,inject引用模块内定义的服务,并赋值给当前作用于的局部变量,前后下划线的设计,只是为了局部变量名与服务名可相同,避免不必要的上下文切换。针对依赖注入,需要注意一点,可以手动加载所有服务,也可以只加载$injector一个服务,然后通过get方法逐个获取。测试控制器,过滤器,指令分别需要依赖$controller, $filter, $compile三个服务。

联系方式

QQ:491229492
github.com/bornkiller

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注