Roteamento AngularJS com Parâmetros: Exemplo de Aplicação de Página Única

#Tópico JS AngularDescrição
aaControladores Detalhes do tópico
22Modelos Detalhes do tópico
33Diretivas Detalhes do tópico
var sampleApp = angular.module ('sampleApp', ['ngRoute']); sampleApp.constant ('baseUrl', 'http: // localhost: 63342 / untitled / Sample.html / Angular'); sampleApp.config (function ($ routeProvider, $ locationProvider) {$ routeProvider. when ('/ Angular /: topicId', {templateUrl: 'Angular.html', controlador: 'AngularController'})}); sampleApp.controller ('AngularController', function ($ scope, $ routeParams, $ route) {$ scope.tutorialid = $ routeParams.topicId});

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Saída:

Da saída,

  • Você pode ver que a tag # não está lá ao acessar o aplicativo.

Resumo

  • O roteamento é usado para apresentar diferentes visualizações ao usuário na mesma página da web. Este é basicamente o conceito usado em aplicativos de página única que são implementados para quase todos os aplicativos da web modernos
  • Uma rota padrão pode ser configurada para roteamento angular.JS. É usado para determinar qual será a visualização padrão a ser mostrada ao usuário
  • Os parâmetros podem ser passados ​​para a rota por meio do URL como parâmetros de rota. Esses parâmetros são acessados ​​posteriormente usando o parâmetro $ routeParams no controlador
  • O serviço $ route pode ser usado para definir pares de valores-chave personalizados na rota que podem então ser acessados ​​posteriormente de dentro da visão
  • O roteamento HTML5 é usado para remover a #tag do URL de roteamento em angular para formar um URL bonito