We are accustomed using route config for multiple page views in AngularJS. So how about embedding multiple page using custom directive like element, attribute and class directive. Although we can use old method like innerHTML or innerText in jquery, but that is still a huge amount of coding and become more complex when you add more pages, but with angularjs custom directive it's became simpler. Just watch the video and see what you can do with it.
You can download the code from google drive it is in zipped format.
https://drive.google.com/file/d/0BznrW3lgX0ozWWV5ZXUwY2hvRms/view?usp=sharing
1. app.js
var app=angular.module('app',[]);
app.controller('MainCtrl',function($scope) {
})
.directive('page1',function() {
return {
restrict : 'E',
templateUrl : 'firstPage.html',
controller:'MainCtrl'
}
})
.directive('page2',function() {
return {
restrict : 'A',
templateUrl : 'secondPage.html',
controller:'MainCtrl'
}
})
.directive('page3',function() {
return {
restrict : 'C',
templateUrl : 'thirdPage.html',
controller:'MainCtrl'
}
});
2. index.html
<html ng-app="app">
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table border="1">
<tr>
<th>Element</th><th>Attribute</th><th>Class</th>
</tr>
<tr>
<td><page1></page1></td>
<td page2></td>
<td class="page3"></td>
</tr>
</table>
</body>
</html>
3. firstPage.html
<h2 style="color:red">I am an element and in the first cell
</h2>
4. secondPage.html
<h2 style="color:blue">I am an attribute and in the second cell</h2>
5. thirdPage.html
<h2 style="color:green">I am a class in the last cell</h2>
Routing seems to bring the actual implementation of AngularJS. In this article I have used four pages to be used inside the main page. The main page is index.html. Script page is app.js and four pages which is embedded with templateUrl are firstPage.html, secondPage.html, thirdPage.html and errorPage.html. Hyperlink has been created in index.html to navigate to first three pages and one errorPage.html to redirect if wrong page is called. I am adding code of all the files related to this project.
1. app.js
var app = angular.module('app',['ngRoute']);
app.controller('MainCtrl',function($scope){
})
.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/', {
template:'<h1>Welcome to my home page</h1>',
controller:'MainCtrl'
}).
when('/firstPage', {
templateUrl:'firstPage.html',
controller:'MainCtrl'
}).
when('/secondPage', {
templateUrl:'secondPage.html',
controller:'MainCtrl'
}).
when('/thirdPage', {
templateUrl:'thirdPage.html',
controller:'MainCtrl'
}).
when('/errorPage', {
templateUrl:'errorPage.html',
controller:'MainCtrl'
}).
otherwise( {
redirectTo : '/errorPage'
});
}]);
2. index.html
<html ng-app="app">
<head>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<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>
<li><a href="#/">Back to Home</a></li>
</ul>
<div ng-view></div>
</body>
</html>
3. firstPage.html
<html>
</body>
<h1>This is my first page</h1>
</body>
</html>
4. secondPage.html
<html>
</body>
<h1>I am onto my second page</h1>
</body>
</html>
5. thirdPage.html
<html>
</body>
<h1>I am at last in my last page</h1>
</body>
</html>
6. errorPage.html
<html>
</body>
<h1>You have entered a wrong parameter</h1>
</body>
</html>
