{"id":2613,"date":"2017-06-17T12:46:05","date_gmt":"2017-06-17T07:16:05","guid":{"rendered":"https:\/\/code4developers.com\/?p=2613"},"modified":"2018-09-04T20:55:40","modified_gmt":"2018-09-04T15:25:40","slug":"ui-routing-basics","status":"publish","type":"post","link":"https:\/\/code4developers.com\/ui-routing-basics\/","title":{"rendered":"UI-Routing &#8211; Basics"},"content":{"rendered":"<p><strong>Introduction<\/strong><\/p>\n<p>In the present scenario, AngularJS is the most trusted framework for the creation of Single Page Applications (SPA), and UI-Routing is one of the most important aspects. We want to keep our navigation feeling like a normal site and want to load the pages without refreshing the Browser. For this, we have to go through Angular routing i.e. <a href=\"https:\/\/docs.angularjs.org\/api\/ngRoute\" target=\"_blank\" rel=\"noopener\">ngRoute method<\/a>.<\/p>\n<p>Also, find my article to remove hash from URL\u00a0<a href=\"https:\/\/code4developers.com\/how-to-remove-hash-from-application-url-in-angularjs\/\">here<\/a>.<\/p>\n<p><!--more--><\/p>\n<p><strong>Overview<\/strong><\/p>\n<p>Before starting, you must have a basic knowledge about <a href=\"https:\/\/angular-ui.github.io\/\" target=\"_blank\" rel=\"noopener\">Angular UI<\/a>.<\/p>\n<p><strong>What is Angular ui-Router?<\/strong><\/p>\n<p>ui-Router is a routing framework built by Angular UI team. It is different from ngRoute as it changes your views, which are based on the State of the Application and not by route URL.<\/p>\n<p>It provides features such as States, Views, URLs, Parameter, Resolve Data and Transition.<\/p>\n<p><strong>States vs URL Route<\/strong><\/p>\n<p>Ui-router Applications behaves like a state machine. Let us take an example of an Application in which each feature is a set of the state for the Application. Only one State can be active at one time and the user must navigate from one State to another to activate a typical feature.<\/p>\n<p>Some examples of States might be dashboard, messages, shoppingcart or blogentry.<\/p>\n<p><strong>State will be further explained in a future article.<\/strong><\/p>\n<p>While using ngRoute, one has to write ngInclude or some other methods and this can be confusing to a user. This method is appropriate in top-down view of the Application as all the States, routing and views are handled in on .config().<\/p>\n<p><strong>Sample Application<\/strong><\/p>\n<ul>\n<li>Get UI-Router for AngularJS code, using your preferred mechanism.\n<ul>\n<li>Using npm: \u2018npm install &#8211;save angular-ui-router@next\u2019.<\/li>\n<li>Using bower- \u2018bower install angular-ui-router@1.0.0-beta.3\u2019.<\/li>\n<li>Download directly from <a href=\"http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular-ui-router\/0.2.10\/angular-ui-router.js\" target=\"_blank\" rel=\"noopener\">cdnjs<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>Add the script file references in HTML page in the order given below.<\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">&lt;script\u00a0src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.2.16\/angular.min.js\"\u00a0type=\"text\/javascript\"&gt;&lt;\/script&gt;\u00a0\u00a0\r\n\r\n&lt;script\u00a0src=\"http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular-ui-router\/0.2.10\/angular-ui-router.js\"\u00a0type=\"text\/javascript\"&gt;&lt;\/script&gt;\u00a0\u00a0\r\n\r\n&lt;script\u00a0src=\"helloworld.js\"&gt;&lt;\/script&gt;<\/pre>\n<p><strong><u>Note<br \/>\n<\/u><br \/>\n<\/strong>Here, I have used online CDN reference for AngularJS and UI-routerJS. Also, the order of the file must be, as shown above. UiRouter file must be placed after AngularJS file, followed by placing other JS files.<\/p>\n<p><strong>Create Angular module<\/strong><\/p>\n<p>Add Angular module in <em>helloworld.js<\/em><\/p>\n<pre class=\"lang:default decode:true\">var\u00a0myApp\u00a0=\u00a0angular.module('helloworld',\u00a0['ui.router']);<\/pre>\n<p>Here, we have added dependency for ui-router in our main module \u2018<em>helloworld\u2019<\/em>.<\/p>\n<p><strong>Creating State<\/strong><\/p>\n<p>State is a basic building-block for UI-Router Application. This script object is a simple object definition of State definition.<\/p>\n<pre class=\"lang:default decode:true\">var\u00a0helloState\u00a0=\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0name:\u00a0'hello',\r\n\u00a0\u00a0\u00a0\u00a0url:\u00a0'\/hello',\r\n\u00a0\u00a0\u00a0\u00a0template:\u00a0'&lt;h3&gt;hello\u00a0world!&lt;\/h3&gt;'\r\n\u00a0\u00a0}<\/pre>\n<p>This State definition has 3 properties, which are given below.<\/p>\n<ul>\n<li><em>name<strong><br \/>\n<\/strong><\/em>The name of State. In this case, it is named hello<\/li>\n<li><em>URL<br \/>\n<\/em>When the State is active, the Browser&#8217;s URL will be <em>\/hello<\/em>.<\/li>\n<li><em>template<strong><br \/>\n<\/strong><\/em>The template, which is to be rendered when State is active will be loaded in the ViewPort.<\/li>\n<\/ul>\n<p><strong>Register States<\/strong><\/p>\n<p>Create another State \u2018about\u2019. Register both the $stateProvider in .config() block.<\/p>\n<p>Because $stateProvider is an <a href=\"https:\/\/docs.angularjs.org\/guide\/providers#provider-recipe\" target=\"_blank\" rel=\"noopener\">Angular Provider<\/a>, you must inject it into a <a href=\"https:\/\/docs.angularjs.org\/guide\/module#configuration-blocks\" target=\"_blank\" rel=\"noopener\">.config() block<\/a> using the code.<\/p>\n<pre class=\"lang:default decode:true\">myApp.config(function($stateProvider)\u00a0{\u00a0\u00a0\r\n\u00a0\u00a0var\u00a0helloState\u00a0=\u00a0{\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0name:\u00a0'hello',\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0url:\u00a0'\/hello',\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0template:\u00a0'&lt;h3&gt;hello\u00a0world!&lt;\/h3&gt;'\u00a0\u00a0\r\n\u00a0\u00a0}\r\n\u00a0\u00a0var\u00a0aboutState\u00a0=\u00a0{\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0name:\u00a0'about',\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0url:\u00a0'\/about',\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0template:\u00a0'&lt;h3&gt;Its\u00a0the\u00a0UI-Router\u00a0hello\u00a0world\u00a0app!&lt;\/h3&gt;'\u00a0\u00a0\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0$stateProvider.state(helloState);\u00a0\u00a0\r\n\u00a0\u00a0$stateProvider.state(aboutState);\u00a0\u00a0\r\n});<\/pre>\n<p><strong>ViewPort<\/strong><\/p>\n<p>Add &lt;ui-view&gt; tag i.e. ViewPort in your HTML file. The &lt;ui-view&gt; tag is a ui-router ViewPort. Whenever the State is activated, the State\u2019s view i.e. template will be loaded in the ViewPort.<\/p>\n<pre class=\"lang:default decode:true\">&lt;body\u00a0ng-app=\"helloworld\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0&lt;ui-view&gt;&lt;\/ui-view&gt;\r\n&lt;\/body&gt;<\/pre>\n<p><strong>Links<\/strong><\/p>\n<p>Add some &lt;ui-href&gt; tag to show the links. When clicked, the links will be active in a State.<\/p>\n<pre class=\"lang:default decode:true\">\u00a0&lt;body\u00a0ng-app=\"helloworld\"&gt;\u00a0\u00a0\r\n\u00a0&lt;a\u00a0ui-sref=\"hello\"\u00a0ui-sref-active=\"active\"&gt;Hello&lt;\/a&gt;\u00a0\u00a0\r\n\u00a0&lt;a\u00a0ui-sref=\"about\"\u00a0ui-sref-active=\"active\"&gt;About&lt;\/a&gt;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\n\u00a0&lt;ui-view&gt;&lt;\/ui-view&gt;\u00a0\u00a0\r\n\u00a0&lt;\/body&gt;<\/pre>\n<p>A ui-sref is a Directive, which behaves similar to HTML href. Instead of referencing a URL\u00a0like HREF, it references a State and\u00a0ui-sref Directive automatically builds a href attribute (&lt;a href=&#8230;&gt;&lt;\/a&gt;), which is based on your State\u2019s URL.<\/p>\n<p><strong>Active link<\/strong><\/p>\n<p>Add &lt;ui-sref-active=&#8221;active&#8221;&gt; tag to the ui-sref links. This Directive will add the active CSS class to the link when the target State is active.<\/p>\n<pre class=\"lang:default decode:true\">&lt;a\u00a0ui-sref=\"hello\"\u00a0ui-sref-active=\"active\"&gt;Hello&lt;\/a&gt; \u00a0\r\n&lt;a\u00a0ui-sref=\"about\"\u00a0ui-sref-active=\"active\"&gt;About&lt;\/a&gt;<\/pre>\n<p>Finally, add the style tag and the active class to style the active link as Red and <em>bold<\/em>.<\/p>\n<p><strong>Conclusion<\/strong><\/p>\n<p>Hence, we have created a simple demo for routing with UI-Router. In the next part, we will cover UI-Router States in detail.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In the present scenario, AngularJS is the most trusted framework for the creation of Single Page Applications (SPA), and UI-Routing is one of the most important aspects. We want&hellip;<\/p>\n","protected":false},"author":7,"featured_media":2571,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[25,240],"powerkit_post_featured":[],"class_list":{"0":"post-2613","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angularjs","8":"tag-angularjs","9":"tag-ui-routing"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angularjs.png?fit=160%2C160&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-G9","jetpack-related-posts":[{"id":2575,"url":"https:\/\/code4developers.com\/remove-hash-from-application-url-in-angularjs\/","url_meta":{"origin":2613,"position":0},"title":"How To Remove Hash From Application URL In AngularJS","author":"Arif Khoja","date":"June 10, 2017","format":false,"excerpt":"Introduction Angular is a framework, which is developed and maintained by Google. It has features such as Two-Way binding, Dependency Injection, Testing and Directives. It is widely used to create a Single Page Application(SPA) with Two-Way binding. To find more, refer the URL https:\/\/docs.angularjs.org\/guide Going further, I assume that you\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3222,"url":"https:\/\/code4developers.com\/improving-the-performance-of-angular-js-code-by-learning-the-basics-of-ng-repeat\/","url_meta":{"origin":2613,"position":1},"title":"How to optimize the performance of ng-repeat in AngularJS?","author":"Arif Khoja","date":"February 7, 2018","format":false,"excerpt":"Today we would focus on improving the performance of Angular JS code by learning the basics of ng-repeat and then how to enhance its capabilities. ng-repeat :-\u00a0 It is directive which create instant of template for each item in the collection. It is identical to looping concept in any language\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3544,"url":"https:\/\/code4developers.com\/angular-6-crud-part-1-project-setup-routing-service\/","url_meta":{"origin":2613,"position":2},"title":"Angular 6 CRUD \u2013 Part 1: Project Setup, Routing, Service","author":"Nisarg Dave","date":"May 9, 2018","format":false,"excerpt":"This article is Part 1 Angular 6 CRUD. In this article and upcoming article, we will discuss performing CRUD operations in Angular 6 i.e. Creating, Reading, Updating and Deleting in Angular 6 with simple examples. We will also discuss about the Angular 6 Project setup, apply Routing, create service to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/05\/json-server-call-300x297.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3340,"url":"https:\/\/code4developers.com\/top-angularjs-interview-question\/","url_meta":{"origin":2613,"position":3},"title":"Top AngularJS interview questions","author":"Arif Khoja","date":"March 23, 2018","format":false,"excerpt":"Read Angular js interview questions including topic advanced topics like Dependency injection, Two-way binding, scope in angular js and many more. 1.Explain Directive scopes? There are three types of directive scopes available in Angular. Parent Scope: is default scope Child Scope: If the properties and functions you set on the\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3189,"url":"https:\/\/code4developers.com\/what-react-is-and-how-it-is-different\/","url_meta":{"origin":2613,"position":4},"title":"What React is, and how it is different.","author":"Arif Khoja","date":"January 3, 2018","format":false,"excerpt":"We often compare React, Angular and Vue. I get why. But it isn\u2019t the best. Because both Vue and Angular are more complete solutions for building web apps, while React are just a library for dealing with the user interface part of it. And leave other things like communicating with\u2026","rel":"","context":"In &quot;React&quot;","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3489,"url":"https:\/\/code4developers.com\/automatic-bootstrapping-and-manual-bootstrapping-multiple-modules-in-angularjs\/","url_meta":{"origin":2613,"position":5},"title":"Bootstrapping multiple modules in AngularJS","author":"Arif Khoja","date":"April 26, 2018","format":false,"excerpt":"In this article we will be\u00a0Understanding AngularJS Bootstrap Process talking about automatic\u00a0Bootstrapping and manual Bootstrapping multiple modules in AngularJS. Angular initiates automatically upon [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]DOMContentLoaded[\/marker] event or when the angular.js script is downloaded to the browser and the [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]document.readyState[\/marker] is set to [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]complete[\/marker]. At this\u2026","rel":"","context":"In &quot;AngularJs&quot;","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2613"}],"version-history":[{"count":7,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2613\/revisions"}],"predecessor-version":[{"id":3597,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2613\/revisions\/3597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2571"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2613"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}