In
the previous post Defining routes using$routeProvider we saw on how to use the $routeProvider to define routes and
assign each route to a .html page, this works when the views are complex and
has more content, but if the views are simple we need not have separate .html
pages to define the views instead we can embed the static HTML content for the
view in the $routeProvider
configuration itself.
In the following example we shall see on how to use the $routeProvider with static HTML content for the templates.
Main HTML Page with ng-view
The templates defined in the $routeProvider will be replaced in the location of the ng-view directive tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div>
<div>
<div>
<a href="#ListContacts">List Contacts</a> |
<a href="#AddContact">Add Contact</a>
</div>
<hr/>
<ng-view></ng-view>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="ContactsApp.js"></script>
</body>
</html>
.js File with Route Configuration
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(function($routeProvider) {
$routeProvider.
when('/ListContacts', {
template: '<b>List all Contacts Template</b>',
}).
when('/AddContact', {
template: '<b>Add Contact Template</b>',
}).
otherwise({
redirectTo: '/ListContacts'
});
});
In the following example we shall see on how to use the $routeProvider with static HTML content for the templates.
Main HTML Page with ng-view
The templates defined in the $routeProvider will be replaced in the location of the ng-view directive tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div>
<div>
<div>
<a href="#ListContacts">List Contacts</a> |
<a href="#AddContact">Add Contact</a>
</div>
<hr/>
<ng-view></ng-view>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="ContactsApp.js"></script>
</body>
</html>
.js File with Route Configuration
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(function($routeProvider) {
$routeProvider.
when('/ListContacts', {
template: '<b>List all Contacts Template</b>',
}).
when('/AddContact', {
template: '<b>Add Contact Template</b>',
}).
otherwise({
redirectTo: '/ListContacts'
});
});
No comments:
Post a Comment