AngularJS Simple Router Example

AngularJS Simple Router Example

by aman1981

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>

<script type="text/ng-template" id="modal.html">
  <h1> Modal </h1>
</script>

<div>
  <div id="navigation">
    <a href="#/home">Home</a>
    <a href="#/about">About</a>
  </div>

  <div ng-view></div>
</div>

JavaScript

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

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

 angular.module('FunnyAnt.Examples.Routing')
   .controller('AboutController', function($scope, $modal) {
     var modalInstance = $modal.open({
       templateUrl:'modal.html',
       controller: 'ModalController',
       backdrop: 'static',
       keyboard: false
     });

     modalInstance.result.then(function() {
       return;
     }, function() {
       $state.go('Home');
     });


   });

 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'
     });
   });