Custom angular modules

This tutorial explains how to add custom angular modules to your Hi app

Creating the run.js file

In order to load external modules, Hi-Framework expects you to have a javascript file named run in your web directory root.

 |-- webapp
        |-- WEB-INF
        |-- webroot
        |-- views
        |-- ...
        |-- run.js

Declaring the modules

To achieve this goal, you will have to set the Hi.$config.angular.modules variable with your modules names array.

Your run.js file will look like this:

    //Here we specify the angular modules to be loaded
    Hi.$config.angular.modules = ["module1","module2","moduleN"];


Including the modules scripts

The last step is to include the modules scripts in your template's HTML file:


    <!--The Hi-Framework script-->
    <script src="hi-es5.js"></script>

    <!--Your angular modules scripts-->
    <script src="path/to/module1-script.js"></script>
    <script src="path/to/module2-script.js"></script>
    <script src="path/to/module3-script.js"></script>

Make sure you include the angular modules scripts after the hi-es5.js script.

Injecting services into View controllers

Once you have included your custom angular modules, you might want to consume services that ship with any of your modules.
Here is how you inject the services into a view controller's $scope:

        //Use the services in here

You can inject as many services as you need, it will just work.

Github Repository