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

Пользователь

от bill.walker , в категории: Компьютерные технологии , 8 месяцев назад

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

Facebook Vk Ok Twitter Telegram Whatsapp

1 ответ

Пользователь

от larue , 8 месяцев назад

@bill.walker 

В AngularJS маршрутизация осуществляется с помощью встроенного модуля $routeProvider.


Шаги для осуществления маршрутизации:

  1. Импортировать модуль "ngRoute" в приложение:
1
var app = angular.module('myApp', ['ngRoute']);


  1. Определить маршруты в конфигурации модуля:
 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. Создать HTML-шаблоны для каждого маршрута:
 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. Добавить ссылки на маршруты в HTML:
1
2
3
<a href="#!/">Main</a>
<a href="#!/products">Products</a>
<a href="#!/services">Services</a>


Когда пользователь переходит по ссылке на маршрут, AngularJS загружает соответствующий HTML-шаблон и вставляет его в элемент ng-view.