Angular Router Get current URL Query String parameters
Today, We want to share with you Angular Router Get current URL Query String parameters.
In this post we will show you Angularjs get current url with parameters example, hear for angular2 get query string parameters we will give you demo and example for implement.
In this post, we will learn about Angular Router: Query Parameters with an example.
Simple To get all parameters from current URL with ngRoute .
means fisrt of all define all rules in angular-route.
and that you will should to main include lib. angular-route.js
in your app as a all dependency in angular-route.
Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.Angularjs get current url with parameters example
Example
<html lang="en">
<head>
<title>
AngularJS fetch current URL all parameters value and name
</title>
<script src="yourappsproject/angular.min.js"></script>
<script>
var infinityknowApp = angular.module("infinityknowApp", []);
infinityknowApp.controller("infinityknowCtrl", function($scope,$location) {
$scope.urlquerystring = '';
$scope.currentqueryUrl = function() {
$scope.urlquerystring = $location.absUrl();
// simple query string to will change the fetch url to www.infinityknow.com/Userprofile/9898 current url
};
});
</script>
</head>
<body>
<div ng-app="infinityknowApp">
<div ng-controller="infinityknowCtrl">
<p>simple get current url fetch string = {{urlquerystring}}</p>
<input type="button" value="Simple fetch query string url" ng-click="currentqueryUrl()">
</div>
<h1>Solution of AngularJs All Problems</h1>
<h3>
<a href="https://infinityknow.com/" alt="Link of angularjs Solution example and demo">My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of infinityknow.com </a>
</h3>
</div>
</body>
</html>
Fetch the current URL string without any query parameters
var urlquerystring = $location.absUrl().split('?')[0]
console.log(urlquerystring);
Get part of url in angularjs
angular.module("infinityknowApp",[],function($locationProvider){
$locationProvider.html5Mode(true); //boolean true or false
});
function infinityknowCtrl($location){
var studId = $location.path().split("/")[3]||"Unknown";
//like path will be display here /students/view/985/,
and simple generate array like display: ["","students","view","985",""]
console.log(studId);
}
AngularJS: how can I get $location.path to template
main.js
-------
var infinityknowApp = angular.module('infinityknowApp', []); //init module
infinityknowApp.run(function($rootScope, $location) {
// global $rootScope fetch
$rootScope.lqueryurlstring = $location;
});
index.html
----------
Simple URL Current path fetch : {{lqueryurlstring.path()}}
Example : Get all parameters using angular ngRoute
// only add in angularjs 'ngRoute' lib as a dependency in your application
angular.module('infinityknowApp', ['ngRoute']);
//config script
infinityknowApp.config(function ($routeProvider, $locationProvider)
{
// all configure the routing rules here with parameters
$routeProvider.when('/authapi/:usertype/:sid', {
controller: 'SalesorderCtrl'
});
// html enable HTML5mode boolean (true or false) to disable hashbang urls
$locationProvider.html5Mode(true); // boolean value
});
//controller script
infinityknowApp.controller('SalesorderCtrl', function ($routeParams)
{
// fetch url parameters using angularjs
console.log($routeParams.sid, $routeParams.usertype);
// set and fetch api using id
});
demo :
https://docs.angularjs.org/api/ng/service/$location