Поиск по сайту:

Пример маршрутизации AngularJS — ngRoute, $routeProvider

Сегодня мы рассмотрим пример маршрутизации AngularJS с использованием модуля ngRoute и $routeProvider. Ранее мы рассмотрели контроллеры AngularJS.

Маршрутизация в AngularJS

нгрут

Модуль AngularJS ngRoute предоставляет услуги маршрутизации, глубинных ссылок и директив для приложений angular. Нам нужно загрузить скрипт angular-route.js, содержащий модуль ngRoute, с официального сайта AngularJS, чтобы использовать функцию маршрутизации. Вы также можете использовать CDN в своем приложении, чтобы включить этот файл. В этом уроке мы будем использовать Google CDN. https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js Если вы связываете этот файл со своим приложением, вы можете добавить его на свою страницу с кодом ниже.

<script src="angular-route.js">

Если вы хотите включить его из Google CDN, используйте приведенный ниже код.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>

Затем загрузите модуль ngRoute в свое приложение AngularJS, добавив его в качестве зависимого модуля, как показано ниже.

angular.module('appName', ['ngRoute']);

ngView

Директива ngView используется для отображения HTML-шаблонов или представлений в указанных маршрутах. Каждый раз, когда изменяется текущий маршрут, включенное представление изменяется вместе с ним в соответствии с конфигурацией службы $route.

$routeProvider

$routeProvider используется для настройки маршрутов. Мы используем ngRoute config() для настройки $routeProvider. config() принимает функцию, которая принимает $routeProvider в качестве параметра, и конфигурация маршрутизации входит в функцию. $routeProvider имеет простой API, принимающий метод when() или иначе().

Синтаксис маршрутизации AngularJS

Следующий синтаксис используется для настройки маршрутов в AngularJS.

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

app.config(function($routeProvider) {
	$routeProvider
		.when('/view1', {
			templateUrl: 'view1.html',
			controller: 'FirstController'
		})
		.when('/view2', {
			templateUrl: 'view2.html',
			controller: 'SecondController'
		})
		.otherwise({
			redirectTo: '/view1'
		});
});

Метод when() принимает путь и маршрут в качестве параметров. путь является частью URL-адреса после символа #. route содержит два свойства — templateUrl и controller. Свойство templateUrl определяет, какой HTML-шаблон AngularJS должен загружать и отображать внутри div с помощью директивы ngView. Свойство контроллера определяет, какие контроллеры следует использовать с шаблоном HTML. Когда приложение загружается, путь сопоставляется с частью URL-адреса после символа #. Если ни один путь маршрута не соответствует заданному URL-адресу, браузер будет перенаправлен на путь, указанный в функции else().

Пример маршрутизации AngularJS

Теперь давайте рассмотрим простой пример, чтобы понять маршрутизацию AngularJS. Сначала мы определим модуль, несколько маршрутов, создадим контроллеры и создадим несколько представлений. Наконец, мы создадим страницу оболочки нашего приложения для хранения нескольких представлений.

  1. Создайте модуль с именем mainApp и загрузите ngRoute как зависимый модуль.
  2. Настройте маршруты с помощью $routeProvider.
  3. В примере мы используем два пути: /home и /viewStudents.
  4. В этом примере мы используем только один контроллер, StudentController
  5. StudentController инициализируется массивом учащихся и сообщением. Мы будем показывать это сообщение на главной странице, а список учащихся — на странице viewStudents.
  6. Сохраните этот файл как main.js

main.js

var mainApp = angular.module("mainApp", ['ngRoute']);

mainApp.config(function($routeProvider) {
	$routeProvider
		.when('/home', {
			templateUrl: 'home.html',
			controller: 'StudentController'
		})
		.when('/viewStudents', {
			templateUrl: 'viewStudents.html',
			controller: 'StudentController'
		})
		.otherwise({
			redirectTo: '/home'
		});
});

mainApp.controller('StudentController', function($scope) {
	$scope.students = [
		{name: 'Mark Waugh', city:'New York'},
		{name: 'Steve Jonathan', city:'London'},
		{name: 'John Marcus', city:'Paris'}
	];

	$scope.message = "Click on the hyper link to view the students list.";
});

Например, если URL имеет вид https://www.journaldev.com/index.html#/home, часть URL после # соответствует /home, будет загружен home. html, и если он соответствует /viewStudents, он загрузит viewStudents.html на страницу оболочки. Если ничего не совпадает, то оно будет изменено, и страница будет перенаправлена на home.html. Теперь мы можем создавать представления и сохранять их как файлы home.html и viewStudents.html. home.html

<div class="container">
	<h2> Welcome </h2>
	<p>{{message}}</p>
	<a href="#/viewStudents"> View Students List</a>
</div>

Это стандартная страница нашего приложения. В этом представлении мы просто распечатываем сообщение, которое мы уже инициализировали в StudentController. Вы также можете увидеть ссылку на страницу viewStudents. viewStudents.html

<div class="container">
	<h2> View Students </h2>
	Search:
	<br/>
		<input type="text" ng-model="name" />
	<br/>
	<ul>
		<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
	</ul>

	<a href="#/home"> Back</a>
</div>

В приведенном выше представлении вы можете увидеть список студентов с возможностью поиска. Наконец, выполните следующие шаги, чтобы завершить пример приложения маршрутизации AngularJS.

  • ng-app автоматически загружает наше приложение mainApp
    • Директива
  • ngView является заполнителем представлений - home.html и viewStudents.html
  • Включить angular.min.js и angular-route.min.js
  • Включите main.js, который мы создали на предыдущих шагах.
  • Сохраните файл как index.html

index.html

<!DOCTYPE html>
<html>
	<head lang="en">
	  <meta charset="utf-8">
	  <title>AngularJS Routing</title>

	</head>
	<body>

	  <div ng-app="mainApp">
		<ng-view></ng-view>
	  </div>

	  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
	  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
	  <script type="text/javascript" src="main.js"></script>
	</body>
</html>

Это все для нашего примера маршрутизации AngularJS. Наше приложение готово к запуску.

Запустите ваше приложение

  • Сохраните все файлы в одном каталоге.
  • откройте index.html в браузере
  • Попробуйте нашу онлайн-демонстрацию.

Пример онлайн-демонстрации маршрутизации AngularJS