Create Five Page Web Application using Angular:-
......................................................................................................................................
1) First Create HTML Page
2) Link two plugin first angular and another will be route configuration plugin.
3) Create a header, middle, and footer section
4) create ng-app and ng-controller section then write <div ng-view> </div>
It is used to load the child template of the angular main page
5 Create Controller file and define different routing path
app=angular.module('modulename',[ngRoute]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pagename',
controller : 'contoller'
})
.when('/pathname', {
templateUrl : 'pagename',
controller : 'controllername'
})
....
...
...
.otherwise({redirectTo: '/'});
app.controller('Controllername', function($scope) {
$scope.message = 'data';
});
Complete Code for Angular Single Page Application:-
Design Web Page :-
<html>
<head>
<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>
<style type="text/css">
*
{
margin:0px;
}
header, footer
{
background-color: gray;
height: 150px;
color: white;
}
header a
{
color:white;
font-size: 25px;
text-decoration: none;
}
section
{
height: 400px;
background-color: cyan;
}
</style>
</head>
<body ng-app='myApp'>
<header>
<a href="#/">Home</a>
<a href="#/blog">Blog</a>
<a href="#/about">About</a>
<a href="#/services">Services</a>
</header>
<section>
<div ng-view></div>
</section>
<footer>
</footer>
<script src="app.js"></script>
</body>
</html>
...........................................................................
Code for app.js:-
.................................................................................................
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'HomeController'
})
.when('/blog', {
templateUrl : 'pages/blog.html',
controller : 'BlogController'
})
.when('/about', {
templateUrl : 'pages/about.html'
})
.when('/services', {
templateUrl : 'pages/services.html'
})
.otherwise({redirectTo: '/'});
});
app.controller('HomeController', function($scope) {
$scope.message = 'Hello from HomeController';
});
app.controller('BlogController', function($scope) {
$scope.message = 'Hello from BlogController';
});
app.controller('AboutController', function($scope) {
$scope.message = 'Hello from AboutController';
});
......................................................................................................................................
1) First Create HTML Page
2) Link two plugin first angular and another will be route configuration plugin.
3) Create a header, middle, and footer section
4) create ng-app and ng-controller section then write <div ng-view> </div>
It is used to load the child template of the angular main page
5 Create Controller file and define different routing path
app=angular.module('modulename',[ngRoute]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pagename',
controller : 'contoller'
})
.when('/pathname', {
templateUrl : 'pagename',
controller : 'controllername'
})
...
...
.otherwise({redirectTo: '/'});
app.controller('Controllername', function($scope) {
$scope.message = 'data';
});
Complete Code for Angular Single Page Application:-
Design Web Page :-
<html>
<head>
<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>
<style type="text/css">
*
{
margin:0px;
}
header, footer
{
background-color: gray;
height: 150px;
color: white;
}
header a
{
color:white;
font-size: 25px;
text-decoration: none;
}
section
{
height: 400px;
background-color: cyan;
}
</style>
</head>
<body ng-app='myApp'>
<header>
<a href="#/">Home</a>
<a href="#/blog">Blog</a>
<a href="#/about">About</a>
<a href="#/services">Services</a>
</header>
<section>
<div ng-view></div>
</section>
<footer>
</footer>
<script src="app.js"></script>
</body>
</html>
...........................................................................
Code for app.js:-
.................................................................................................
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'HomeController'
})
.when('/blog', {
templateUrl : 'pages/blog.html',
controller : 'BlogController'
})
.when('/about', {
templateUrl : 'pages/about.html'
})
.when('/services', {
templateUrl : 'pages/services.html'
})
.otherwise({redirectTo: '/'});
});
app.controller('HomeController', function($scope) {
$scope.message = 'Hello from HomeController';
});
app.controller('BlogController', function($scope) {
$scope.message = 'Hello from BlogController';
});
app.controller('AboutController', function($scope) {
$scope.message = 'Hello from AboutController';
});
POST Answer of Questions and ASK to Doubt