Integrating AngularUI-Utils into our project

In this step, we will take the ui-utils.js file we built in the previous section and use it in a sample project. The UI-Utils suite consists of a large and growing number of individual components. We will not be able to cover all of them here, but the ones we do cover should give you a good idea about what is available. For this, first make a copy of the code we came up with in the previous Tutorial. Alternatively, you can use the code in Tutorial01/Step08-Grunt-Protractor as a template.

Now, let’s do the following edits:

  1. Copy the ui-utils.js file from the ui-utils/bower_components/angular-ui-docs/build/ folder to the src/js/vendor/ folder of the current project.
  2. Open the package.json file and change the name of the application as you wish, for example:
    {
      "name": "fun-with-ui-utils",
      "version": "0.1.0",
      "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-concat": "~0.5.0",
        "grunt-contrib-copy": "~0.5.0",
        "grunt-karma": "~0.8.3",
        "grunt-protractor-runner": "^1.1.0",
        "grunt-targethtml": "~0.2.6",
        "karma": "~0.12.0",
        "karma-chrome-launcher": "~0.1.4",
        "karma-firefox-launcher": "~0.1.3",
        "karma-jasmine": "~0.1.5"
      }
  3. Edit src/index.html by inserting a script tag right below the script tag for the angular.js file, and change the name of our concatenated project JavaScript file, as the name change above will result in a different filename. The body of the index.html file now looks as follows:
    <body ng-app="myApp">
      <div ng-controller="helloWorldCtrl">
        <h1 hello-world name="name" id="greeting"></h1>
      </div>
      <!--(if target dev)><!-->
      <script src="bower/angular/angular.js"></script>
      <script src="js/vendor/ui-utils.js"></script>
      <script src="js/app.js"></script>
      <script src="js/controllers.js"></script>
      <script src="js/directives.js"></script>
      <!--<!(endif)-->
      <!--(if target dist)><!-->
         <script src="js/fun-with-ui-utils.js"></script>
      <!--<!(endif)-->
    </body>
  4. Run grunt dist to see whether our tests are still passing and whether the project is built without any problems.

Note

Dist folder

You will notice that the my-hello-world.js file is still in the dist/js/ folder, despite not being used any longer. You can safely remove it. You could also remove the entire dist folder and run the my-hello-world.js file again:

$ grunt dist

This will recreate the folder with only the required files. Deleting the folder before recreating it could become a part of the dist task by adding a clean task that runs first. Check out gruntFile.js of the UI-Utils project if you want to know how this is done.

Grunt task concat

Note that all JavaScript files get concatenated into one file during the concat task that runs in our project during the grunt dist task. These files need to be in the correct order, as the browser will read the file from beginning to end and it will complain when, for example, something references the angularjs namespace without that being loaded already. So, while it might be tempting to use wildcards as we did so far for simplicity, we shall name individual files in the correct order. This might seem tedious at first, but once you are in the habit of doing it for each file the moment you create or add it, it will only take a few seconds for each file and will keep you from scratching your head later. Let’s fix this right away.

Find the source property of the concat task in Gruntfile.js of our project:

        src: ['src/js/vendor/*.js','src/js/*.js'],

Now, replace it with the following:

        src: ['src/bower/angular/angular.js', 
              'src/js/vendor/ui-utils.js',
              'src/js/app.js',
              'src/js/controllers.js',
              'src/js/directives.js'],

We also need to edit the app module so that it loads UI-Utils. To do this, edit app.js as follows:

'use strict';
angular.module('myApp', ['myApp.controllers', 'myApp.directives', 'ui.utils'])

With these changes in place, we are in a pretty good shape to try out the different components in the UI-Utils suite. We will use a single project for all the different components; this will save us time by not having to set up separate projects for every single one of them.