AngularJs is basically used for the single page application with multiple views.
For this we will be using ng-view directive and certain code of AngularJS to make it possible for you to make multiple view.
Here is a code:
HTML:
<body ng-app="app">
<ul>
<li><a href="#/firstPage">First page</a></li>
<li><a href="#/secondPage">Second page</a></li>
<li><a href="#/thirdPage">Third page</a></li>
</ul>
<div ng-view></div ng-view>
</body>
Script:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/' , {
templateUrl: 'templates/welcome.html',
controller: 'first'
}).
when('/firstPage' , {
templateUrl: 'templates/firstPage.html',
controller: 'first'
}).
when('/secondPage' , {
templateUrl: 'templates/secondPage.html',
controller: 'second'
}).
when('/thirdPage' , {
templateUrl: 'templates/thirdPage.html',
controller: 'third'
});;
}]);
These are the two script to add inside the head tag:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
Then finally we have to create a folder with templates name and add 3 HTML file naming:
- firstPage.html
- secondPage.html
- thirdPage.html
This is how we can make multiple views in our SPA.
You can also download the demo attached. Hope this will help you.
0 Comment(s)