Get parameter from the url in Angular

Question

Well I have a problem. I am using now a factory to handle dtas for two controllers in my app. When I click to a link, it routes me to another view with a specific url, which last tag I want to reuse, so I'm trying to slice it like

window.location.pathname.split("/").slice(-1)[0]

but it seems to be not working, and saying: $location is undefined :/ Anyone ideas on how to solve this? Maybe a trivial error what I made but... the more eyes sees more :)

portApp.controller("itemController", ["$scope", "workFactory",
    function($scope, workFactory, $stateParams) {

        console.log(window.location.pathname.split("/").slice(-1)[0]);
        $location.path(); // it says $location is undefined in the console

        var newpath = $stateParams.itemLink;
        $scope.onViewLoad = function(){
            console.log(newpath);
        };
    }
]);

Here is the jsfiddle for it - https://jsfiddle.net/d5bjrjov/

$location is undefined because you've not injected it as dependency — mohamedrias
– mohamedrias, Commented Apr 9, 2015 at 12:07
Don't forget to add the relevant code block into the question. $location is undefined because you haven't added it as a dependency. Same with $stateParams — CodingIntrigue
– CodingIntrigue, Commented Apr 9, 2015 at 12:07

mohamedrias · Accepted Answer · 2015-04-09 12:13:31Z

2

In your controller, you've not injected $location that;s why it's showing $location is undefined.

portApp.controller("itemController", ["$scope", "workFactory",
    function($scope, workFactory, $stateParams) {

must be

portApp.controller("itemController", ["$scope", "workFactory", '$stateParams', '$location',
    function($scope, workFactory, $stateParams, $location) {

In your State Provider

You have

 .state('items', {
                url: '/items/{itemLink}',
                controller: 'itemController'
            });

The URL pattern is wrong. When you want to have dynamic data in your URL you must use :itemLink as the pattern.

 .state('items', {
                    url: '/items/:itemLink',
                    controller: 'itemController'
                });

In your controller, you can get it using $stateParams

$stateParams.itemLink

edited Apr 9, 2015 at 12:13

answered Apr 9, 2015 at 12:09

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

5 Comments

CreativeZoller Over a year ago

I am now using the injected $location and console says for $location.path() -> TypeError: Cannot read property 'path' of undefined

mohamedrias Over a year ago

I've updated the answer. Could you please try again? Also if possible setup a jsfiddle with necessary code so that we can test

CreativeZoller Over a year ago

Thank you mohamed, I saw that using this bracket forms stand that there will be always value with the same format. That parts seemingly working unmodified. Updated my code, and my jsfiddle too, still getting the error. - jsfiddle.net/d5bjrjov/3

mohamedrias Over a year ago

In your current code also there is a mismatch in dependencies. ["$scope", "workFactory", "$location", function($scope, workFactory, $stateParams, $location) { It must be ["$scope", "workFactory", "$stateParams", "$location", function($scope, workFactory, $stateParams, $location) {

CreativeZoller Over a year ago

Yea.. thank you. I am reading a lot of Angular, including sources but sometimes get lost in the woods :) It helped me out :) Now coming the filter part inside the factory =)))

Collectives™ on Stack Overflow

Get parameter from the url in Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related