Using includes with Angular.js to organize your UI modules.

If you are writing any non trivial web application you will surely notice that using a single view for your main page doesn’t allow for a good separation of concerns.

Most screens will deal with a few concerns, specially if our application wants to provide some notification area or summary information. This is specially problematic if you are working in a dashboard or control center type of application.

Angular have a nice directive to help you to separate your UI in discreet components in the way of include files.

This example is very contrive but should suffice to illustrate the point.

Let’s take the following code for example:

    <div class="row-fluid">
        <div data-ng-controller="RepositoriesCtrl">
            <ul>
                <li data-ng-repeat="repository in repositories">{{repository.name}}</li>
            </ul>
        </div>
        <div data-ng-controller="IssuesCtrl">
            <ul>
                <li data-ng-repeat="issue in issues">{{issue.id}} - {{issue.name}}</li>
            </ul>
        </div>
    </div>

We want to move the list of repositories into it’s own file and the same for the list of issues. We will create to partial files, repository-list.html and issues.html and we move the relevant code in there.

For example, the repository-list.html file now looks like this:

    <ul data-ng-controller="RepositoriesCtrl">
        <li data-ng-repeat="repository in repositories">{{repository.name}}</li>
    </ul>

We change our main view to use those includes.

    <div class="row-fluid">
        <div data-ng-include data-src="'partials/repository-list.html'"></div>
        <div data-ng-include data-src="'partials/issues.html'"></div>
    </div>

As you can see is as easy as add the data-ng-include attribute and point it to the partial file using the data-src attribute.

Notice the quotes in the path to the view, if you don’t add then, Angular will treat it as an expression and try to evaluate it instead of include the template.

I found this a good approach to separate my UI in composable widgets.