Angular Routing Example

by yudhir bhattarai

HTML

<div ng-app="myApp">

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

    <script type="text/ng-template" id="page1.html">
         {{something}}
    </script>

    <script type="text/ng-template" id="page2.html">
         {{something}}
    </script>

    <a href="#page1">Page 1</a> |
    <a href="#page2">Page 2</a>

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

JavaScript

var myApp = angular.module('myApp',[],function($routeProvider) {        
    console.log($routeProvider);
    $routeProvider
        .when('/home',{templateUrl:'home.html'})
        .when('/page1',{templateUrl:'page1.html', controller:'ctrl1'})
        .when('/page2',{templateUrl:'page2.html', controller:'ctrl2'})
        .otherwise({redirectTo:'/home'});
    
});
    
function ctrl1($scope){
    $scope.something = 'Hello from page 1';
}
function ctrl2($scope){
    $scope.something = 'Hello from page 2';
}