O roteamento do AngularJS nos permite acessar conteúdo diferente através de diferentes URLs.
O AngularJS pode realizar o aplicativo da Web de página única (SPA) para várias visualizações.
Normalmente, nosso URL é http://runoob.com/first/page , mas em um aplicativo da web de uma única página Angularjs é implementado por meio de tags #+, por exemplo:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
Vamos primeiro olhar para o método de propriedades do objeto de configuração do $ RouteProvider:
ROTEGING CONFIGURAÇÃO RESOLUÇÃO DE ACEITORES:
$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> (module that the current route depende de)});As etapas gerais para implementar o roteamento:
Etapa 1: importe o módulo NGROUTE
<script type = "text/javaScript" src = "js/angular- rote.min.js"> </script>
Etapa 2: Use NGROUTE no módulo de aplicativo
Angular.Module ("RouteApp", ["NGROUTE"])
Etapa 3: Use o comando NG-View
<div ng-view ng-controller = 'defaultCtrl'> </div>
Etapa 4: Configure as regras de roteamento de RouteProvider
.... Config (['$ RouteProvider', function ($ RouteProvider) {$ RouteProvider .When ('/Home', {templateurl: 'home.tpl.html', controlador: 'Hometrl',}) .when ('/computer', {modplyurl: 'Computerl',}). 'Phone.html',}) .When ('/outros', {templateurl: 'Other.tpl.html', Controller: 'Otherctrl',})}]) ...Etapa 5: Use o roteamento através de hiperlinks
<ul> <li> <a href = "#/home"> home </a> </li> <li> <a href = "#/computer"> computador </a> </li> <li> <a href = "#/telefone"> celular </a> </li> <li> <a href = "#/outros"> </a> </a>
CASO COMPLETO:
1 rota.html página
<html> <head> <meta charset = "utf-8"> <title> Instância de roteamento angularJS </ititle> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css" </head> <body ng -pp = 'routeapp'> href = "#/home"> home </a> </li> <li> <a href = "#/computador"> computador </a> </li> <li> <a href = "#/telefone"> celular </a> </li> <li> <a href = "#/outros" outros </a> </li> 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="text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javascript" src = "js/angular- rote.min.js"> </script> <script type = "text/ng-template" Id ".tpl.html "> <h1> {(ng-template" = "home.tpl.html"> <H1> {(ng-template "=" ". type = "text/ng-template" id = "other.tpl.html"> <h1> {{data}} </h1> </script> <script type = "text/javaScript"> angular.module ("routeApp", ["ngrotte"]) .config ('$ routerovrovador .WHEN ('/home', {templateurl: 'home.tpl.html', controlador: 'hometrl',}) .when ('/computador', {modplateurl: 'computerl.html',}) .when ('/telefone', {modplyurl: 'telefone.html',). 'other.tpl.html', controller : 'OtherCtrl', }) }]) .controller('defaultCtrl', function ($scope) { $scope.computers = [ { id: 0, name: "Acr", category: "Test", price: 1.25 }, { id: 1, name: "Lenovo", category: "Test", price: 2.45 }, { id: 2, nome: "Apple", categoria: "teste", preço: 4.25}]; }]; </html>2.Computer.html Página
<div> <table> <thead> <tr> <th> nome </th> <th> categoria </th> <th> preço </th> <th> {{data}} </th> </tr> </ty thead> <tbody> <Ttr ng-repeat = "Item em computadores"> <d> {{{{) <td> {{item.category}} </td> <td> {{item.price | moeda}} </td> <td> <botão ng-click = "DeleteProduct (item)"> delete </button> <a href = "/edit/{{item.id}}" ng-click = "editorcreateproduct (item)"> edit </a> <buttlick = " </tbody> </ table> <div> <button ng-click = "editorCreateProduct ()"> add </a> </div> </div>Página 3.Phone.html
<div> <table> <Thead> <tr> <th> nome </th> <th> categoria </th> <th> preço </th> <th> {{data}} </th> </tr> </ty thead> <tbody> <ttr ng-repeat = "item em telefones/td> <tbody> <td> {{item.category}} </td> <td> {{item.price | moeda}} </td> <td> <botão ng-click = "DeleteProduct (item)"> delete </button> <a href = "/edit/{{item.id}}" ng-click = "editorcreateproduct (item)"> edit </a> <buttlick = " </tbody> </ table> <div> <button ng-click = "editorCreateProduct ()"> add </a> </div> </div>Clique em Home Page
Clique em "Computador"
Clique em "Mobile"
Clique em outro
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.