As rotas do angularjs 1.6.0 (mais recente agora) não funcionam

98

Eu esperava ver essa pergunta no Stackoverflow, mas não vi. Aparentemente, sou o único com esse problema que me parece muito comum.

Tenho um projeto básico no qual estou trabalhando, mas as rotas parecem não funcionar, embora tudo o que fiz até agora pareça estar certo.

Eu tenho este pedaço de html no meu index.html arquivo:

<html>
<head ng-app="myApp"> 
    <title>New project</title>
    <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>

    <script src="app.js"></script>
</head>
<body>
    <a href="#/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
</html>

e aqui está o meu app.js :

var app = angular.module('myApp', ['ngRoute']);


app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/add-quote', {
            templateUrl: 'views/add_quote.html',
            controller: 'QuoteCtrl'
        })
        .otherwise({ redirectTo: '/' });
}]);

Agora, quando acabo de visitar a página, aqui está o que obtenho no url:

http: // localhost: 8000 / admin #! /

e quando eu clico no Add quote botão, recebo o seguinte:

http: // localhost: 8000 / admin #! / #% 2Fadd-quote

Qual pode ser o problema aqui? Obrigado pela ajuda

— Awa Melvine
fonte

1

possivelmente relacionado? github.com/angular/angular.js/commit/…

— Claies

172

Basta usar hashbang #!no href:

 <a href="#!/add-quote">Add Quote</a>

Devido ao aa077e8 , o prefixo hash padrão usado para URLs hash bang de $ location mudou da string vazia ( '') para o bang ('!' ).

Se você realmente deseja não ter nenhum prefixo hash, você pode restaurar o comportamento anterior adicionando um bloco de configuração ao seu aplicativo:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Para mais informações, veja

Desculpe por me levantar, mas ... Como isso foi divulgado? Este é um bug enorme e destruidor. - @MiloTheGreat

A alteração de interrupção de # 14202 deve ser revertida, pois a especificação de referência já foi oficialmente obsoleta # 15715

Vou encerrar este problema porque não temos nenhum feedback. Sinta-se à vontade para reabrir este problema se você puder fornecer novos comentários.

- https://github.com/angular/angular.js/issues/15715#issuecomment-281785369

— georgeawg
fonte

16

Desculpe por me levantar, mas ... Como isso foi divulgado? Este é um bug enorme e destruidor.

— MiloTheGreat

2

@MiloTheGreat sinta-se à vontade para deixar seus comentários com a equipe AngularJS - github.com/angular/angular.js/issues/15715

— georgeawg

39

Basta incluir o !em href:

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>

— v-tec
fonte

7

Uau, horas perdidas seguindo tutoriais obsoletos sobre roteamento ... tudo o que estava faltando era o '!'. Obrigado!

— Philippe Maes

Com toda aquela conversa mole sobre hashes e hashbang, eu nunca pensei que "!" parece um personagem ilegal que aparece sem referência. E se eu simplesmente aceitar e reconhecer sua existência, o problema terá sido resolvido.

— Mohammed Joraid

Eu também ... isso estava me deixando louco!

— VictorEspina

6

Não consegui fazer o roteamento funcionar no 1.6.4, então decidi usar o angular 1.5.11 e o roteamento funciona bem, embora precise definir todos os meus roteamentos nas funções when (..) com "/" à direita

Se aderir a uma versão mais antiga do angular é uma opção para você, considere isso, pois pode salvar seus nervos ...

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
    templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
    templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
    templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
    templateUrl : "views/groups.html"
})
.when("/transformations", {
    templateUrl : "views/transformations.html"
})
.when("/effects", {
    templateUrl : "views/effects.html"
})
.when("/", {
    templateUrl : "views/basic-shapes.html"
});
});

— Lixonn
fonte

Como permanecer no 1.5 afeta a atualização para Angular 2/3/4/5 / etc? O ngUpgrade funciona de 1,5 a 2+? Estou sentindo que o ngUpgrade pode não ser viável para nós. (sim, este comentário será quase invisível e uivando contra o vento)

— eflat

0

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);

— Pranav VR
fonte

0

Tente este pode ajudar ...

Em html ou visualizar página

 <body>
       <a href="#/Home.html">Home</a>
       <div ng-view></div>
 </body>

Na página de script

var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/Home', {
      templateUrl: 'FolderName/Home.html',
      controller: 'homeCtr'
    })
      $locationProvider.hashPrefix('');
     });

— Manikantan
fonte