脚本宝典收集整理的这篇文章主要介绍了Angularjs开发模板,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前言
Angularjs相对来说算是上手难度较大的框架之一,官方提供的angular-seed
自觉不够好用,对新手也非常不友好,所以才会自己搞Angular-boilerplate
出来,无论是用以学习,还是做简单组件开发,可以节省不少时间。
地址:https://github.com/bornkiller/angular-boilerplate
使用说明
已预先配置好package.json
与bower.json
文件,确保本机Node
, NPM
环境,预先安装好bower
,grunt
,gulp
工具。
npm install;
bower install;
使用环境基本上搭建完毕,预先配置构建工具的部分任务:
# 本地预览
grunt connect;
# 代码质量检测
gulp jshint;
# 单元测试
karma start;
# 持续集成
grunt karma
博文中仅说明简易组件开发与测试。示例模块名为shuffleApp
,未设置任何依赖。
angular.module('shuffleApp', []);
组件开发
提供了控制器,服务,过滤器,指令的简单demo,自行查看即可。
组件测试
angular的测试高度规范化,所以按照标准流程走即可,对几个要点做简要说明。
VAR $rootScoPE, $controller, $scope;
beforeeach(module('shuffleApp'));
beforeEach(inject(function (_$rootScope_, _$controller_) {
$rootScope = _$rootScope_;
$controller = _$controller_;
}));
beforeEach(function () {
$scope = $rootScope.$new();
$controller('MainCtrl', {
'$scope': $scope
});
});
测试文件遵循:模块加载---依赖注入---测试用例的模式。全局module
方法加载待测试模块,inject
引用模块内定义的服务,并赋值给当前作用于的局部变量,前后下划线的设计,只是为了局部变量名与服务名可相同,避免不必要的上下文切换。针对依赖注入,需要注意一点,可以手动加载所有服务,也可以只加载$injector
一个服务,然后通过get
方法逐个获取。测试控制器,过滤器,指令分别需要依赖$controller
, $filter
, $compile
三个服务。
grunt karma
是为做持续集成时使用的,通常需要配置输出格式为icov
,为了方便,这里设置为htML
,在开源项目结合travis.ci
使用的时候务必注意。结果如下:
联系方式
以上是脚本宝典为你收集整理的Angularjs开发模板全部内容,希望文章能够帮你解决Angularjs开发模板所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。