How routing works in angular js
•Download as DOCX, PDF•
0 likes•541 views
$stateProvider is used in AngularJs to manage state changes and navigation within an application. It defines states that include a URL, template, and controller. States can be nested. $stateProvider works with $urlRouterProvider and $urlMatcherFactoryProvider to handle routing. The example shows setting up four states for "home", "aboutUs", "contactUs", and "queryString" pages using $stateProvider, with the associated URLs, templates, and a controller to retrieve route parameters. Clicking on links will match the state and load the correct view.
Report
Share
How routing works in angular js
- 1. How routing works in AngularJs
- 2. 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
- 4. 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']);
- 5. 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
- 6. <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