Маршрутизация AngularJS позволяет нам получить доступ к различному контенту через разные URL -адреса.
AngularJS может реализовать веб-приложение для одного страницы (SPA) для мультипроводов.
Обычно наш URL -адрес http://runoob.com/first/page , но в одном страничном веб -приложении Angularjs реализовано через теги #+, например:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Давайте сначала посмотрим на метод свойств объекта конфигурации $ routeprovider:
Настройка маршрутизации разрешения объекта:
$ routeprovider.when (url (имя маршрутизации), {Template: String (String String String String), Templateurl: String (URL -адрес пути шаблона), контроллер: строка, функция или массив (создайте контроллер в текущем шаблоне и генерируйте новую $ Scope), Controlleras: String alias alias), Redirectto: redirece ardectemess), redirece arderememesse), redirece arderecemesse), redirece ardereme), redirece arderece), redirece ardereme), redirece ardereme), redirece ardereme. (модуль, от которого зависит текущий маршрут)});Общие шаги по реализации маршрутизации:
Шаг 1: Импорт модуля ngroute
<script type = "text/javascript" src = "js/angular-route.min.js"> </script>
Шаг 2: Используйте Ngroute в модуле приложения
Angular.Module ("RouteApp", ["ngroute"])
Шаг 3: Используйте команду NG-View
<div ng-view ng-controller = 'defaultctrl'> </div>
Шаг 4: Настройте правила маршрутизации $ routeprovider
.... config (['$ routeprovider', function ($ routeprovider) {$ routeprovider .when ('/home', {templateurl: 'home.tpl.html', controller: 'homectrl',}). 'Phone.html',}) .when ('/oreth', {templateurl: 'oreth.tpl.html', controller: 'otherctrl',})}]) ...Шаг 5: Используйте маршрутизацию через гиперссылки
<ul> <li> <a href = "#/home"> Home </a> </li> <li> <a href = "#/computer"> компьютер </a> </li> <li> <a href = "#/phone"> Mobile </a> </li> <li> <a href = "#/fore"> Другое </a> </li> </li> <li>
Полный случай:
1 route.html Page
<html> <head> <meta charset = "UTF-8"> <Tite> angularJS Encement </title> <link rel = "styleSheet" type = "text/css" href = "css/bootstrap.min.cs"> </head> <body ng-app href = "#/home"> home </a> </li> <li> <a href = "#/computer"> компьютер </a> </li> <li> <a href = "#/phone"> mobile </a> </li> <li> <a href = "#/firth"> Другое </a> </li> </ul> <div ng-view-view-view-view-view. ng-controller = 'defaultctrl'> </div> <script type = "text/javascript" src = "js/jquery.min.js"> </script> <script type = "text/javascript" src = "js/bootstrap.min.js"> </script> <script type = "js/bootstrap.min.js"> </script> <script = "js/javascript/javascript" " src = "js/angular.min.js"> </script> <script type = "text/javascript" src = "js/angular-route.min.js"> </script> <script type = "text/ng-templete" id = "home.tpl.html"> <h1> {{data}} <//script> </h1ipt> </h1ipt> <h1> </h1ipt> </h1ipt. type = "text/ng-template" id = "ore.tpl.html"> <h1> {{data}} </h1> </script> <script type = "text/javascript"> angular.module ("routeapper", ["ngroute"]) .config (['$ routeprovid . When ('/home', {templateurl: 'home.tpl.html', controller: 'homectrl',}). 'sother.tpl.html', Controller: 'otherctrl',})}]) .controller ('defaultctrl', function ($ scope) {$ scope.competers = [{id: 0, имя: "ACR", категория: "Test", цена: 1.25}, {id: 1, name: "lenovo:". ID: 2, имя: «Apple», категория: «тест», цена: 4.25}]; }]; </html>2. Computer.html Page
<div> <table> <thead> <tr> <th> name </th> <Th> категория </th> <Th> Price </th> <Th> {{data}} </th> </tr> </thead> <tbody> <ttr ng-repeat = "item в компьютерах"> <td> {{eme.name}} </td> <td> {{item.category}} </td> <td> {{item.price | Валюта}} </td> <td> <кнопка ng-click = "deleteproduct (item)"> delete </button> <a href = "/edit/{{item.id}}" ng-click = "editorcrecreteproduct (item)"> edit </a> <toom ng-click = "incromprice (item)"> </aa> <tool-click = " </tr> </tbody> </table> <div> <кнопка ng-click = "editorcreateproduct ()"> Добавить </a> </div> </div>3. Phone.html Page
<div> <table> <thead> <tr> <th> name </th> <Th> категория </th> <Th> price </th> <Th> {{data}} </th> </tr> </theAd> <tbody> <ttr ng-repeat = "item в телефонах"> <td> {{eme.name}} </td> <td> {{item.category}} </td> <td> {{item.price | Валюта}} </td> <td> <кнопка ng-click = "deleteproduct (item)"> delete </button> <a href = "/edit/{{item.id}}" ng-click = "editorcrecreteproduct (item)"> edit </a> <toom ng-click = "incromprice (item)"> </aa> <tool-click = " </tr> </tbody> </table> <div> <кнопка ng-click = "editorcreateproduct ()"> Добавить </a> </div> </div>Нажмите на главную страницу
Нажмите «Компьютер»
Нажмите «Мобильный»
Нажмите на другие
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.