103 Main Template

Main template—index.html

The index.html is setting up your bas layout. This is the place where you can define the menu, include the ng-view and define a footer

Main controller

The first element

<div ng-cloak
     ng-controller="MainController as ctrl">

Defines the controller that should be used for the index.html. Of course all other views have their own controllers. ng-cloak is hiding everything in it during the initialisation of AngularJS. Otherwise it looks a bit unpleasing.

The next element is the

<div mw-ui>

The mw-ui directive is applying some basic styles and set up the required element for the toasts

Menu bar

Now we define the top navigation bar

<div mw-menu-top-bar>

  <img src="app/modules/main/assets/header-logo.png"> <!-- header logo -->

  <div mw-menu-top-entries> <!-- menu entries on the left side next to the logo-->
    <div mw-menu-entry
         label="{{'main.menu.start' | i18n}}"
         url="#/start"></div>
  </div>

  <div mw-menu-top-entries right="true"> <!-- menu entries on the right side -->
    <div mw-menu-entry
         icon="fa-language"> <!-- When menu-entries are transcluded it will be displayed as dropdown -->
      <div ng-repeat="locale in ctrl.locales"> <!-- creates locales as dropdown entries -->
        <div mw-menu-entry
             label="{{locale.name}}"
             action="ctrl.setLocale(locale.id)"></div> <!-- fn that should be called on click -->
      </div>
    </div>
  </div>

</div>

ng view

That is the part where the router appends the view for each route

<div mw-append-route-class class="view-holder">
  <div ng-view autoscroll="true"></div>
  <div mw-view-change-loader></div>
</div>

The mw-append-route-class appends the cssClass that was defined in the route config and should help to encapsulate the style for that view. So when you have the sample route config

$routeProvider
  .when('/xxx', {
    templateUrl: 'app/modules/xxx/templates/xxx.template.html',
    controller: 'XxxController',
    controllerAs: 'ctrl',
    cssClasses: 'xxx xxx2'
  });

It will append the class xxx and xxx2 to the element when the route is triggered. Your according sass file should look like this

.xxx{
  h2{
    color: red;
  }
}

This ensures that only h2 of that route view are red and not all h2 elements. If you want to make all h2 red you better should do that in the main/styles/_main.styles.scss

The directive mw-view-change-loader displays a loading spinner when a route change is in progress

footer

The directive mw-footer creates a fixed footer a bottom of the view. You can set one of the bootstrap colors as background color so mw-footer="primary" will create a footer with your $brand-primary as background color. Possible values are {default, success, danger, info, primary}