I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

Part 17::What is $stateprovider/UI-Routing in angularJs?

The UI-Router is a directing system for AngularJS worked by the AngularUI group. It gives an alternate methodology than ngRoute in that it changes your application sees in light of condition of the application and not only the route URL.
For video lesson visit :- https://www.youtube.com/watch?v=sjDmmcARWCE&feature=em-subs_digest

Differences between STATES and URL ROUTE:-
With this approach, your perspectives and routes aren't secured to the site URL. Along these lines, you can change the parts of your site utilizing your steering regardless of the possibility that the URL does not change. 

At the point when utilizing ngRoute, you'd need to utilize ngInclude or different techniques and this could get befuddling. Since the majority of your states, steering, and perspectives are taken care of in your one .config(), this would help when utilizing a top-down perspective of your application.

Step 1:- We will need a few files to add in our application:-
  1. index.html  // will hold the main template for our app 
  2. app.js  // our angular code
  3. partial-home.html  // home page code
 Step 2:- Create index.html in your application:-
<!-- index.html -->
 <!DOCTYPE html>
 <html>
 <head>
<!-- CSS (load bootstrap) -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <style>
 .navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
 <!-- apply our angular app to our site -->
<body ng-app="routerApp">
 <!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav"> <li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li> </ul> </nav>
 <!-- main content --> <div class="container">
 <!-- this area to inject code here.  -->
<div ui-view>
</div>
 </div>
</body>
 </html>

While making a link with UI-Router, you will utilize ui-sref. The href will be generated from this and you need this to indicate a specific condition of your application. These are made in your app.js. 
We likewise utilize <div ui-view></div> rather than ngRoute's <div ng-view></div>. 

Step 3:- Create app.js in your application:-
//app.js
 var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider)
 { $urlRouterProvider.otherwise('/home');
 $stateProvider.state('home', { url: '/home', templateUrl: 'partial-home.html' }).state('about', { 
// we'll get to this in a bit
 }); });
Presently we have made the routerApp that we effectively connected to our body in the index.html document.
Here we have a .state() for home and for about. In home, we are utilizing the format document partial-home.html 

Step 4:- Create partial-home.html in your application:-
<!-- partial-home.html -->
 <div class="jumbotron text-center"> 
<h1>The Homey Page</h1> 
<p>This page demonstrates <span class="text-danger">nested</span> views.</p> </div>

Description:-You can use UI-routing for when use state based routing.UI-route is third party  library which more effective than ngroute. $stateprovider service help you to check state of application ,you can redirect on any other url without changing of url with ui-route withe the help of state and $stateprovider.
you don't need change anything in your application only config file.
for more details Please visit link:-http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/
You have just read an article that categorized by title AngularJs by title Part 17::What is $stateprovider/UI-Routing in angularJs?. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/04/part-17what-is-stateproviderui-routing.html. Thank You!
Author: Bikesh Srivastava - Tuesday, 26 April 2016

There are currently no comments for "Part 17::What is $stateprovider/UI-Routing in angularJs?"

Post a Comment

Life Is Complicated, But Now programmer Can Keep It Simple.