Angularjs маршрутизация
Возможность прыгать от одного представления о странице на другую имеет решающее значение для одностраничных приложений. По мере того, как приложения становятся все более и более сложными, нам нужен разумный способ управления интерфейсами, которые пользователи видят во время использования. AngularJS практикует, чтобы разбить представление на макет и представления шаблонов, и отобразить соответствующее представление в соответствии с URL -адресом, доступным в настоящее время пользователем.
В этой статье представлен простой пример маршрутизации AngularJS и упоминает некоторые концепции, которые она включает.
1. Страница макета
Цитата сценарии:
<script src = "../ scripts/jquery-1.9.1.min.js"> </script> <script src = "../ scripts/angular.min.js"> </script> <script src = "../ scripts/angular-route.min.js"> </script>
Макет страницы относительно проста:
<div> <ul> <li> <a href = "#page1"> Go Page 1 </a> </li> <li> <a href = "#page2"> Go Page 2 </a> </li> <li> <a href = "#rother"> на другую страницу </a> </li> </ul> </div> <div ng-view> </div> </li> </ul> </div> <div ng-view>
NG-View-это специальная директива, предоставленная модулем NGROUTE, которая сообщает AngularJS, где отображать шаблон. В этом примере мы поместили контент, который нам необходим, чтобы представить в DIV ниже. Вышеуказанные три ссылки указывают на три представления соответственно.
2. Страница шаблона
Создайте две страницы шаблонов, называемые Subpage_1.html и subpage_2.html, соответственно.
3. Конфигурация маршрутизации правил маршрутизации
angular.module ("myrouteapp", ["ngroute"]) .config (['$ routeprovider', function ($ routeprovider) {$ routeprovider. Когда ("/page1", {templateurl: "subpage_1.html"}). }). иначе ({redirectto: "/"});Загрузите модуль Ngroute в качестве зависимости в нашем приложении. Используйте функцию конфигурации для определения маршрутов в модулях или приложениях, а также используйте два метода, предоставленные AngularJS для определения маршрутов для приложений.
шаблон:
Приложение считывает представление через XHR (или считывает из $ templatecache) на основе пути, указанного в свойстве шаблона. Если этот шаблон можно найти и прочитать, AngularJS делает содержимое шаблона в элемент DOM с директивой NG-View.
redirectto:
Если значение свойства redirectto является строкой, путь будет заменен этим значением, и изменение маршрутизации будет запускаться в соответствии с целевым путем. Если значение свойства redirectto является функцией, путь будет заменен на возвращаемое значение функции, а изменение маршрутизации будет запускаться в соответствии с этим целевым путем.
Результаты бега
Нажмите Go Page 1
Нажмите Go Page 2
Приведенный выше код маршрута угловой маршрутизации - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.