AngularJS Routing Example With Parameters
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Riya
In this article we will show you the solution of angularjs routing example with parameters, a routing directive represents how multiple views can be displayed in a single HTML page in AngularJs.
SPAs (single-page applications) allow people to load dynamic content without changing the page or loading it again.
Dynamically loading content is best achieved by implementing this routing.
It is possible to create a Single Page Application with AngularJS by using routing.
In your web applications, different URLs can be created for different types of content. The AngularJS routing engine also allows for the display of multiple contents in accordance with the chosen route. Following the # symbol in the URL specifies it.
If your application does not include the "ngRoute module", this is the first step.
Step By Step Guide On AngularJS Routing Example With Parameters :-
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Routing Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script type="text/javascript">
var app = angular.module("routesApp", ['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/routeURL1', {
templateUrl: 'sample1.htm',
controller: 'sample1Controller'
}).
when('/routeURL2', {
templateUrl: 'sample2.htm',
controller: 'sample2Controller'
}).
otherwise({
redirectTo: '/login'
});
}
]);
app.controller('sample1Controller',function($scope){
$scope.message='Test Sample Page 1 URL';
})
app.controller('sample2Controller',function($scope){
$scope.message='Test Sample Page 2 URL';
})
</script>
</head>
<body>
<h2>AngularJS Routing Example</h2>
<div ng-app="routesApp">
<ul>
<li>
<a href="#/routeURL1">Sample Route1</a>
</li>
<li>
<a href="#/routeURL2">Sample Route2</a>
</li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
- In our first step, we write <HTML>, which tells the browser what HTML version we're using. Documents in HTML begin with tags.
- Using the <head> tag, we will explain the project's heading. Both <head> and <title> tags are paired tags.
- 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.
- As part of Angular's background services, the $routeprovider listens for callbacks from routes. Clicking on a link in AngularJS determines which route should be taken.
- There is only one route in an Angular link, which means any business logic is handled by the controller 'AngularController'.
- Then the script tag is closed using </script>. And head is closed using </head>
- This is followed by the <body> tag that defines the body of the webpage. This is where all the content for the website is written.
- 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.
- The <ul> tag is used for listing sentences under a list. In a list, the text is enclosed in a <li> tag.
- This program uses href for adding route URL links, instead of a href> for hyperlinks.
- This div ng-view contains the rendered template for the current route, complementing the $route service by including it in the main layout.
- After that </div></body></html> and code should be executed after closed all tags.
Conclusion :-
The following angularjs reference file should be placed in the header section of your new application.
If you want to enable routing configuration ngRoute, you must add the following URL to your application's header.
In the module, we create an application. I hope this article on angularjs routing example with parameters helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
