Creating a New View

The Angular Template comes with a starter top-level view (a.k.a. a "page") called Dashboard. Let's say we want to add a new view called Insights. To do this, follow the steps listed below:

1. Open src/app.module.js and add app.insights to the module object. It should look like this:

   angular.module('app', [
       // Common (everybody has access to these)
       'app.core',
   
       // Features (listed alphabetically)
       'app.approot',
       'app.dashboard',
       'app.insights',
       'app.topnav'
   ]);

2. Open `src/core/core.router.js` and add a new state to `configFunction`. It should look like this:
    ```javascript
    $stateProvider
        .state('dashboard', {
            url: '/',
            template: '<tmpl-dashboard></tmpl-dashboard>'
        })
        .state('insights', {
            url: '/insights',
            template: '<tmpl-insights></tmpl-insights>'
        });

3. Duplicate the src/components/dashboard directory and rename it to insights. Change filenames to insights.directive.js, insights.html and insights.module.js.

4. In the files insights.directive.js, insights.html and insights.module.js, change all instances of dashboard to insights and Dashboard to Insights (case-sensitive search and replace).

5. Open src/components/topnav/topnav.html and add a list item to the nav for our new page. It should look like this:

   <li ui-sref-active="active">
       <a ui-sref="dashboard" ng-click="vm.isCollapsed = !vm.isCollapsed">Dashboard</a>
   </li>
   <li ui-sref-active="active">
       <a ui-sref="insights" ng-click="vm.isCollapsed = !vm.isCollapsed">Insights</a>
   </li>

That's it! You should now see a new page called *Insights*.