{"id":1316,"date":"2015-10-18T22:05:35","date_gmt":"2015-10-19T03:05:35","guid":{"rendered":"http:\/\/www.kuulstuff.com\/blog\/?p=1316"},"modified":"2016-02-24T21:05:47","modified_gmt":"2016-02-25T03:05:47","slug":"angularjs-routes-with-routeprovider-and-stateprovider","status":"publish","type":"post","link":"http:\/\/kuulstuff.com\/blog\/angularjs-routes-with-routeprovider-and-stateprovider\/","title":{"rendered":"AngularJS Routes with $routeProvider and $stateProvider"},"content":{"rendered":"<p>AngularJS Routes are used to load different views or states depending on whether you use a ng-Route or ui-Route. The traditional way of linking the pages in your application is just fine, but with AngularJS routes you can handle dynamic binding better and the routes\u00a0are easier to remember for the user.<\/p>\n<p>Routing with\u00a0<a href=\"http:\/\/www.kuulstuff.com\/blog\/?p=1281\" target=\"_blank\">Angular JS<\/a> allows bookmarking the same url with different categories easier. Routes allow different views to load depending upon the url. Same route can be given to more than one view. For the user, only the keyword appears to be changed, even though the views are loading from different html pages. Basically AngularJS routes are two types:<\/p>\n<ol>\n<li>ngRoute: No nested routes\u00a0are present<\/li>\n<li>ui.router: Nested routes are present<\/li>\n<\/ol>\n<p><script src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\" async=\"\"><\/script><!-- GameCentral_Banner --> <ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-1297284887870121\" data-ad-slot=\"6770181597\" data-ad-format=\"auto\"><\/ins><script>\/\/ <![CDATA[\n(adsbygoogle = window.adsbygoogle || []).push({});\n\/\/ ]]><\/script><\/p>\n<p><strong>ng-Route<\/strong><\/p>\n<p>Include the angular-route js in the script file. You will also need a server for the routes to work. You can set up the Apache Tomcat server. We pass the <a href=\"http:\/\/www.kuulstuff.com\/blog\/?p=1311\" target=\"_blank\">ngRoute <\/a>as a dependency to the module while defining an angular module.<\/p>\n<p style=\"padding-left: 30px;\"><em>var app =angular.module(&#8216;myApp&#8217;, [&#8216;ngRoute]);<\/em><\/p>\n<p>Using the app.config service, we can define the different routes for the links. The keywords used are &#8216;when&#8217; and &#8216;otherwise&#8217;. You can have any number of &#8216;when&#8217; in a $routeProvider provided everytime you return a templateUrl and a controller for that route. For example, in your application you have two menu items, Login and Home. In that case, you have to have two route specified in your $routeProvider. Further, you have to create two additional html pages which have to load in those routes. Also, you have to create two controllers to define what happens in the html pages. Here is an example.<\/p>\n<p style=\"padding-left: 30px;\"><em>myApp.config(function($routeProvider){<\/em><br \/>\n<em> $routeProvider.<\/em><br \/>\n<em>\u00a0 \u00a0 \u00a0 \u00a0when(&#8216;\/home&#8217;,{<\/em><br \/>\n<em>\u00a0 \u00a0 \u00a0 \u00a0templateUrl: &#8216;home.html&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0 \u00a0 \u00a0controller: &#8216;HomeCtrl&#8217;<\/em><br \/>\n<em> }).<\/em><br \/>\n<em>\u00a0 \u00a0 \u00a0 when(&#8216;\/login&#8217;,{<\/em><br \/>\n<em>\u00a0 \u00a0 \u00a0 templateUrl: &#8216;login.html&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0 \u00a0 controller: &#8216;LoginCtrl&#8217;<\/em><br \/>\n<em> }). <\/em><br \/>\n<em>\u00a0 \u00a0 \u00a0 otherwise({<\/em><br \/>\n<em>\u00a0 \u00a0 \u00a0 redirectTo: &#8216;\/login&#8217;<\/em><br \/>\n<em> }); <\/em><br \/>\n<em> });<\/em><\/p>\n<p>Remember to pass the $routeProvider to all the <a href=\"http:\/\/www.kuulstuff.com\/blog\/?p=1303\" target=\"_blank\">controller<\/a>s as a function parameter.<\/p>\n<p style=\"padding-left: 30px;\"><em>myApp.controller(&#8220;HomeCtrl&#8221;, function($scope, $routeProvider){<\/em><\/p>\n<p><em>});<\/em><\/p>\n<p>In the index.html body you have to set up a container or placeholder for the views to load. \u00a0The a links are identified in the html with the &#8216;#&#8217;.<\/p>\n<p style=\"padding-left: 30px;\"><em>&lt;a href=&#8217;#\/login&#8217;&gt;Login&lt;\/a&gt;|&lt;a href=&#8217;#\/home&#8217;&gt;Home&lt;\/a&gt;<\/em><\/p>\n<p style=\"padding-left: 30px;\"><em>&lt;div ng-view&gt;&lt;\/div&gt;<\/em><\/p>\n<p><script src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\" async=\"\"><\/script><!-- GameCentral_Banner --> <ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-1297284887870121\" data-ad-slot=\"6770181597\" data-ad-format=\"auto\"><\/ins><script>\/\/ <![CDATA[\n(adsbygoogle = window.adsbygoogle || []).push({});\n\/\/ ]]><\/script><\/p>\n<p><strong>ui.router<\/strong><\/p>\n<p>Include the CDN of the ui.router javascript file in your index.html. ui.router uses a $stateProvider. We pass the ui.router\u00a0as a dependency to the module while defining an angular module.<\/p>\n<p style=\"padding-left: 30px;\"><em>var demoapp = angular.module(&#8220;demoapp&#8221;, [&#8216;ui.router&#8217;]);<\/em><\/p>\n<p>In ui.router, all the routes are identified with a state rather than a &#8216;#&#8217; Any number of child routes can be created using the $stateProvider. It uses application state changes to load the views accordingly.<\/p>\n<p>The states are managed hierarchically. $stateProvider is defined inside the app.config service. It defines the different states and templateUrls to be loaded for the states. Each state can also defined along with the parent. Here, in this example, list is the child view of home.<\/p>\n<p style=\"padding-left: 30px;\"><em>demoapp.config(function($stateProvider){<\/em><br \/>\n<em>\u00a0 \u00a0 $stateProvider.state(&#8216;home&#8217;, {<\/em><br \/>\n<em>\u00a0 \u00a0 state: &#8216;home&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0url: &#8216;\/home&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0templateUrl: &#8216;home.html&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0controller: &#8216;CarCtrl&#8217;<\/em><br \/>\n<em> }),<\/em><br \/>\n<em>\u00a0 \u00a0$stateProvider.state(&#8216;login&#8217;, {<\/em><br \/>\n<em>\u00a0 \u00a0state: &#8216;login&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0url: &#8216;\/login&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0templateUrl: &#8216;login.html&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0controller: &#8216;BarCtrl&#8217;<\/em><br \/>\n<em> }),<\/em><br \/>\n<em>\u00a0 \u00a0$stateProvider.state(&#8216;list&#8217;, {<\/em><br \/>\n<em>\u00a0 \u00a0state: &#8216;list&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0url: &#8216;\/list&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0parent: &#8216;home&#8217;,<\/em><br \/>\n<em>\u00a0 \u00a0templateUrl: &#8216;home.list.html&#8217;,<\/em><br \/>\n<em>\u00a0 controller: &#8216;ListCtrl&#8217;<\/em><br \/>\n<em> });<\/em><br \/>\n<em>});<\/em><\/p>\n<p>In the child state, you have to specify the parent state. Remember to pass the state\u00a0to all the controllers as a function parameter.<\/p>\n<p style=\"padding-left: 30px;\"><em>demoapp.controller(&#8220;BarCtrl&#8221;, function($scope, $state){<\/em><\/p>\n<p><em>});<\/em><\/p>\n<p>In the html, you have to refer to the states in the link. &#8216;ui-sref&#8217; is used to link the states in the $stateProvider. ui-sref is the wrapper that supports the href in ui-routing. AngularJS will convert the state reference to a href automatically. Also, specify the ui-view to load the views in the container or placeholder.<\/p>\n<p style=\"padding-left: 30px;\"><em>&lt;a ui-sref=&#8221;login&#8221;&gt;Login&lt;\/a&gt;|&lt;a ui-sref=&#8221;home&#8221;&gt;Home&lt;\/a&gt;&lt;br&gt;<\/em><\/p>\n<p style=\"padding-left: 30px;\"><em>&lt;div ui-view&gt;&lt;\/div&gt;<\/em><\/p>\n<p>Routing is pretty simple once you get a hang of it. Just implement and include the correct javascript files in the script tag.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS Routes are used to load different views or states depending on whether you use a ng-Route or ui-Route. The traditional way of linking the pages in your application is just fine, but with AngularJS routes you can handle dynamic binding better and the routes are easier to remember for the user.<a href=\"http:\/\/kuulstuff.com\/blog\/angularjs-routes-with-routeprovider-and-stateprovider\/\" class=\"more-link\">Read More <span class=\"screen-reader-text\">AngularJS Routes with $routeProvider and $stateProvider<\/span><\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21,61],"tags":[1093,1094,1041,1097,1074,1046,1048,1090,1092,1096,1098,1089,1095,1091],"class_list":["post-1316","post","type-post","status-publish","format-standard","hentry","category-daytoday","category-technology","tag-routeprovider","tag-stateprovider","tag-angularjs","tag-child-state","tag-controllers","tag-directives","tag-filters","tag-nested-routes","tag-ngroute","tag-parent-state","tag-resolve","tag-routes","tag-ui-sref","tag-ui-router"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4AvRz-le","jetpack-related-posts":[{"id":1281,"url":"http:\/\/kuulstuff.com\/blog\/forget-everything-just-learn-angularjs\/","url_meta":{"origin":1316,"position":0},"title":"Forget Everything: Just Learn AngularJS!","author":"KP","date":"October 10, 2015","format":false,"excerpt":"Angular or Angular JS is the next most powerful Javascript framework out there which is becoming increasingly popular among the tech world. Angular JS along with CSS frameworks such as Bootstrap coupled with the REST services is redefining Website development.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1303,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-controllers\/","url_meta":{"origin":1316,"position":1},"title":"AngularJS Controllers","author":"KP","date":"October 17, 2015","format":false,"excerpt":"AngularJS Controllers are where the most magic happens. Think that the controllers of an AngularJS application as the brain. The controllers are super smart and can define what happens on the (DOM) Document Object Model. AngularJS controllers along with the dependency injection form the super power of the AngularJS.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1311,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-directives\/","url_meta":{"origin":1316,"position":2},"title":"AngularJS Directives","author":"KP","date":"October 18, 2015","format":false,"excerpt":"AngularJS directives are a cool way of defining behavior and using it any way you want. You can have a directive with your name and have it do any kind of work you want depending on the situation. AngularJS directives control your DOM behavior.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1287,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-how-to-begin\/","url_meta":{"origin":1316,"position":3},"title":"AngularJS: How to Begin","author":"KP","date":"October 10, 2015","format":false,"excerpt":"AngularJS is the Javascript framework for website development. It is widely popular for the features including modularity and separation of concerns. Here are some of the keywords you must be familiar with in order to build web applications with AngularJS.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1431,"url":"http:\/\/kuulstuff.com\/blog\/waze-a-new-way-to-travel\/","url_meta":{"origin":1316,"position":4},"title":"Waze : A new way to travel","author":"admin","date":"May 18, 2016","format":false,"excerpt":"Recently, a friend suggested Waze app while traveling. I remember seeing ads about Waze, but never looked in to it. This time I decided to try it out. Waze is a mobile app which can be downloaded in App Store or Google Play. What it basically does is navigate your\u2026","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":742,"url":"http:\/\/kuulstuff.com\/blog\/snow-storm-ahoy\/","url_meta":{"origin":1316,"position":5},"title":"Snow Storm Ahoy","author":"KP","date":"February 1, 2011","format":false,"excerpt":"Get ready for the greatest snow storm in decades. The meteorologists and weather news channels are getting crazy about the greatest storm coming up. Spanning from new Mexico to Maine, the storm is sure to upset the lives and create a havoc if we are unprepared.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/comments?post=1316"}],"version-history":[{"count":3,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1316\/revisions"}],"predecessor-version":[{"id":1400,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1316\/revisions\/1400"}],"wp:attachment":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/media?parent=1316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/categories?post=1316"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/tags?post=1316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}