node package manager

ngbuild

NGBUILD is lightweight tool for build your Angular.js app on the fly.

NGBUILD

NGBUILD is lightweight tool for build your Angular.js app on the fly.
Example project - https://github.com/galkinrost/angular-super-seed

Installation

For using from the comman-line install the package globally

npm install -g ngbuild

For using in the project

npm install --save ngbuild

Plugins

Grunt - https://github.com/galkinrost/grunt-ngbuild
Gulp - https://github.com/galkinrost/gulp-ngbuild

Example

/app.js

angular.module('App',['controllers.js']);

/controllers.js

angular.module('App.controllers',[]);

result

angular.module('App.controllers',[]);
angular.module('App',['App.controlers']);

Usage

var ngbuild=ngbuild;
ngbuild.build({
    src:'app.js',
    dest:'app.build.js'
});
 
var content=ngbuild.buildSync({
    src:'app.js'
});

Templates

Both html and jade
/app.js

angular.module('App',[],function ($routeProvider) {
    $routeProvider
        .when("/url1", {
            templateUrl: "template.html"
        })
        .when("/url2", {
            templateUrl: "template.jade"
        });
}).directive('html',function(){
    return{
     templateUrl:"template.html"
    }
}).directive('jade',function(){
    return{
     templateUrl:"template.jade"
    }
});

result

angular.module('App',[],function ($routeProvider) {
    $routeProvider
        .when("/url1", {
            template: "<span>template.html</span>"
        })
        .when("/url2", {
            template: "<span>template.jade</span>"
        });
}).directive('html',function(){
    return{
     template:"<span>template.html</span>"
    }
}).directive('jade',function(){
    return{
     template:"<span>template.jade</span>"
    }
});

CSS

/app.js

angular.module('App',[],function ($routeProvider) {
    $routeProvider
        .when("/url1", {
         styles:"styles.css",
            templateUrl: "template.html"
        })
})
...

result

angular.module('App',[],function ($routeProvider) {
    $routeProvider
        .when("/url1", {
            template: "styles{font-size:10px}<span>template.html</span>"
        })
})
...

Folders

directives folder

/app.js
/directives
    /module.js
    /directive.js

/app.js

angular.module('App',['directives']);

/directive/module.js(!special name of file with module declaration)

angular.module('App.directives',[]);

/directives/directive.js

angular.module('App.directives')
    .directive('directive',function(){
    ...
    });

result

angular.module('App.directives',[]);
angular.module('App.directives').directive('directive',function(){
...
});
angular.module('App',['App.directives']);

Subfolders

directives folder

/app.js
/directives
    /module.js
    /directive/
     directive.js
        template.html
        styles.css

/app.js

angular.module('App',['directives/*']);

/directives/directive/directive.js

angular.module('App.directives')
    .directive('directive',function(){
     return{
     templateUrl:'template.html',
            styles:'styles.css'
     }
    });

External libs

/app.js

angular.module('App',['!/lib/jquery.js']);

result

/**
* JQUERY HERE
**/
angular.module('App',[]);

Pathes

  • relative - 'file_path'
  • absolute - '/file_path'
  • library - '!(/)file_path
  • subdirectory - (/)directory_path/*

License

MIT