AngularJS - How to read URL parameter from clean URL in non single page app

Question

I'm currently working on a large refactoring project where my team is replacing old functionality in an application with more modern approach.

We are moving towards a single page application approach, but before we get there, we are replacing single independent web pages with AngularJS functionality.

Our backend is ASP.NET MVC application and I'm forced to use whatever I currently have; thus the URL's and such need to stay in given format:

http://example.com/controller/action/id

How can I read URL parts in my AngularJS controller, without using the so called hash-style URL's that AngularJS single page apps mostly use?

For example; I go to /user/edit/1 and need to get that id of '1' in my AngularJS controller somehow.

Any help would be greatly appreciated!

I don't think it is a good approach to add AngularJS to every single page as different applications. You can implement a single page application with refactored pages and a router that will redirect to old pages when they are yet to be refactored. — CKK
– CKK, Commented Oct 16, 2014 at 10:06

Chandermani · Accepted Answer · 2014-10-16 09:45:17Z

1

The $location service can help you here. As per 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:

answered Oct 16, 2014 at 9:45

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

veturi Over a year ago

Thanks for your answer! Looked into it and looks like it's something I can use, but are you aware of any other ways to accomplish this? Preferred way would be to automatically define the format of the URL and parse the id values from there for the controller to use. Something like you can do in the ngRoute module, but without defining controllers, templates and such and only passing the URL parts to the controller.

Chandermani Over a year ago

I don't know if there is something available readily, but you can always create a service of your own to parse the url and provide data in a consistent manner.

veturi Over a year ago

Thanks. I wrote a service like you suggested and added a possibility to define routes just like in ngRoute module. Works well with $location. Thank you for pointing me to a right direction!

Chandermani Over a year ago

Great it helped, but remember that you service will work as long the server pattern for url follow a specific convention.

Abraham Itule · Accepted Answer · 2014-10-16 09:46:46Z

0

Define your route like this

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)
}])

answered Oct 16, 2014 at 9:46

Abraham Itule

417 bronze badges

1 Comment

veturi Over a year ago

Thanks for your answer. The problem is, that I don't have templates in use, since it's not a single page application. Also I'm defining the used controller in the HTML document and thus can't really use the ngRoute module. Is it possible to use ngRoute without defining controller and template and only pass route values to the controller?

Collectives™ on Stack Overflow

AngularJS - How to read URL parameter from clean URL in non single page app

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related