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
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);
}]);
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
...
}]);
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
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}
I need current path from url in template (content of $location.path). But not via controller, because I have a lot of controllers (and I do not want to duplicate declaration of $scope.currentUrl = $location.path;). Thanks for the advice.
AngularJS template can only see what is available in a scope so you will need somehow to put $location service in a scope. There is one scope that is always available in AngularJS application called $rootScope so it could be use for your use-case.
What you could do is to use run() method of a module to expose $location in the $rootScope:
var myApp = angular.module('myApp', []).run(function($rootScope, $location) {
$rootScope.location = $location;
});
this would make 'location' available in all templates so later on you could do in your template:
Current path: {{location.path()}}
An alternative is to use the more semantic and versatile ui-router, then in the controller, retrieve the current state, and store it on the $scope:
app.controller('MyCtrl', ['$scope', '$state', function MyCtrl($scope, $state) {
$scope.state = $state.current.name;
...
}