How routing works in AngularJs

by Virender
September 24, 2015

In AngularJs $stateProvider is use for maintain state of application . $stateProvider mainly focus on navigation of application . state maintain via controller , template and view . Its work via state hierarchy and can be have nested states.

State configured into application configuration sections.

$stateProvider dependent on $urlRouterProvider and $urlMatcherFactoryProvider.

In this example you will see how to use $stateProvider in AngularJs.

In this demo we are using four .html pages.

index.html  – main page
aboutUs.html
contactUs.html
queryString.html – page where catching state parameters


Demo – In demo we have four link with href

Home         –      #/
About Us    –     #aboutUs
Contact Us    –    #contactUs
Query String    –    #queryString/1001

When user click on these links state will be match and related controller and view will be 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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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>
      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>
<!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"></script>
<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

1
<h5>About Us View</h5>
<h5>About Us View</h5>
 
 

contactus.html

1
<h5>Contact Us View</h5>
<h5>Contact Us View</h5>
 


queryString.html

1
2
<h5> Queery String View</h4>
<div ng-controller="TestController" > Id value - {{IDValue}}</div>

<h5> Queery String View</h4>
<div ng-controller="TestController" > Id value - {{IDValue}}</div>

Share:

Tags:

Related posts