AngularJS Get URL Parameters In Controller
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Pragati
In this article we will show you the solution of angularjs get url parameters in controller, when using AngularJS, we often need to obtain URL parameters.
ngRoute must be imported to get. In addition, you will need to enable HTML5 mode to disable hashbang URLs. The purpose of this tutorial is to show you how to get URL parameters using AngularJS, controllers, and views.
Let's take a quick look at single-page applications before we learn how routing works in Angular.
The single-page application (SPA) is a web application that loads a single HTML page and dynamically updates the page based on the user's interaction.
Single Page Applications can be created with AngularJS routing. Your web applications can have different URLs for different content.
The routing functionality of AngularJS also allows for displaying multiple contents based on the route selected. The URL specifies it after the # sign.
Step By Step Guide On AngularJS Get URL Parameters In Controller :-
<!doctype html>
<html ng-app="app">
<head>
<title>Extract URL parameters in AngularJS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<style type="text/CSS">
</style>
</head>
<body>
<div class="wrapper" ng-controller="myController">
<header>
<div class="container">
<h1 class="col-lg-9">Extract URL parameters in AngularJS</h1>
</div>
</header>
<div class="container">
<h5>Author: TalkersCode</h5>
<p>This demonstrates how to access the query parameters from the URL of the page. Press <F12> to access the console to view the output</p>
</div>
</div>
<footer>
<div class="container">
Copyright 2022
</div>
</footer>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js"></script>
<script>
(function() {
'use strict;
angular.module('app',[])
.controller('myController', function($scope, $location) {
var paramValue = $location.search();
console.log(paramValue);
});
})();
</script>
</body>
</html>
- In the first step, we write <HTML>, which tells the browser what HTML version we're using. HTML tags are used beginning of HTML documents.
- Then the ng-app directive defines the angular js application. As part of the ng-app directive, the "ng-controller" directive specifies the controller for the application.
- Using the <head> tag, we will explain the project's heading. <title> are open and </title>.
- This program uses a href for adding route URL links, instead of a href> for hyperlinks.
- <link href="css/custom.css" rel="stylesheet" /><style type="text/CSS">tag is used for External style sheets can be referenced with a full URL or with a path relative to the current web page.
- Then </style> and </head> tags are closed.
- Then the body opens and there is only one route in an Angular link, which means any business logic is handled by the controller 'AngularController'.
- Then the header opens in the main body section.
- The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which are then styled with CSS or manipulated with JavaScript.
- For devices we used col-MD classes. Then the footer opened and we used a container in the footer and then the footer close.
- Then AngularJs is a JavaScript framework. It can be added to an HTML page with a <script> tag. The script tag explains the source code we used for the angularjs google API run and the file we used for the code.
- An angular js application is defined by the ng-app directive. An application's controller is specified by the "ng-controller" directive within the ng-app directive.
- After that </script></body></html> and code should be executed after closed all tags.
Conclusion :-
The code below creates a watcher that listens to the filterByName property of the controller.
The property's value is retrieved when the property is updated and set to the URL (by using $location.search("filterByName", newVal);).
I hope this article on angularjs get url parameters in controller helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
