Menu
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
687
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.
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.
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.
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...
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 ...
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.
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.
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
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
186
Simply include the ! into the href:
<body>
<a href="#!/add-quote">Add Quote</a>
<div ng-view ></div>
</body>
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"
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
