premissa
Primeiro, você precisa introduzir rota angular e angular na página. Observe que você precisa introduzir o Angular antes da rota angular.
<script src = "../../ bower_components/angular/angular.js"> </script>
<script src = "../../ bower_components/angular-route/angular-route.js"> </script>
Isso ocorre principalmente porque o angular route.js precisa passar no parâmetro de janela.
(function (janela, angular, indefinido) {'use strict'; ... ngroutemodule.directive ('ngView', ngViewFactory); ...}) (janela, window.angular);Você pode baixá -lo no site oficial ou instalá -lo usando o Bower.
explicar
A função de roteamento é implementada pelo Serviço RouteProvider e NG-View. NG-View é equivalente a fornecer o ponto de montagem do modelo de página. Ao alternar o URL para saltar, diferentes modelos de página serão colocados no local do NG-View; Em seguida, o RouteProvider é usado para configurar o mapeamento de rota.
Existem dois métodos em geral:
Quando (): configurar o caminho e os parâmetros;
Caso contrário: configure outros saltos de caminho, você pode pensar nisso como padrão.
O segundo parâmetro de quando:
Controlador: a função do controlador ou o nome do caminho correspondente
Controlleras: Dê ao controlador um nome de alias
Modelo: o modelo de página correspondente ao caminho aparecerá em NG-View, como "<div> xxxx </div>"
templateurl: o caminho correspondente ao modelo, como "src/xxx.html"
Resolve: Este parâmetro concentra-se no fato de que essa propriedade vinculará serviços ou valores ao controlador relacionado à rota na forma de um objeto de par de valores-chave. Em seguida, o valor do resultado da execução ou a referência de serviço correspondente é injetada no controlador. Se a resolução for um objeto de promessa, ele esperará até que seja executado com sucesso antes de ser injetado no controlador. Neste momento, o controlador aguardará o resultado da execução na resolução.
Para exemplos detalhados, consulte os seguintes exemplos.
RedirectTo: Redirecionar o endereço
ReloDonsearch: Defina se o modelo correspondente será carregado apenas quando o endereço for alterado; Nem a pesquisa nem os parâmetros serão carregados.
caseinsensitivatch: o caminho é sensível ao caso
Existem vários eventos comumente usados para roteamento:
$ rotechangestart: Este evento será acionado antes da pular a rota
$ routeChangesuccess: este evento é acionado após o salto da rota ser bem -sucedido
$ routeChangeError: este evento foi disparado após o salto da rota falhar
usar
Na página, escreva o link do botão para o salto de URL e a tag NG-View
<Div ng-CONTROLLER = "myctrl"> <ul> <li> <a href = "#/a"> clique em </a> </li> <li> <a href = "#/b"> clique em B <-Ang-VIGEN> </li> </ul> <ng-View> </ng-View> <-<-
Entre eles, o NG-View pode ser considerado como um elemento ou um rótulo, etc.
Configurações relacionadas que precisam ser definidas em JavaScript
<script type = "text/javascript"> angular.module ("myApp", ["ngroute"]) .Controller ("acontroller", function ($ scope, $ rota) {$ scope.hello = "hello, a!";}) .Controller ("BCONTROLLER", funcle ($ "; .Controller ("myctrl", função ($ scope, $ location) {$ scope. $ on ("$ viewContentLoaded", function () {console.log ("ng-view content carregado!");}); $ scope. $ ("$ routechanTart", função (evento, seguinte, corrente). console.log ("mudança de rota!"); }) .config (function ($ routeProvider, $ locationProvider) {$ routeProvider .when ('/a', {templateurl: 'a.html', controlador: 'acontroller'}) .when ('/b', {modelo: 'b.html',). função ($ q, timeout) {VAR Atraso = $ Q.Defer (); </script>No código acima, a resolução no caminho /b está associada a um método de atraso. Este método retorna o objeto Promise e retornará o resultado somente após 3 segundos. Portanto, a página B não será carregada com sucesso após 3 segundos.
São necessários dois html adicionais:
a.html:
<div ng-controller = "acontroller" style = "altura: 500px; largura: 100%; cor de fundo: verde;"> {{hello}} </div>
E B.html:
<div ng-controller = "bController" style = "altura: 2500px; largura: 100%; cor de fundo: azul;"> {{hello}} </div>
Dessa forma, o salto de rota pode ser alcançado.
Todos os códigos podem ser referenciados:
<html ng-app = "myApp"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "../../ bower_components/angular/angular.js"> </script> < src = "../../ bower_components/angular-route/angular--route.js"> </script> <body> <div ng --controller = "myctrl"> <ul> <li> <a href = "#/a"> clique </a> <li> <li> <ng-view> </ng-view> <!-<div ng-view> </div>-> </div> <script type = "text/javascript"> angular.module ("myApp", ["ngrotte"]) .Controller ("acontroller", função ($ scope, $ rota) {"$ scop. $ scop. $ scop. $ scop. $ SCOP. $ SCOPE. .Controller ("BController", função ($ scope) {$ scope.hello = "hello, b!";}) .Controller ("myctrl", function ($ scope, $ local) {$ scope. $ SCOPE. $ ON ("$ ROUTECHANGESTART", função (evento, próximo, atual) {//event.PreventDefault (); // Cancelar o URL Console.log ("Route Change Start!");}); }) .config (function ($ routeProvider, $ locationProvider) {$ routeProvider .when ('/a', {templateurl: 'a.html', controlador: 'acontroller'}) .when ('/b', {modelo: 'b.html',). função ($ q, timeout) {VAR Atraso = $ Q.Defer (); </script> </body> </html>O exposto acima estão as informações que classificam as informações de roteamento do AngularJS NG-ROUTE. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!