- We can build reusable directive using AngularJS. For creating a directive and publishing it to NPM require some repetitive task like source directory,distribution directory,build task etc..To resolve this cumbersome work we have to create a boilerplate and publish it to NPM and then reuse it whenever we have to create a new directive.
- In this demo, “We have created a boilerplate for developing Angular directive which includes JSCS,GULP,KARMA,JASMINE,BOOTSTRAP3 and LESS”.
- The following screenshot shows the directory structure of our boilerplate.
- We can run this boilerplate using gulp serve command.The following screenshot shows the terminal with serve in execution.
- We can test this boilerplate using gulp test command.The following screenshot shows the terminal with test in execution.
- We can build this boilerplate using gulp build command.The following screenshot shows the terminal with build in execution.
- We have published this boilerplate in NPM module registry with name as ng-directive-gulp-boilerplate.You can use it to create a new AngularJS directory by installing it to your local system using npm i ng-directive-gulp-boilerplate command .The following screenshot shows the terminal with the boilerplate installation.
- The dependencies can be installed using npm install command.The following screenshot shows the terminal with dependencies installation.
- The code repo link of this boilerplate is as follows:-
- The published NPM module for the boilerplate can be found in the following URL:-
- The output of the directive will look like following screenshot:-