Best IT Recipes

Angularjs 1.6.0 (latest now) routes not working

I expected to see this question on Stackoverflow, but did not. Apparently, I'm the only one who has this problem, which seems to me very common.

I have a basic project I'm working on, but the routes do not seem to work, although everything I have done so far seems to be correct.

I have this html piece in my index.html file:

 <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>

and here is my 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: '/' }); }]);

Now, when I just went to the page, here is what I get in the URL:

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

and when I click the Add quote button, I get the following:

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

What could be the problem? thanks for the help

+95
angularjs ngroute angular-routing angularjs-ng-route
Dec 18 '16 at 19:09
source share
5 answers

Just use hashbang #! in href:

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


Due to aa077e8 , the default hash prefix used for the $ location hash-bang URLs has changed from an empty string ( '' ) to bang ( '!' ).

If you really want to have no hash prefix, you can restore the previous behavior by adding a configuration block to the application:

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

For more information see



Sorry to climb my tall horse, but ... How was it released? This is a serious mistake. - @MiloTheGreat

The destructive change, like on # 14202, should be reversed, since the reference specification is already officially obsolete # 15715

I am going to close this problem because we have not received any feedback. Feel free to open this issue if you can provide a new review.

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

+164
Dec 18 '16 at 21:21
source share

Just turn it on ! in href :

 <body> <a href="#!/add-quote">Add Quote</a> <div ng-view ></div> </body>
+39
Apr 23 '17 at 13:01
source share

I could not get the routing to work in 1.6.4, so I decided to use angular 1.5.11, and the routing worked fine, although I needed to define all my routes when (..) the functions with the ending "/"

Sticking to an older version of angular is an option for you if you think it can save your nerves ...

 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" }); });
+5
Apr 18 '17 at 6:55
source share
 app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $locationProvider.hashPrefix(''); $routeProvider .when('/add-quote', { templateUrl: 'views/add_quote.html', controller: 'QuoteCtrl' }) .otherwise({ redirectTo: '/' }); }]);
0
Mar 21 '18 at 7:26
source share

Try it can help ...

In HTML or pageview

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

On the script page

 var app=angular .module('myModule',['ngRoute']) .config(function($routeProvider, $locationProvider) { $routeProvider .when('/Home', { templateUrl: 'FolderName/Home.html', controller: 'homeCtr' }) $locationProvider.hashPrefix(''); });
0
Apr 29 '19 at 12:25
source share


More articles:


All Articles