ui-router work

http://angularjs.org/

by smlombardi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ui-view=""></div>

<script type="text/ng-template" id="modules/main/main.html">
  <div ui-view="header"></div>
  <div ui-view="content"></div>
  <div ui-view="footer"></div>
</script>


<script type="text/ng-template" id="modules/main/main.content.html">
  main content
</script>

<script type="text/ng-template" id="modules/footer/footer.html">
  footer
</script>
<script type="text/ng-template" id="modules/header/header.html">
  header
</script>
<script type="text/ng-template" id="modules/home/home.content.html">
  content
</script>

<script type="text/ng-template" id="modules/home/home.html">
  Nicks {{test}}
  <a ui-sref="main">Test</a>
</script>

CSS

nav {
  margin-bottom: 1em;
}

JavaScript

var myApp = angular.module("myApp", ["ui.router"]);

myApp.controller('HomeController', HomeController);

    myApp.config(function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/home');
			 $stateProvider.state('home', {
        url: '/home',
        controller: 'HomeController as home',
        templateUrl: 'modules/home/home.html'
        });
        
      $stateProvider.state('main', {
        url: '/main',
        views: {
          'header@main': {
            templateUrl: 'modules/header/header.html'
          },
          '': {
            templateUrl: 'modules/main/main.html'
          },
          'content@main':{
          	templateUrl: 'modules/main/main.content.html'
          },
          'footer@main': {
            templateUrl: 'modules/footer/footer.html'
          }
        }
      });
    });


function HomeController() {
  this.test = 'Hello';
  console.log("hello");
}