<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<script src="https://code.angularjs.org/1.2.20/angular-route.js">
</script>
<title>Multiple ng-view in a single template</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<!--Now it Tells to AngularJS to be active in this portion of the page. In this case the entire document.(due to we apply on body tag ) -->
<div class="container">
<div class="jumbotron" ng-controller="RouteCtrl">
<img src="http://tech-blog.maddyzone.com/wp-content/uploads/2013/10/maddyzone-logo-300x72.png">
<br/>
<h1>Multiple ng-view in a single template</h1>
<!-- by ng-view we create a space in this dynamic content come according to route by ng-view angular know that on which area content will set-->
<!-- but here we want to insert three teplate home.html,aboutus.html, contactus.html -->
<i class="badge">load uirouter.html file in this all html file loaded </i>
<br/>
<br/>
<div ng-view="">
</div>
<a href="https://tech-blog.maddyzone.com/angularjs/use-multiple-ng-view-single-page" target="_blank">View Post on Maddyzone </a>
</div>
</div>
</body>
</html>
//create a module myApp
var myApp = angular.module('myApp', ['ngRoute']);
//Now Configure our routing
myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider
// set route for the index page
.when('/',
{
controller: 'RouteCtrl',
templateUrl: 'uirouter.html'
})
// if not match with any route config then send to home page
.otherwise({
redirectTo: '/home'
});
});
// create the controller and inject Angular's $scope
// set for Route Controller
myApp.controller('RouteCtrl', function($scope) {
/** create $scope.template **/
$scope.template={
"home":"home.html",
"about":"aboutus.html",
"contact":"contactus.html"
}
$scope.message={
"home":"Message from home template",
"about":"Message from about template",
"contact":"Message from contact template"
}
/** now after this ng-include in uirouter.html set and take template from their respective path **/
});
/* Styles go here */
Multiple ng-view in a single template
<!-- content set for home page -->
<div style="font-size: 32px" >
<h1>Home </h1>
<h2 class="label label-info">{{message.home}}</h2>
</div>
<!-- content set for about page -->
<div style="font-size: 32px" >
<h1>About Us </h1>
<h2 class="label label-info">{{message.about}}</h2>
</div>
<!-- content set for contact page -->
<div style="font-size: 32px" >
<h1>Contact</h1>
<h2 class="label label-info">{{message.contact}}</h2>
</div>
<!-- this file is very important it is include in main file by ng-view-->
<div class="alert alert-info">Now below load multiple views i am from <b class="badge">uirouter.html</b> which is set by <i class="badge"> ng-view</i>
</div>
<i class="badge">load home.html file by ng-include </i>
<br/>
<!-- when controller set then in scope home.template home.html set and it will load that template-->
<div class="alert bg-success" ng-include="template.home"></div>
<i class="badge">load aboutus.html file by ng-include </i>
<br/>
<!-- when controller set then in scope about.template aboutus.html set and it will load that template-->
<div class="alert bg-warning" ng-include="template.about"></div>
<i class="badge">load contactus.html file by ng-include</i>
<br/>
<!-- when controller set then in scope contact.template contactus.html set and it will load that template-->
<div class="alert bg-danger" ng-include="template.contact"></div>