Single Page Application In Angularjs
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Riya
In this tutorial we will show you the solution of single page application in angularjs, single page application means each HTML pages we defined will updated on single HTML page and this concept done by ‘ngRoute’.
Using angularjs route library supports we can set routes in html template for each html pages then when we clicks on particular links it loads which page we sets to be displayed on webpage.
Step By Step Guide On Single Page Application In Angularjs :-
In our application we imported ‘angular support libs and angular route support libs’ for get service of routing.
We defined two anchor tags to link other html pages and in controller we defined ‘ngRoute’ with application then using ‘$routeProvider’ we sets route for each pages with different controller.
Controller appends with application respective controller name within that we defined message for each page those string will display on respective pages.
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Single page web app using Angularjs</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<a href="#/home">Home</a>
<a href="#/about">About</a>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>
HOME.HTML
<h1>Hello, !{{msg}}</h1>
<p>{{exm}}</p>
ABOUT.HTML
<h1>About us page.</h1>
<p>{{msg}}</p>
<p>This is executed because of this code.</p>
APP.JS
var app=angular.module('myapp',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'down/home.html',
controller: 'ctrl'
})
.when('/home',{
templateUrl: 'down/home.html',
controller: 'homeCtrl'
})
.when('/about',{
templateUrl: 'down/about.html',
controller: 'aboutCtrl'
})
.otherwise({redirectTo:'/'});
});
app.controller('ctrl',function($scope){
$scope.msg="This is index page.";
});
app.controller('homeCtrl',function($scope){
$scope.msg=" This is home page. ";
});
app.controller('aboutCtrl',function($scope){
$scope.msg=" This is about page. ";
});
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we need to import two script angularjs files namely ‘angular,angular-route’ because without those files we can’t run our application to be successfully.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here. In angularjs we need’s to define our application and controller using directives of ‘ng-app and ng-controller’ with respective values ‘myapp and ctrl’.
- Here we defined two <a> anchor tags contain ‘home and about’ pages link and must need to define div tag with ‘ng-view’ directive because our route files are appends on ‘ng-view’ with our application.
- In script ‘app.js’ we defined ‘$routeProvider’ is creates the $route service. By configuring the ‘$routeProvider’ before the $route service we can set routes in HTML templates which will be displayed.
- Using that we sets route for page ‘home and about’ in ‘templateUrl’ with different controllers ‘ctrl, homeCtrl, aboutCtrl’. Finally we added otherwise call because it is used to configure ‘$routeProvider’.
- In application we appends each controller with $scope object to define some message that will be display on respective pages.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create single page application using angularjs.
When we executing our program on browser we need to start server first then here we used some open source libraries so need internet connection also.
In browser we can see two links of ‘Home, About’ we defined in application with one message we defined in controller also displayed.
When we click’s on ‘Home or About’ page links at same frame we can see respective clicked page layouts.
I hope this tutorial on single page application in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
