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.

READ : AngularJS Push values object into array First Index

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 :

READ : How to create database seeder in laravel 6?

https://docs.angularjs.org/api/ng/service/$location