El enrutamiento AngularJS nos permite acceder a diferentes contenidos a través de diferentes URL.
AngularJS puede realizar una aplicación web de una sola página (SPA) para múltiples vistas.
Por lo general, nuestra URL es http://runoob.com/first/page , pero en una sola página, la aplicación web AngularJS se implementa a través de #+ etiquetas, por ejemplo:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Primero veamos el método de propiedades del objeto de configuración de $ Routeprovider:
Enrutamiento Configuración de la resolución del objeto:
$routeProvider.when(url(routing name), { template: string(template prompt string), templateUrl: string(template path URL), controller: string, function or array (create the controller in the current template and generate a new $scope scope), controllerAs: string(controller alias), redirectTo: string, function(redirect address), resolve: object<key, function> (módulo en el que depende la ruta actual)});Los pasos generales para implementar el enrutamiento:
Paso 1: importe el módulo ngroute
<script type = "text/javaScript" src = "js/angular-route.min.js"> </script>
Paso 2: use ngroute en el módulo de aplicación
Angular.module ("RouteApp", ["ngroute"])
Paso 3: use el comando ng-view
<Div ng-view ng-Controller = 'Defaultctrl'> </div>
Paso 4: Configurar $ Routeprovider Reglas de enrutamiento
.... config (['$ RoutepRoVider', function ($ rututeprovider) {$ ruteProvider .When ('/home', {TemplateUrl: 'home.tpl.html', controlador: 'homectrl',}) .When ('/informat', {TemplateUrl: 'Computer.html',}) .When ('/Teléfono',: TemplateUrl: 'Phone.html',}) .When ('/Other', {TemplateUrl: 'Other.tpl.html', controlador: 'OtherCtrl',})}]) ...Paso 5: Use el enrutamiento a través de hipervínculos
<ul> <li> <a href = "#/home"> home </a> </li> <li> <a href = "#/computadora"> computadora </a> </li> <li> <a href = "#/phone"> mobile </a> </li> <li> <a href = "#/otros"> otros </a> </li> </ul>
Caso completo:
1 ruta.html página
<html> <fead> <meta charset = "utf-8"> <title> angularjs enrutamiento instancia </title> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css"> </head> <body ng-dapp = 'routerApp'> <ul> <li> <a href = "#/home"> home </a> </li> <li> <a href = "#/computadora"> computadora </a> </li> <li> <a href = "#/phone"> móvil </a> </li> <li> <a href = "#/otros"> otros </a> </li> </ul> <div Ng-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> <type type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javaScript" src = "js/angular-route.min.js"> </script> <script type = "text/ng-tmplate" id = "home.tpl.html"> <h1> {{data}}}} <h1> <h1> <script <script <script <script <script <script type = "text/ng-template" id = "otro.tpl.html"> <h1> {{data}} </h1> </script> <script type = "text/javaScript"> angular.module ("rutinEpp", ["ngroutee"]). .When ('/home', {TemplateUrl: 'home.tpl.html', controlador: 'homectrl',}) .When ('/Computer', {TemplateUrl: 'Computer.html',}) .When ('/Phone', {TemplateUrl: 'Phone.html',}) .When ('/OTRO', {TEMPLATA, {TEMPLATIS 'Other.tpl.html', Controller: 'OtherCtrl',})}]) .Controller ('Defaultctrl', function ($ scope) {$ scope.comterters = [{id: 0, nombre: "ACR", Categoría: "Test", Price: 1.25}, {Id: 1, Nombre: "Lenovo", Categoría: "Test", Precio, precio: 1.25}, {Id: 1, Nombre: "Lenovo", Categoría: "Test", Precio, precio: 1.25}, {Id: 1, Nombre: "Lenovo", Categoría: "Test", Precio, precio: 1.25}, {id: 1, nombre: "Lenovo", Categoría: "Test", Precio, precio: 1.25}, {id: 1, nombre: "lenovo", categoría: "Test", precio: 2.45},}, { id: 2, nombre: "Apple", Categoría: "Test", Price: 4.25}]; }];}) .controller ("homectrl", function ($ scope, $ ruta) {$ scope. $ ruta = $ ruta; $ scope.data = "home home";}) .controller ("otherctrl", function ($ scope, $ ruta) {$ alcance. $ ruta = $ ruta; $ escopo </html>2.Computer.html Página
<iv> <topla> <thead> <tr> <th> name </th> <th> categoría </th> <th> precio </th> <th> {{data}} </th> </tr> </thead> <tbody> <ttr ng-repeat = "elemento en los computador <TD> {{item.category}} </td> <td> {{item.price | moneda}} </td> <td> <botón ng-click = "deletEproduct (item)"> eliminar </boton> <a href = "/edit/{{item.id}}" ng-click = "editorCreatePreduct (item)"> editar </a> <botón ng-click = "incrementPrice (item)">+</</button> </toTh </tbody> </table> <div> <button ng-click = "editorCreatePrroduct ()"> Agregar </a> </div> </div>3. Página de phone.html
<div> <table> <thead> <tr> <th> name </th> <th> category </th> <th> precio </th> <th> {{data}} </th> </tr> </thead> <tbody> <ttr ng-repeat = "elemento en los teléfonos"> <td> {item.name}} </td>>>>>> <TD> {{item.category}} </td> <td> {{item.price | moneda}} </td> <td> <botón ng-click = "deletEproduct (item)"> eliminar </boton> <a href = "/edit/{{item.id}}" ng-click = "editorCreatePreduct (item)"> editar </a> <botón ng-click = "incrementPrice (item)">+</</button> </toTh </tbody> </table> <div> <button ng-click = "editorCreatePrroduct ()"> Agregar </a> </div> </div>Haga clic en la página de inicio
Haga clic en "computadora"
Haga clic en "Móvil"
Haga clic en Otro
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.