ngbuild

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

Usage no npm install needed!

<script type="module">
  import ngbuild from 'https://cdn.skypack.dev/ngbuild';
</script>

README

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