Хочу поделиться своим билдером для Angular.js приложения.
Вкратце суть.
Есть файл, в котором объявляется наш главный модуль /app.js:
angular.module('App',['/some_path/my_module.js']);
В качестве требуемого модуля у него указан путь к другому файлу /some_path/my_module.js
angular.module('MyModule',[]);
Обращаемся к билдеру
ngbuild app.js app.build.js
И смотрим в файл /app.build.js
angular.module('MyModule',[]);
angular.module('App',['MyModule']);
Под катом будет еще несколько примеров использования и интеграции с gulp и grunt.
Теперь предположим, что мы хотим реализовать такую архитектуру, при которой контроллерам/директивам/сервисам будет соотвествовать папка, а каждому элементу отдельный файл
/app.js
/controllers
-----/module.js
-----/first_ctrl.js
/app.js
angular.module('App',['/controllers']);
/controllers/module.js
angular.module('Controllers',[]);
/controllers/first_ctrl.js
angular.module('Controllers').controller('FirstCtrl',function($scope){});
Вызываем ngbuild и смотрим /app.build.js
angular.module('Controllers',[]);
angular.module('Controllers').controller('FirstCtrl',function($scope){});
angular.module('App',['Controllers']);
То есть суть в том, что если, указывать в качестве требуемого модуля путь к папке, билдер автоматически подргузит все файлы из нее и при этом поставит на первое место содержимое файла module.js
Так же билдер нормально реагиурает на то, что в одном файле могут быть несколько модулей
Предположим в /app.js
angular.module('App',['/modules.js']);
/modules.js
angular.module('Controllers',[]);
angular.module('Directives',[]);
angular.module('Filters',[]);
Вызываем билдер и смотрим в /app.build.js
angular.module('Controllers',[]);
angular.module('Directives',[]);
angular.module('Filters',[]);
angular.module('App',['Controllers','Directives','Filters']);
Для удобства разработки билдер можно интегрировать с watch задачами gulp и grunt
Gulp
var gulp=require('gulp');
var ngbuild=require('ngbuild');
gulp.task('ngbuild', function () {
ngbuild({
src: 'app.js',
dest: 'app.build.js'
});
});
gulp.task('watch', function () {
gulp.watch(['**/*'], ['ngbuild']);
});
gulp watch
Grunt
var grunt = require('grunt');
var ngbuild = require('ngbuild');
grunt.initConfig({
watch: {
files: ['**/*'],
tasks: ['ngbuild']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('ngbuild', function () {
ngbuild({
src: 'app.js',
dest: 'app.build.js'
});
});
grunt watch
На этом все. Жду ваши предложения и замечания
Автор: galkinrost