Как осуществить маршрутизацию в AngularJS?

1

var app = angular.module('myApp', ['ngRoute']);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/products", {
    templateUrl : "products.htm"
  })
  .when("/services", {
    templateUrl : "services.htm"
  })
  .otherwise({
    redirectTo: "/"
  });
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<div ng-view></div>

<!-- Шаблон для маршрута "/" -->
<script type="text/ng-template" id="main.htm">
  <h1>Main Page</h1>
</script>

<!-- Шаблон для маршрута "/products" -->
<script type="text/ng-template" id="products.htm">
  <h1>Products Page</h1>
</script>

<!-- Шаблон для маршрута "/services" -->
<script type="text/ng-template" id="services.htm">
  <h1>Services Page</h1>
</script>

1
2
3

<a href="#!/">Main</a>
<a href="#!/products">Products</a>
<a href="#!/services">Services</a>