Angular Routing
AngularJS Routing
The
ngRoute module helps your application to move past times a Single Page Application.What is Routing inward AngularJS?
If y'all desire to navigate to dissimilar pages inward your application, exactly y'all likewise desire the application to endure a SPA (Single Page Application), alongside no page reloading, y'all tin utilisation thengRoute module.The
ngRoute module routes your application to dissimilar pages without reloading the entire application.Example:
Navigate to "red.htm", "green.htm", in addition to "blue.htm": <body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});</script>
</body> What produce I Need?
To brand your applications create for routing, y'all must include the AngularJS Route module: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> ngRoute every bit a dependency inward the application module: var app = angular.module("myApp", ["ngRoute"]); $routeProvider.Use the
$routeProvider to configure dissimilar routes inward your application: app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
}); Where Does it Go?
Your application needs a container to grade the content provided past times the routing.This container is the
ng-view directive.There are 3 dissimilar ways to include the
ng-view directive inward your application:Example:
<div ng-view></div> Example:
<ng-view></ng-view> Example:
<div class="ng-view"></div> Applications tin alone bring 1 ng-view directive, in addition to this volition endure the placeholder for all views provided past times the route.$routeProvider
With the$routeProvider y'all tin define what page to display when a user clicks a link.Example:
Define a$routeProvider: var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
$routeProvider using the config method of your application. Work registered inward the config method volition endure performed when the application is loading.Controllers
With the$routeProvider y'all tin likewise define a controller for each "view".Example:
Add controllers: var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I dearest London";
});
app.controller("parisCtrl", function ($scope) {
$scope.msg = "I dearest Paris";
});
The files looks similar this:
london.htm
<h1>London</h1>
<h3>London is the uppercase metropolis of England.</h3>
<p>It is the unopen to populous metropolis inward the United Kingdom, alongside a metropolitan expanse of over xiii meg inhabitants.</p>
<p>{{msg}}</p> paris.htm
<h1>Paris</h1>
<h3>Paris is the uppercase metropolis of France.</h3>
<p>The Paris expanse is 1 of the largest population centers inward Europe, alongside to a greater extent than than 12 meg inhabitants.</p>
<p>{{msg}}</p> Template
In the previous examples nosotros bring used thetemplateUrl belongings inward the $routeProvider.when method.You tin likewise utilisation the
template property, which allows y'all to write HTML straight inward the belongings value, in addition to non cite to a page.Example:
Write templates: var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to alter this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas comprise unopen to 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes comprise unopen to 95% water.</p>"
});
});
The otherwise method
In the previous examples nosotros bring used thewhen method of the $routeProvider.You tin likewise utilisation the
otherwise method, which is the default road when none of the others larn a match.Example:
If neither the "Banana" nor the "Tomato" link has been clicked, allow them know: var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas comprise unopen to 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes comprise unopen to 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
});
});
Comments
Post a Comment