When developing an AngularJS application, one of the best things you can do for yourself is to streamline your workflow. If you’ve configured your build tools elegantly you can get in the flow and write code without refreshing your browser or worrying about adding new JavaScript files to your index.html. This article shows you how to use gulp-inject to auto-inject new JavaScript files into your index.html page. This means you don’t have to manually add new JavaScript dependencies into the page yourself. It also saves you from adding <script> tags for your own code (controllers, directives, services).

AngularJS and Stormpath

Stormpath provides integration support for AngularJS and Angular. These libraries allow you to easily add login, registration, forgot password and other Stormpath features to your Angular applications.

NOTE: When I say “AngularJS”, I mean Angular 1.x. “Angular” is the forward-looking name for Angular 2 and beyond.

In a previous tutorial, I showed you how to configure access control in your AngularJS UI and configure CORS with Stormpath’s Spring Boot starter. To begin, clone the project from that tutorial:

After cloning the project, run npm install to install all the JavaScript dependencies this project needs. Run the following commands (in two separate terminal windows) to see the application in action:

You will need a Stormpath account and your environment configured in order to start the Spring Boot application.

Stormpath Setup

The Stormpath Spring Boot Quickstart shows how to create an API key; here’s the abridged version:

From the Home tab of the Admin Console select Manage API Keys under the Developer Tools heading. Click the Create API Key button to trigger a download of a apiKey-{API_KEY}.properties file. Move the file to ~/.stormpath/apiKey.properties.

Add Gulp Inject

The gulp-inject plugin is a JavaScript, CSS and web component injection plugin for Gulp that allows you to inject file references into your index.html. After integrating it in your project, there’s a good chance you’ll never have to modify index.html again!

Open a terminal window and navigate to the project you cloned above. Install all the dependencies you’ll need:

At the top of gulpfile.js, load all of these plugins:

Add an “inject” task that handles adding files automatically to index.html:

The first .pipe in this file gathers a list of files from bower.json, while the second .pipe builds a list of CSS and JS files within the project. The gulp-angular-filesort plugin is recommended by gulp-inject for sorting AngularJS files in the proper order. It’s important that the script files are injected in the correct order to avoid module instantiation problems like Uncaught Error: [$injector:modulerr].

After adding the “inject” task, modify the “dist” and “serve” tasks to depend on it.

Modify index.html to add comments so gulp-inject knows where it should put its list of files. Change the CSS file listing at the top from this:

To this:

The “bower:css” section will hold the list of Bower CSS files, while “inject:css” will hold the list of CSS files in the application. The same logic applies for the JavaScript files. Replace the existing build:js and endbuild comments at the bottom of index.html with the following:

Now if you run gulp inject and view index.html, you’ll notice it adds <link> tags for the CSS files and <script> tags for the JavaScript files. However, it doesn’t add files for HTML5 Boilerplate or Bootstrap. This happens because the main-bower-files plugin reads the array of files defined in the main property of the packages’ bower.json. To fix this, add an overrides property to your bower.json that overrides the default values in these packages.

Test Production Build

To verify that this will work in a production environment—when all the files are concatenated together—run gulp dist and copy the contents of the dist directory to a web server. If you have Python installed, you can run the following command to startup a web server in the current directory.

Source Code

You can find the source code for this example on GitHub at https://github.com/stormpath/stormpath-angularjs-gulp-inject.

Learn More

You can use this same technique to auto-add new dependencies and tests to karma.conf.js. JHipster is a project generator that creates an application with AngularJS and Spring Boot. It uses gulp-inject to modify index.html and karma.config.js. You can generate a project using the following commands:

After your project is generated, you can view its Gulp files and see how Bower dependencies and tests are added to karma.conf.js. It’s very similar to how they’re added to index.html. You can also look at its karma.conf.js template on GitHub.

You can integrate Stormpath into a JHipster application using the handy Stormpath Module for JHipster. It’s easy to install and use in a JHipster 3.x project:

In a future blog post, I’ll show you how to override the default templates in Stormpath’s AngularJS SDK and translate them for multiple languages using angular-translate.

If you have any questions, please add a comment below or hit me up @mraible on Twitter.

Related: