AngularJS Routing
AngularJS
Routing helps to you to create a Single Page Application. ngRoute module helps you to navigate to different pages in your
application with no page reloading and Also helps to create the application to
be a Single Page Application.
To enable AngularJS
Routing, you must include the AngularJS Route module (angular-route.js)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
After
adding angular-route.js reference, you must specify the ngRoute as a dependency
in the application module as below:
var myApp = angular.module("myApp", ["ngRoute"]);
Now
your application can use route module.
To
configure different routes in your application, you will use the
$routeProvider.
You
can do with $routeProvider
- You can specify what page to display when a user clicks a link
- You can define a controller for each "view"
- You can use the template that allows you to write HTML directly as value
- You can set default route using otherwise method, if there is no route match.
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function
($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Home.htm"
})
.when("/about", {
templateUrl: "about.htm"
})
.when("/contact", {
templateUrl: "contact.htm"
})
.when("/blog", {
templateUrl: "blog.htm",
controller: "blogController"
})
.otherwise({
template: "<h1>None</h1><p>default
routing</p>"
});
});
myApp.controller("blogController", function ($scope) {
$scope.msg = "www.code-view.com";
});
You
need to define a container to show the views or html template provided by the
routing
ngView directive is used to
show the views or html template in the defined routes
You can include the
ng-view directive in three ways in your application
<ng-view></ng-view>
<div ng-view></div>
<div class="ng-view"></div>
Example:-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p>
<a href="#/!">Home</a> |
<a href="#!about">About</a> |
<a href="#!contact">Contact</a> |
<a href="#!blog">Blog</a>
</p>
<div ng-view></div>
<script>
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "Home.htm"
})
.when("/about", {
templateUrl : "about.htm"
})
.when("/contact", {
templateUrl : "contact.htm"
})
.when("/blog", {
templateUrl : "blog.htm",
controller : "blogController"
})
.otherwise({
template : "<h1>None</h1><p>default
routing</p>"
});
});
myApp.controller("blogController", function ($scope) {
$scope.msg = "www.code-view.com";
});
</script>
</body>
</html>
No comments:
Post a comment