Steps
- Include script angular-route.min.js
- Define a home page with various links and a placeholder defined by ng-show directive
- The other template pages will be injected at the location of ng-show
- Create multiple templates (pages) to include dynamically on home page
- Define module and ngRoute dependency, which provides $routeProvider object
- Define module config containing mappings of URLs with :
- Templates (Pages to include)
- Controllers (Logic to run before view/pages)
- Define all controllers
Example
<title>Hello</title>
<script src="scripts/angular.min.js" />
<script src="scripts/angular-route.min.js" /> </head> <body>
<table>
<tr>
<td colspan="2" class="header">
<h1>Website header</h1>
</td>
</tr>
<tr>
<td class="menu">
<a href="#/home">Home</a>
<a href="#/trainings">Trainings</a>
<a href="#/students">Students</a>
</td>
<td class="container">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<h1>Website Footer</h1>
</td>
</tr>
</table> </body>
TEMPLATES
Create a directory "templates" and put below pages in it
home.html
<h1>{{ message }}</h1>
.......
.....
.....
trainings.html
<h1>Trainings offered</h1>
<ul>
<li ng-repeat="training in trainings">
{{ course }}
</li>
</ul>
students.html<h1>Student list</h1>
<ul>
<li ng-repeat="student in students">
{{ student.name }} </li></ul>
JS
var app = angular.module("module1", ["ngRoute"]);
app.config( function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "templates/home.html",
controller: "homeController"
})
.when("/trainings", {
templateUrl: "templates/trainings.html",
controller: "trainingController"
})
.when("/students", {
templateUrl: "templates/students.html",
controller: "studentController"
})
});
app.controller("homeController", function ($scope) {
$scope.message = "Welcome to Home page";
});
app.controller("trainingController", function ($scope) {
$scope.trainings = ["AngularJS", "HTML", "CSS", "Javascript"];
});
app.controller("studentController", function ($scope, $http) {
$http.get("service/api/GetStudents").then( function(response) {
$scope.students = response.data;
})
});
Notes
- Access application using : <host>:<port>/index.html
- When you click on the first link "Home", you will get URL :
<host>:<port>/index.html#/home - According to the Config
- "/home" is mapped with "homeController" to populate the model and execute the business logic
- Template "templates/home.html" will be injected at the placeholder defined by directive ng-view on index.html
Remove # from URLs
- Enable HTML5 mode using $locationProvider
- Remove # from called URLs
JS
app.config( function ($routeProvider, $locationProvider) {
$routeProvider
.when(...)
.when(...)
.otherwise(...)
$locationProvider.html5Mode( {
enabled: true,
requireBase: false
});
});
Index.html
<a href="/home">Home</a>
<a href="/trainings">Trainings</a>
<a href="/students">Students</a>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.