Главная

Ngbuild. Собираем Angular приложение без лишних слов

2014-03-31 в 18:34, admin, рубрики: AngularJS, build, javascript, Веб-разработка, метки: AngularJS, build

Ngbuild. Собираем Angular приложение без лишних слов Хочу поделиться своим билдером для 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'
    });
});