AngularJS - How to read url parameter from pure url in app without one page
I am currently working on a large refactoring project where my team replaces old functionality in an application with a more modern approach.
We're moving towards a single page approach, but before we get there, we're replacing individual, independent web pages with an AngularJS function.
Our backend is an ASP.NET MVC application and I am forced to use what I have; thus the url and such need must remain in the given format:
http://example.com/controller/action/id
How can I read the urls in my AngularJS controller without using the so called hash style url that AngularJS single page apps mostly use?
For example; I go to /user/edit/1
and I need to somehow get the id ' 1
' in my AngularJS controller.
Any help would be greatly appreciated!
source to share
The $ location service can help you here. According to the documentation https://code.angularjs.org/1.2.15/docs/guide/ $ location
Location service$ provides getter methods for read-only parts of the URL (absUrl, protocol, host, port) and getter / setter methods for url, path, search, hash:
source to share
Define your route as follows
angular.module('app', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/user/edit/:id', {
templateUrl: '/edit.html',
controller: 'editCtrl'
})
}]);
// inside your controller you do this
angular.module('app').controller('editCtrl', ['$scope', '$routeParams', function($scope, $routeParams){
// $routeParams is the key here
// you can access it by doing
console.log($routeParams.id)
}])
source to share