Angularjs маршрутизация
В этой главе мы представим вам маршрутизацию AngularJS.
Маршрутизация AngularJS позволяет нам получить доступ к различному контенту через разные URL -адреса.
AngularJS может реализовать веб-приложение для одного страницы (SPA) для мультипроводов.
Обычно наш URL -адрес http://runoob.com/first/page, но в одном веб -приложении Angularjs реализуется через теги #+, например:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Когда мы нажимаем на любую из вышеуказанных ссылок, адрес, который мы запросили на сервер, одинаковы (http://runoob.com/). Потому что контент после номера # будет игнорироваться браузером при запросе его на сервер. Таким образом, нам нужно реализовать функцию контента после номера # на клиенте. Маршрутизация AngularJS помогает нам различать различные логические страницы и связывать разные страницы с соответствующим контроллером через тег #+.
На приведенном выше рисунке мы видим, что созданы два URL: /показывать и /addneworder. Каждый URL имеет соответствующий вид и контроллер.
Далее, давайте посмотрим на простой пример:
<html> <head> <meta charset = "UTF-8"> <Title> AngularJs Routaging Пример-новичок </title> </head> <body ng-app = 'RoutingDemoApp'> <h2> angularjs routing application </h2> <ul> <li> <a href = "#/"> Home </a> </li> <li> <li> <a href = "#/" href = "#/Computers"> Computers </a> </li> <li> <a href = "#/printers"> print </a> </li> <li> <a href = "#/blabla"> Другое </a> </li> </ul> <div ng-view> </div> src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script> Angular.Module ('RoutingDemoApp', ['ngroute']) .config (['$ routeprovider', function ($ routeprovider) {$ routeprovider. Когда ('/', {Template: 'Это домашняя страница'}). Когда ('/computer', {Template: 'Это компьютерная страница'}). . When ('/Printers', {Template: 'Это страница принтера'}) .о и то есть ({redirectto: '/'}); </script> </body> </html>Результаты работы:
Angularjs Routing Application
Пример анализа:
1. Загрузите файл JS, который реализует маршрутизацию: angular-route.js.
2. Он содержит модуль Ngroute в качестве модуля зависимости основного прикладного модуля.
Angular.Module ('RoutingDemoApp', ['ngroute'])
3. Используйте директиву Ngview.
<div ng-view> </div>
Содержание HTML в этом DIV изменится в соответствии с изменениями маршрута.
Настройка $ routeprovider, angularjs $ routeprovider используется для определения правил маршрутизации.
module.config (['$ routeprovider', function ($ routeprovider) {$ routeprovider. Когда ('/', {template: 'Это домашняя страница'}). .оно ({redirectto: '/'});}]);Функция конфигурации модуля AngularJS используется для настройки правил маршрутизации. Используя ConfigApi, мы просим, чтобы $ routeProvider был введен в нашу функцию конфигурации и определял наши правила маршрутизации с использованием $ routeprovider.whenapi.
$ routeprovider предоставляет нам функцию Whe (Path, Object) и в противном случае (Object) определяет все маршруты по порядку, а функция содержит два параметра:
Первый параметр - это правило URL или URL.
Второй параметр - это объект конфигурации маршрутизации.
Объект настроек маршрутизации
Маршрутизация AngularJS также может быть реализована через разные шаблоны.
Первый параметр $ routeprovider.when Function - это правило URL или регулярное URL, а второй параметр - это объект конфигурации маршрутизации.
Синтаксические правила для объектов конфигурации маршрутизации следующие:
$ routeprovider.when (url, {template: string, templateurl: string, controller: строка, функция или массив, Controlleras: String, redirectto: string, функция, разрешение: объект <ключ, функция>});Описание параметра:
шаблон:
Если нам просто нужно вставить простой HTML-контент в NG-View, используйте этот параметр:
. When ('/Computers', {Template: 'Это страница классификации компьютера'})
шаблон:
Если нам просто нужно вставить файл шаблона HTML в NG-View, используйте этот параметр:
$ routeprovider.when ('/computers', {templateurl: 'views/computers.html',});Приведенный выше код получит содержимое файла Views/Computers.html с сервера и вставьте его в NG-вид.
контроллер:
Функция, строка или тип массива, функция контроллера, выполненная в текущем шаблоне, генерирует новую область.
Controlleras:
Тип строки, укажите псевдоним для контроллера.
redirectto:
Адрес перенаправления.
решать:
Определяет другие модули, от которых зависит текущий контроллер.
Пример
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"> </script> <script type = "text/javascript"> angular.module ('ngrouteexample', ['ngroute']. $ route;}). Controller ('eableController', function ($ scope) {$ scope. $ route = $ route;}). config (function ($ routeprovider) {$ routeprovider. Когда ('/home', {templateurl: 'embedded.home.html', controller: 'homecontroller'}. Templateurl: 'incedded.about.html', контроллер: 'about controller'}). </h1> </script> <script type = "text/ng-template" id = "upedded.about.html"> <h1> о </h1> </script> <div> <div id = "навигация"> <a href = "#/home"> home </a> <a href = "#/about"> about </a> </ng-veire. </div> </div> </div> </body> </html>Результаты работы:
Homeabout
Дом
Выше приведено набор информации об маршрутизации AngularJS. Я надеюсь, что студенты, которые могут помочь программировать AngularJS.