Angularjs Redirect To Route
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Ashish
In this article we will show you the solution of angularjs redirect to route, in AngularJS, we can build Single Page Applications (SPAs). Web apps load and dynamically update one HTML page as they load and interact.
A routing module called ngRoute is used by AngularJS to support SPA.
This routing module uses the URL to determine how to route. Based on the defined routing rules, the routing engine renders the view when a user requests a specific URL.
Using routing as part of your application is a way to dynamically fix some content.
AngularJS' ng-route provides AngularJS client-side routing, which is an essential part of all websites and web applications.
Step By Step Guide On AngularJS Redirect To Route :-
As an example, we will include two HTML templates - login.html and student.html - and one layout page - index.html.
Index.html - layout view
Login.html - template
Student.html - template
The following is the main layout view - index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TalkersCode</title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="ngRoutingDemo">
<h1>Angular Routing Demo</h1>
<div ng-view> </div>
<script>
var app = angular.module('ngRoutingDemo',
['ngRoute']); app. config(function
($routeProvider)
{ $routeProvider.when('/',
{ templateUrl: '/login.html',
controller: 'loginController' }).when('/student/:username',
{ templateUrl: '/student.html',
controller: 'studentController' }).otherwise({ redirectTo: "/" });
app.controller("loginController",
function ($scope, $location) { $scope.authenticate = function (username) {
$location.path('/student/' + username)
};
});
app.controller("studentController", function ($scope, $routeParams)
{ $scope.username = $routeParams.username; }); });
</script> </body> </html>
Create login.html as shown below, which contains a username and password input box with validation. Please note that we are using bootstrap.css.Example: login.html
<form class="form-horizontal" role="form" name="loginForm" novalidate> <div class="form-group" > <div class="col-sm-3"> </div> <div class="col-sm-6"> <input type="text" id="userName" name="userName" placeholder="User Name" class="form-control" ng-model="userName" required /> <span class="help-block" ng-show="loginForm.userName.$touched && loginForm.userName.$invalid">Please enter User Name.</span> </div> <div class="col-sm-3"> </div> </div> <div class="form-group" > <div class="col-sm-3"> </div> <div class="col-sm-6"> <input type="password" id="password" name="password" placeholder="Password" class="form-control" ng-model="password" required /> <span ng-show="loginForm.password.$touched && loginForm.password.$error.required">Please enter Password.</span> </div> <div class="col-sm-3"> </div> </div> <input type="submit" value="Login" class="btn btn-primary col-sm-offset-3" ng-click="authenticate(userName)" /> </form>
Create student.html with the necessary fields as shown below.Example: student.html
<div> <p>Welcome {{username}}</p>
<a href="/">Log out</a> </div>
<form class="form-horizontal" ng-submit="submitStudnetForm()" role="form">
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">
First Name</label> <div class="col-sm-6">
<input type="text" id="firstName" class="form-control" ng-model="student.firstName" /> </div>
<div class="col-sm-3"></div> </div>
<div class="form-group">
<label for="lastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-6">
<input type="text" id="lastName" class="form-control" ng-model="student.lastName" /> </div>
<div class="col-sm-3"></div> </div>
<div class="form-group">
<label for="dob" class="col-sm-3 control-label">DoB</label>
<div class="col-sm-2">
<input type="date" id="dob" class="form-control" ng-model="student.DoB" /> </div>
<div class="col-sm-7"></div> </div>
<div class="form-group">
<label for="gender" class="col-sm-3 control-label">Gender</label> <div class="col-sm-2">
<select id="gender" class="form-control" ng-model="student.gender"> <option value="male">Male</option>
<option value="female">Female</option> </select> </div>
<div class="col-sm-7"></div> </div>
<div class="form-group">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<span><b>Training Location</b></span>
<div class="radio"> <label>
<input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label> </div>
<div class="radio"> <label>
<input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label> </div> </div>
<div class="col-sm-7"> <span><b>Main Subjects</b></span>
<div class="checkbox"> <label>
<input type="checkbox" ng-model="student.maths" />Maths</label> </div>
<div class="checkbox"> <label>
<input type="checkbox" ng-model="student.physics" />Physics</label> </div>
<div class="checkbox"> <label>
<input type="checkbox" ng-model="student.chemistry" />Chemistry</label> </div> </div> </div>
<input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" /> <input type="reset" value="Reset" ng-click="resetForm()" </form>
- The first thing we do is to write <HTML>, which tells the browser what HTML version we're using. Tags are the beginning of HTML documents.
- 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.
- then head closed using </head>
- The first step is to include angular.js, angular-route.js, and bootstrap.css in the index.html. The Angular Route contains the necessary functions for routing. Apply ng-app directive.
- Apply the ng-view directive to <div> or other elements where you want to inject another child view. The ng-view directive is used by the routing module to inject another child view where it is defined.
- Now, we need to configure the routing rules that need to compile before any other module of an application. So, use the config() method to configure the routing rules using the $routingProvider object.
- When adding routing rules, use $routeProvider.when(path, route) with an object containing properties such as a controller, template, or other properties in the second parameter.
- After that </script></body></html> and code should be executed after closed all tags.
Conclusion :-
Notice that login.html and student.html start from <form> tag because they are going to be injected into the layout page - index.html.
The layout page already contains the head and body tags.
I hope this article on angularjs redirect to route helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
