How routing works in AngularJs

on
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 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>
<!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>



















































Comments











Post a Comment