angularjs ui-router something in the code - html

Question

I am following MVA intro to Angularjs. I have two questions. First; is there any better tutorial website that you would suggest.
Second is using ui-router. I have been looking at it for hours; went looking for the answer, and just cant figure out what could possibly be wrong. Everything looks like the tutorial; the library came off of it; and everything was working in till I switched ng-route with ui-router(and all the href with ui-sref). I think the problem is in the mainApp module since the page is white (when I have had problems with the mainPageModule the navbar would show up but it would have {{event.something[0]}} listed across the top). This is driving me crazy.
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>

Answer 1

As suggested by #TOM you need to load angular-ui-router right after angular.js has loaded thereafter you could load mainApp.js.
You need to replace your all ui-sref directive at all places.
ui-sref="home" instead of ui.sref="home"

Answer 2

For anybody else who has this problem, the fundamental flaw was the order of the scripts at the bottom of the page. It matters. Second, my script mistake was not including comma's after the url's in the mainApp. Moving forward, I replaced all the ui.sref's with ui-sref's and it did work.
Thanks for your help, pankajparkar and Tom was great. Anyone else who is starting out and run's into thisproblem, check the console, it will tell you whats wrong