angularjs ui-router что-то в коде

Я следую за инициалом MVA в Angularjs. У меня есть два вопроса. Первый; есть ли какой-нибудь лучший учебный веб-сайт, который вы бы предложили.

Во-вторых, используется ui-router. Я смотрел на него часами; пошел искать ответ и просто не мог понять, что может быть неправильно. Все выглядит как учебник; библиотека сошла с нее; и все работало, пока я не переключил ng-route с ui-router (и все href с ui-sref). Я думаю, что проблема в модуле mainApp, так как страница белая (когда у меня были проблемы с mainPageModule, навигационная панель появлялась, но она имела бы {{event.something [0]}}, указанную сверху). Это сводит меня с ума.

index.html

<div ng-include src="'app/event/directives/header.html'"></div>

  <div class="container">
    <ui-view></ui-view>
  </div>



<script src="./app/angular.min.js"></script>
<script src="./app/mainApp.js"></script>
<script src="./app/ui.router.js"></script>

<script src="./app/event/mainpageModule.js"></script>
<script type="text/javascript">
console.log("angular object",angular);
</script>
</body>

mainApp.js

angular.module('mainApp', ['mainPageModule','ui.router'])
.config(['$urlRouterProvider','$stateProvider',
    function ($urlRouterProvider, $stateProvider) {
        $stateProvider
        .state("home", {
            url: "/home",
            templateUrl: 'main.html'
        })
        .state("area", {
            url: "/area",
            templateUrl: "area.html"
        })
        .state("personal", {
            url: "/personal"
            templateUrl: "personal.html"
        })
        .state("contact", {
            url: "/contact"
            templateUrl: "contact.html"
        })
        $urlRouterProvider.otherwise('','/home')

      }])
.run([function () {
/* Run is when the app gets kicked off*/
console.log("Run hook");
}])

mainPageModule.js

(function(){

 angular.module('mainPageModule', [])
.factory('SiteName', [function () {


return {
    title:"Website Name"
};
}])
.config([function () {
console.log("Event Module:: config");
}])
.run([function () {
console.log("Event Module::running");
}])
.controller('navigationbarController', ['$scope', 'SiteName',function                           ($scope,SiteName)
     {    this.menu=[
    {
        name:"Website Name",
        href:"home.html"
    },
    {
        name:"Your Area",
        href:"area.html"
    },
    {
        name:"Personal",
        href:"personal.html"
    },
{
  name:"Contact",
  href:"contact.html"
}
]

this.index = 0;

this.setIndex=function(val)
{
    this.index = val;
    console.log("called")
}

this.getIndex=function(){
    return(this.index);
}

}])



})();

header.html

  <nav  ng-controller="navigationbarController as event" class="navbar     navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"    data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">{{event.title}}</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li  ng-click="setIndex(0)" ng-class="(index==0) ? 'active' : ''">
              <a ui.sref="home">{{event.menu[0].name}}</a>
            </li>
            <li ng-click="setIndex(1)"  ng-class="(index==1) ? 'active' : ''">
                <a ui.sref="area">{{event.menu[1].name}}</a>
            </li>
            <li ng-click="setIndex(1)"  ng-class="(index==1) ? 'active' : ''">
                <a ui.sref="personal">{{event.menu[2].name}}</a>
            </li>
             <li ng-click="setIndex(1)"  ng-class="(index==1) ? 'active' :  ''">
                <a ui.sref="contact">{{event.menu[3].name}}</a>
            </li>

        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>