almost 9 years ago
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>
<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'});;}]);
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>
<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:
This is how we can make multiple views in our SPA.
You can also download the demo attached. Hope this will help you.
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)