предпосылка
Во-первых, вам нужно ввести угловой и угловой маршрут на странице. Обратите внимание, что вам нужно ввести угловой перед угловой маршрутом.
<script src = "../../ bower_components/angular/angular.js"> </script>
<script src = "../../ bower_components/angular-route/angular-route.js"> </script>
Это в основном потому, что Angular-route.js должен пройти в Window.angular Paramater, и этот параметр будет появляться только после загрузки Angular.
(function (window, angular, undefined) {'strict'; ... ngroutemodule.directive ('ngview', ngviewfactory); ...}) (window, window.angular);Вы можете скачать его на официальном веб -сайте или установить с помощью Bower.
объяснять
Функция маршрутизации реализована Сервисом RouteProvider и NG-View. NG-View эквивалентен предоставлению точки монтирования шаблона страницы. При переключении URL-адреса для прыжков будут размещены разные шаблоны страниц в месте NG-View; Затем RouteProvider используется для настройки картирования маршрута.
В целом есть два метода:
Когда (): настроить путь и параметры;
В противном случае: настройка других прыжков пути, вы можете думать об этом как по умолчанию.
Второй параметр, когда:
Контроллер: функция контроллера или имя соответствующего пути
Controlleras: дайте контроллеру имя псевдоним
Шаблон: шаблон страницы, соответствующий пути, появится на NG-View, например, «<div> xxxx </div>»
Шаблон: путь, соответствующий шаблону, такой как "src/xxx.html"
Решение: этот параметр фокусируется на том факте, что это свойство будет связывать службы или значения с контроллером, связанным с маршрутизацией, в форме объекта пары ключевых значений. Тогда значение результата выполнения или соответствующая ссылка на службу вводится в контроллер. Если разрешение является объектом обещания, он будет ждать, пока он успешно выполнится, прежде чем он будет введен в контроллер. В настоящее время контроллер будет ждать, пока выполнение приведет к решимости.
Для получения подробных примеров, пожалуйста, обратитесь к следующим примерам.
redirectto: перенаправить адрес
ReloadonSearch: установите, будет ли соответствующий шаблон загружен только при изменении адреса; Ни поиск, ни параметры не будут загружены.
caseinsensitivematch: путь чувствителен к случаям
Есть несколько часто используемых событий для маршрутизации:
$ routechangestart: это событие будет вызвано до прыжков маршрута
$ routeChangeSuccess: это событие запускается после успешного прыжка маршрута
$ routechangeerror: это событие запускается после неудачного прыжка с маршрутом
использовать
На странице запишите ссылку на кнопку на прыжок URL и тег NG-View
<div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> щелкнуть A </a> </li> <li> <a href = "#/b"> нажмите b </a> </li> </ul> <ng-view> </ng-view> <!
Среди них NG-View может рассматриваться как элемент или метка и т. Д.
Связанные конфигурации, которые необходимо определить в JavaScript
<script type = "text/javascript"> angular.module ("myApp", ["ngroute"]) .controller ("acontroller", функция ($ rack route) {$ scope.hello = "Hello, a! .controller ("myctrl", function ($ scope, $ location) {$ scope. $ on ("$ viewContentloaded", function () {console.log ("ng-view content загружен! console.log ("Изменение маршрута!"); }) .config (function ($ routeprovider, $ locationprovider) {$ routeprovider .when ('/a', {templateurl: 'a.html', controller: 'acontroller'}). Задержка: Функция ($ Q, $ Timeout) {var задержка = $ q.defer (); </script>В приведенном выше коде решающая способность в пути /B связана с методом задержки. Этот метод возвращает объект обещания и вернет результат только через 3 секунды. Поэтому страница B не будет успешно загружаться через 3 секунды.
Требуются два дополнительных HTML:
a.html:
<div ng-controller = "acontroller" style = "Высота: 500px; ширина: 100%; фоновый цвет: green;"> {{hello}} </div>
И B.html:
<div ng-controller = "bcontroller" style = "Высота: 2500px; ширина: 100%; фоновый цвет: blue;"> {{hello}} </div>
Таким образом, прыжок маршрута может быть достигнут.
На все коды можно ссылаться:
<html ng-app = "myApp"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "../ .../ bower_components/angular/angular.js"> </script> <script src = "../../ bower_components/angular-route/angular-route.js"> </script> <body> <div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> Нажмите </a> </li> <li> <a href = "#/b" <ng-view> </ng-view> <!-<div ng-view> </div>-> </div> <script type = "text/javascript"> angular.module ("myApp", ["ngroute"]) .controller ("acontroller", функция ($ scope, $ route) {$ scope.hello = "Hello"; .controller ("bcontroller", function ($ scope) {$ scope.hello = "hello, b!";}) .controller ("myctrl", функция ($ scope, $ location) {$ scope. $ on ("$ viewcontentladed", function () {console.log ("ng-View Content routed! $ rack. }) .config (function ($ routeprovider, $ locationprovider) {$ routeprovider .when ('/a', {templateurl: 'a.html', controller: 'acontroller'}). Задержка: Функция ($ Q, $ Timeout) {var задержка = $ q.defer (); </script> </body> </html>Выше приведено информация, разбирающая информацию о маршрутизации angularjs ng-route. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!