Simple routing

• ng-view

• $route

• $routeProvider

• template - inline template

• templateUrl - URL of template file on server

• templateUrl - id of embedded template inside the Controller

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="simple_routing.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">


<h1>{{title}}</h1>
<a href="#">home</a>
<a href="#first">first</a>
<a href="#second">second</a>
<a href="#third">third</a>
 
<div ng-view></div>





<script type="text/ng-template" id="third.html">
<h2>Third Page</h2>
From the main HTML page.
</script>


</div>

angular.module("DemoApp", ['ngRoute'])
.controller("DemoController", ['$scope', function($scope) {
    $scope.title = "Simple Router Example";
}])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/first', {
            template: '<h2>First Page</h2> from the template in the code',
        }).
        when('/second', {
            templateUrl: 'second.html',
        }).
        when('/third', {
            templateUrl: 'third.html',
        }).
        otherwise({
            redirectTo: '/'
        });
}]);

<h2>Second Page</h2>
From the template on the disk.