How routing works in angular js

How routing works in
AngularJs

In Angular$stateProviderisuse formaintainstate of application.$stateProvidermainlyfocuson
navigationof application.state maintainviacontroller,template andview .Itsworkviastate hierarchy
and can be have nestedstates.
State configuredintoapplicationconfigurationsections.
$stateProviderdependenton $urlRouterProviderand$urlMatcherFactoryProvider.
In thisexample youwillsee howtouse $stateProviderinAngularJs.
In thisdemowe are usingfour .html pages.
index.html - main page
aboutUs.html
contactUs.html
queryString.html - page where catching state parameters
Demo - Indemowe have four linkwithhref
Home - #/
AboutUs - #aboutUs
Contact Us - #contactUs
Query String - #queryString/1001
Whenuserclickon these linksstate will be matchandrelatedcontrollerandview willbe load
$stateProvider.state("home", {
url: "/",
template: '<h5> This is home Page </h5>'
}).state('aboutUs', {
url: '/aboutUs',
templateUrl: "aboutUs.html",
}).state('contactUs', {
url: '/contactUs',
templateUrl: "contactUs.html",
}).state('queryString', {
url: '/queryString/:id',
templateUrl: "queryString.html",
controller: 'TestController'
});
Plunker - http://plnkr.co/edit/ZY9HSGR8TCtQFycJytuF?p=preview

index.html
<!DOCTYPE html>
<html>
<head>
<title>How routing works in AngularJs </title>
<link rel="stylesheet"
href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></scri
pt>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-
router/0.2.15/angular-ui-router.js"></script>
<script>
var app = angular.module('queryStringApp', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', function
($stateProvider, $urlRouterProvider) {
$stateProvider.state("home", {
url: "/",
template: '<h5> This is home Page </h5>'
}).state('aboutUs', {
url: '/aboutUs',
templateUrl: "aboutUs.html",
}).state('contactUs', {
url: '/contactUs',
templateUrl: "contactUs.html",
}).state('queryString', {
url: '/queryString/:id',
templateUrl: "queryString.html",
controller: 'TestController'
});
}]);
app.controller('TestController', function ($scope, $stateParams) {
$scope.IDValue = $stateParams.id;
});
</script>
</head>
<body ng-app="queryStringApp">
<hr> <a href="#/">Home</a> <a href="#aboutUs">About Us</a> <a
href="#contactUs">Contact Us</a> <a href="#queryString/1001">Query String</a>
<hr>
<div ui-view class="container slide"></div>
<br /><br /><br /><br /><br />
<div style="background-color:lightgray">
<p>
Learn More about UI-router
<a href="https://github.com/angular-ui/ui-router "
target="_blank">https://github.com/angular-ui/ui-router</a>
</p>
<br />
<div>
<h4> Fix Following problem in $stateProvider </h4>
<h5> Fix $stateProvider returns "not found " problem </h5>
<h5>Uncaught ReferenceError: $stateProvider is not defined
Angular UI Router </h5>
<h5>angularjs ui-router: Unknown provider: $stateProvider </h5>
</div>
</div>
</body>
</html>
aboutUs.html

<h5>About Us View</h5>
contactUs.html
<h5>Contact Us View</h5>
queryString.html
<h5> Queery String View</h4>
<div ng-controller="TestController" >
Id value - {{IDValue}}
</div>
Thanks
www.codeandyou.com
http://www.codeandyou.com/2015/09/how-routing-
works-in-angularjs.html
Keywords - How routing works in AngularJs, Routing in AngularJs

How routing works in angular js

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a How routing works in angular js

Semelhante a How routing works in angular js (20)

Mais de codeandyou forums

Mais de codeandyou forums (17)

Último

Último (20)

How routing works in angular js