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:-
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:-
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:-
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:-
Step 2:- Create index.html in your application:-
- index.html // will hold the main template for our app
- app.js // our angular code
- partial-home.html // home page code
<!-- 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:-
Presently we have made the routerApp that we effectively connected to our body in the index.html document.//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 }); });
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 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 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, April 26, 2016
There are currently no comments for "What is $stateprovider/UI-Routing in angularJs?"
Post a Comment