Angularjs开发模板

2019年9月15日 185次阅读 来源: 怀疑真爱的流浪者jason

前言

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开发模板》

联系方式

QQ:491229492
github.com/bornkiller

    原文作者：怀疑真爱的流浪者jason
    原文地址: https://segmentfault.com/a/1190000002311083
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞