Post
Ask Question

How To Use ng-view In AngularJS

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>  
  5.   
  6. <body ng-app="myApp">  
  7.   
  8. <p><a href="#/">Main</a></p>  
  9.   
  10. <a href="#red">Red</a>  
  11. <a href="#green">Green</a>  
  12. <a href="#blue">Blue</a>  
  13.   
  14. <div class="ng-view"></div>  
  15.   
  16. <script>  
  17. var app = angular.module("myApp", ["ngRoute"]);  
  18. app.config(function($routeProvider) {  
  19.     $routeProvider  
  20.     .when("/", {  
  21.         templateUrl : "main.htm"  
  22.     })  
  23.     .when("/red", {  
  24.         templateUrl : "red.htm"  
  25.     })  
  26.     .when("/green", {  
  27.         templateUrl : "green.htm"  
  28.     })  
  29.     .when("/blue", {  
  30.         templateUrl : "blue.htm"  
  31.     });  
  32. });  
  33. </script>  
  34.   
  35. <p>Click on the links.</p>  
  36.   
  37. <p>This example uses the ng-view directive as a class attribute to a DIV element.</p>  
  38. </body>  
  39. </html>