
Вкратце суть.
Есть файл, в котором объявляется наш главный модуль /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']);
/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
На этом все. Жду ваши предложения и замечания
ссылка на оригинал статьи http://habrahabr.ru/post/217749/
Добавить комментарий