How to access the URL parameters through the angularJS controller. For example: i would like to read parameter1 and parameter2 in a controller so that i can take appropriate action in my controller. http://localhost:8080/MyApplication?Parameter1=testresponse¶meter2=1234
After spending some time, i figured that $location is the one I was searching for. Below is sample code snippet. >>AngularJS v1.4.8
main.js
var mainApp = angular.module("app",['ui.bootstrap','ngModal']);
mainApp.config(['$locationProvider',function($locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
var mainController = function($scope,$window,$rootScope, $cookies,$cookieStore,$location){
var searchObject = $location.search();
window.alert("parameter is :.."+searchObject.param1);
window.alert("Url typed in the browser is: "+$location.absUrl());
}
mainApp.controller("MainController",["$scope","$window","$rootScope",'$location',mainController]);
Enter the this URL in the browser:
http://localhost:8180/Application/#param1=test
Output:
alert 1: parameter is :.. test
alert 2: "Url typed in the browser is: " +http://localhost:8180/Application/#param1=test
Inject $routeParams in your controller like
angular.module(yourapp).controller(yourcontroller,['$routeParams',
function($routeParams){
console.log($routeParams.Parameter1) //Prints test response
}]);
Using $routeParams service you can access url params. In your case
angular.module('myApp', [])
.controller('myController', (function ($scope, $routeParams) {
$routeParams.Parameter1 // for 1st param
$routeParams.parameter2 // for second param
});
For more information - $routeParams
Related
I am trying to pass an ID via URL parameter to a page named "more.html". So the URL Parameter will like the following.
http://example.com/more.html?id=200
I used $location service in my controller on the more.html page to get the Parameter ID from the URL. Here is the controller code that I used.
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($location, $scope, $http) {
var sno = $location.search().id;
alert(sno);
});
The result I got from the above code was "Undefined".
Like what #daan.desmedt told. I changed the URL structure to the following and passed ID via it.
from:
http://example.com/more.html?id=200
to:
http://example.com/more.html#?id=200
I added # after more.html. It solved the problem.
Change you url structure as following (adding #)
from:
http://example.com/more.html?id=200
to:
http://example.com/more.html#?id=200
Adding the # more.html and before your url parameters will fix the problem.
Maybe for your next project you could make use of ui-router, which is a more structured way of using parameters.
https://github.com/angular-ui/ui-router
you are not defining the parameters you inject. It should look like below code:
var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$location' , '$scope' , '$http' , function($location, $scope, $http) {
var sno = $location.search().id;
alert(sno);
}]);
I am trying to redirect to another page in my ionic app but stuck at this point. I see in console that my current path is what I want but I am not really on that page here is may code
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
$stateProvider.state('homepage', {
url: '/homepage',
templateUrl: 'templates/homepage.html',
controller: 'MapController'
})
.state('hotel', {
url: '/hotel',
templateUrl: 'templates/hotel.html',
controller: 'HotelController'
})
})
Controller
.controller('MapController', function($scope, $location, customservice) {
$scope.fa = function(a) {
customservice.hotel_name = {hotelName: a.innerHTML}
console.log($location.path()) // prints /homepage
$location.path('/hotel');
console.log($location.path()) // print /hotel but still on same page
}
});
The $location service allows you to change only the URL; some time it dones not reload/redirect page. Can you try $window.location.href or $state.go(), instead of $location.path(). May be it will work.
I dont know how and why but wrapping it under $timeout did the job for me
It's very confusing thing. $location only changes url without reload.
You should write like this if you want to redirect.
$window.location.href = "http://www.google.com"
Please refer Angulardoc
When should I use $location?
Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.
What does it not do?
It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href
Try below:
angular.module('windowExample', [])
.controller('ExampleController', ['$scope', '$window', function($scope, $window) {
$window.location.href = '/hotel.html';
};
}]);
So basically I'm developing a monitoring system. When I click on a specific application I want to navigate to a statistics page and load that apps stats dynamically.
So on the monitoring pages (example.com/app/#/monitorscreen) script I have the following line of code:
window.location = "#/applicationstats?application=" + app;
Which then navigates me to:
example.com/app/#/applicationstats?application=test123
My question is, how do I access the data held in the parameter 'application' above? In other words, how can I print to the screen 'test123'
Consider switching to ng-route or better yet ui-router.
it has all the functionality you are looking for including stateParmas (accessing parameters from url)
https://angular-ui.github.io/ui-router/site/#/api/ui.router
you should use RouteProvider and RouteParams
check this answer:
How to get the url parameters using angular js
In the routing file, include $routeProvider for ng-route and $stateProvider for ui-route
$routeProvider.when('/view1/:param1/:param2', {
templateUrl: 'partials/partial1.html',
controller: 'MyCtrl1'
});
$stateProvider.state('partials', {
url: '/partials/:param1/:param2',
controller: 'MyCtrl1',
templateUrl: 'partials/partial1.html'
});
Then in your controller inject $routeParams for ng-route and $stateParams for ui-route:
.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
var param1 = $routeParams.param1;
var param2 = $routeParams.param2; //change here from param1 to param2
...
}]);
.controller('MyCtrl1', ['$scope','$stateParams', function($scope, $stateParams) {
var param1 = $stateParams.param1;
var param2 = $stateParams.param2; //change here from param1 to param2
...
}]);
Following is my $routeProvider.when
.when("/products/:id",{
templateUrl:"app/views/product.html",
controller:"productController"
})
I want to access the value of :id in the product controller.
Based on which i will populate product details.
the url is /index.html#/products/3
You can use $routeParams.id in your controller.
You can access it in your controller with $routeParams
app.controller('productController', function ($scope, $routeParams) {
$scope.productId = $routeParams.id;
};
Read more here
$stateParams are for custom ui-router
Inject $routeParams to your controller factory function.
.controller('MainController', function($scope, $routeParams) {
$scope.id= $routeParams.id;
})
Use the $location service
To access any part of a path you need to use the $location service. It lets you use different parts of the url. For instance (From docs)
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var url = $location.url();
// => "/some/path?foo=bar&baz=xoxo"
But what you want is this
// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var path = $location.path();
// => "/some/path"
This will return a string that is everything after the #
so then you can Use slice or some other JS function to get the part you need.
Best of luck
When user arrive to following URL
mainurl/exampleurl?token=23
i can extract the "exampleurl" using this $state.$current.name
How can i exctract the token=23 from this url
You can get parameters from $stateParams:
https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
var token = $stateParams.token
Hope it helps
Option-1: You can use $location service.
var t = $location.search().token
Option-2 If you are using ui-router, you may access the querystring parameters from $stateParams service too
var t = $stateParams.token
Cheers!
Try passing $location to your controller and use it like this.
.controller('YourController', ['$scope', '$stateParams', '$location' , function ($scope, $stateParams, $location) {
// Get token from query string
var token = $location.search().token;
}
You can get parameters with $location.search() into your controller. See below
// Given URL
// mainurl/exampleurl?token=23
var searchObject = $location.search();
// => {token: 23}