Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularjs 1.6.0 (latest now) routes not working

I was expecting to see this question on Stackoverflow but didn't. Apparently I'm the only one having this problem that seems to me to be very common.

I have a basic project I am working on but the routes don't seem to work even though everything I've done so far seems to be right.

I have this piece of html 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 visit the page, here is what I get in the url:

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

and when I click on the Add quote button, I get this:

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

What can be the problem here? Thanks for help

like image 687
Awa Melvine Avatar asked Dec 18 '16 19:12

Awa Melvine


People also ask

How do I enable Angular routing?

To enable routing in our Angular application, we need to do three things: create a routing configuration that defines the possible states for our application. import the routing configuration into our application. add a router outlet to tell Angular Router where to place the activated components in the DOM.

How does AngularJS route work?

AngularJS routes enable the user to create different URLs for different content in an application. The ngRoute module helps in accessing different pages of an application without reloading the entire application. Important: $routeProvider is used to configure the routes.

Which function is used to set up a default route in AngularJS?

We use the ngRoute config() to configure the $routeProvider. The config() takes a function which takes the $routeProvider as parameter and the routing configuration goes inside the function.

What is routing in AngularJS?

In AngularJS, routing is what allows you to create Single Page Applications. AngularJS routes enable you to create different URLs for different content in your application. AngularJS routes allow one to show multiple contents depending on which route is chosen. A route is specified in the URL after...

How to add an angular route to a website?

Adding Angular Route ($routeProvider) 1 Reference to angular-route.js. This is a JavaScript file developed by Google that has all the functionality of routing. This needs to be placed in ... 2 The next important step is to add a dependency to the ngRoute module from within your application. This dependency is required so that routing ...

What is the use of ngroute in angular?

The ngRoute module which is developed by Google has all of the functionality which allows for routing to be possible. By adding this module, the application will automatically understand all of the routing commands. The $routeprovider is a service that angular uses to listen in the background to the routes which are called.

What's new in AngularJS?

AngularJS has undergone thorough security reviews to make applications safer by default, which drives many of these changes. Several new features, especially animations, would not be possible without a few changes. Finally, some outstanding bugs were best fixed by changing an existing API.


3 Answers

Simply use hashbang #! in the href:

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

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

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

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

For more information, see

  • AngularJS GitHub Pull #14202 Changed default hashPrefix to '!'
  • AngularJS Guide - Migration - aa0077e8

Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — @MiloTheGreat

The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715

I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.

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

like image 186
georgeawg Avatar answered Oct 17 '22 20:10

georgeawg


Simply include the ! into the href:

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
like image 25
v-tec Avatar answered Oct 17 '22 19:10

v-tec


I couldn't get routing to work in 1.6.4 so I decided to use angular 1.5.11 and routing works fine although I needed to define all my routings in when(..) functions with trailing "/"

If sticking to an older version of angular is an option for you then consider it since it may 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"
});
});
like image 6
lixonn Avatar answered Oct 17 '22 21:10

lixonn