How to get value from url in angularjs - javascript

I am having the url as follows:
http://test.com/#/mya/classified/42/
How can I fetch 42 from this usl in angularjs?
Is there any way in angularjs $location to fetch the same?.

This is what $stateParams service is for:
myApp.controller('MyCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
console.log($stateParams.id);
}]);

Related

angularjs - access url parameters in controller

I am trying to access url params in my controller:
I found this example, but I get an error that I think is related to loading the relevant modules.
app.controller('WidgetCtrl', ['$scope', '$routeParams', function ($scope, $routeParams, $http) {
var param1 = $routeParams.param1;
var param2 = $routeParams.param2;
var vm = $scope;
vm.data = "test";
}]);
Error:
Uncaught Error: [$injector:modulerr]
In my html I have:
<script src=".../angular-1.2.21/angular.min.js"></script>
<script src=".../angular-1.2.21/angular-route.min.js"></script>
What is the proper wat to access the url params and use them in the controller? which modules I need to load?
From the looks of it, you're not injecting $http, so it should be:
app.controller('WidgetCtrl', ['$scope', '$routeParams', '$http', function ($scope, $routeParams, $http) {
That should get rid of that error.

Can't get access to Angular constant

I'm trying to get access to my angular .constant via this code:
angular
.module('coreApp')
.constant('MY_CONSTANTS', {
myConstant_1: 'My constant'
})
My controller:
.controller('MyController', ['$log', '$rootScope', '$location', MY_CONSTANTS, MyController]);
function MyController($log, $rootScope, $location, MY_CONSTANTS, MyController) {
$log.debug(myConstant_1);
}
But i can't get the value and output the value from my constants. What's wrong with my code?
You have to wrap dependency inside single quote/double quote while specifying it inside an array. Here you are missing quotes aroud MY_CONSTANTS.
And then at the end of DI Array, it should be your controller function ArticleController not MyController
.controller('MyController',
['$log', '$rootScope', '$location', 'MY_CONSTANTS', ArticleController]);
//^^^^^ change here..
function ArticleController($log, $rootScope, $location, MY_CONSTANTS) {
$log.debug(MY_CONSTANTS.myConstant_1);
}
You need to use MY_CONSTANTS.myConstant_1 instead of just myConstant_1. And your code will be $log.debug(MY_CONSTANTS.myConstant_1);
And you also didn't wrap your MY_CONSTANTS into quote.

Angular $routeparams empty using $stateprovider

I am trying to have a link in my page such as:
<a ng-href="#/Page/{{x.ID}}">{{x.ID}}</a>
Which succesfully gets to the angular controller but however the $routeparams are null when I am expecting to get the {{ x.ID }} back:
pageController.js
angular.module("myApp.Pages").controller("pageController", ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
console.log($routeParams);
}]);
And am referencing the state in my $stateprovider such as (in appRouting.js):
$stateprovider.state('Page', {
url: '/Page/:userId',
templateUrl: 'App/Pages/page.html',
controller: 'pageController'
})
my app.js
angular.module("myApp", [
// User defined modules
'myApp.Pages', // Pages
'myApp.Core', // Core
// Angular modules
'ui.router', // state routing
'ngRoute', // angular routing
'LocalStorageModule', //local browser storage
'angularRangeSlider',
'ngFileUpload'
])
Any ideas?
$stateParams instead of $routeParams

Redirect after X seconds AngularJS

I already saw this thread but it uses ui-router and I'm only using the $routeProvider of AngularJS. The code in the thread is:
.controller('SeeYouSoonCtrl', ['$scope', '$state', '$timeout',
function($scope, $state, $timeout) {
$timeout(function() {
$state.go('AnotherState');
}, 3000);
}])
How can I use it with my routeProvider since I am not using ui-router? Thank you in advance.
You need to use $location service
$location.path('/anotherURL');
By $location method :
code:
.controller('HomeController', ['$scope', '$state', '$location',
function($scope, $state, $location) {
$location.path('/appurl');
}])

angular.js routing and stateparams

I'm trying to modify standard user module of meanjs. I added a simple route:
state('users', {
url: '/users/:username',
templateUrl: 'modules/users/views/view-profile.client.view.html'
});
And in my view:
data-ng-controller="ViewProfileController" data-ng-init="findUser()"
I also injected $stateParams to my controller. So in my ViewProfileController - findUser function, when I write this:
console.log($stateParams.username)
I expect to get username parameter. But it returns undefined.
When I set the route this way,
state('users', {
url: '/users/:username',
template: function ($stateParams){
return $stateParams.username;
}
});
it returns username. I don't know what is wrong or missing. Any ideas?
edit: this was my full controller code
'use strict';
angular.module('users').controller('ViewProfileController', ['$scope', '$http', '$stateParams', '$location', 'Users', 'Authentication',
function($scope, $http, $location, Users, Authentication, $stateParams) {
$scope.user = Authentication.user;
$scope.findUser = function () {
console.log($stateParams);
...
};
}
]);
Your dependencies don't match up - the list of dependencies need to match the parameters in the controller function in the same order:
'use strict';
angular.module('users')
.controller('ViewProfileController', ['$scope', '$http', '$stateParams', '$location', 'Users', 'Authentication',
function($scope, $http, $stateParams, $location, Users, Authentication) {
$scope.user = Authentication.user;
$scope.findUser = function () {
console.log($stateParams);
};
}
]);
I should use controller instead of template.
Replace into you code the template: to the follow snippet:
controller: function($stateParams){
console.log('username: '+$stateParams.username);
}
You can see a complete example of this feature here

Categories

Resources