AngularJS Simple Router Example

AngularJS Simple Router Example

by vadimb

HTML

<script type="text/ng-template" id="embedded.home.html">
    <h1> Home </h1>
</script>

<script type="text/ng-template" id="embedded.about.html">
    <h1> About </h1>
</script>

<div ng-app="FunnyAnt.Examples.Routing" ng-controller="HeaderController"> 
      <div id="navigation">  
      <a href="#/home" ng-class="{active: isActive('home')}">Home</a>
      <a href="#/about" ng-class="{active: isActive('about')}">About</a>
      </div>
    
    <div ng-view></div>
</div>

CSS

.active {color: red}

JavaScript

angular.module('FunnyAnt.Examples.Routing', []);

 angular.module('FunnyAnt.Examples.Routing')
.controller('HeaderController', function ($scope, $location) {
  $scope.isActive = function(path) {
	  console.log($location.path());
  	return $location.path() == '/' + path;
  }
});

 angular.module('FunnyAnt.Examples.Routing')
.controller('HomeController', function ($scope) {});

 angular.module('FunnyAnt.Examples.Routing')
 .controller('AboutController', function ($scope) {});

 angular.module('FunnyAnt.Examples.Routing')
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});