{"id":217,"date":"2017-03-22T11:57:44","date_gmt":"2017-03-22T11:57:44","guid":{"rendered":"http:\/\/codeinsightacademy.com\/blog\/?p=217"},"modified":"2017-05-12T05:22:43","modified_gmt":"2017-05-12T05:22:43","slug":"routing","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/angular-js\/routing\/","title":{"rendered":"Routing"},"content":{"rendered":"<p>&nbsp;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;DOCTYPE html&gt;\r\n&lt;html&gt;\r\n    &lt;head&gt;\r\n        &lt;meta CHARSET=\"UTF-8\"&gt;\r\n        &lt;script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.8\/angular.min.js\"&gt;&lt;\/script&gt;\r\n        &lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.8\/angular-route.js\"&gt;&lt;\/script&gt;\r\n    &lt;\/head&gt;\r\n    &lt;body ng-app=\"myApp\"&gt;\r\n        &lt;aside&gt;\r\n            &lt;a href=\"#red\"&gt;Red&lt;\/a&gt;\r\n            &lt;a href=\"#green\"&gt;Green&lt;\/a&gt;\r\n            &lt;a href=\"#blue\"&gt;Blue&lt;\/a&gt;\r\n            &lt;a href=\"#default\"&gt;Default&lt;\/a&gt;\r\n        &lt;\/aside&gt;\r\n        &lt;section ng-view&gt;&lt;\/section&gt;\r\n    &lt;\/body&gt;\r\n    &lt;script&gt;\r\n        var app = angular.module(\"myApp\", [\"ngRoute\"]); \/\/ where ngRoute is a dependent module\r\n        app.config(function ($routeProvider) {\r\n            $routeProvider\r\n                    .when(\"\/red\", {\r\n                        template: \"&lt;h2 style='color:red;'&gt;Red Color&lt;\/h2&gt;\"\r\n                    })\r\n                    .when(\"\/green\", {\r\n                        template: \"&lt;h2 style='color:green;'&gt;Green Color&lt;\/h2&gt;\"\r\n                    })\r\n                    .when(\"\/blue\", {\r\n                        template: \"&lt;h2 style='color:blue;'&gt;Blue Color&lt;\/h2&gt;\"\r\n                    })\r\n                    .otherwise({\r\n                        template: \"&lt;h2&gt;Default Black Color&lt;\/h2&gt;\"\r\n                    });\r\n        });\r\n    &lt;\/script&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &lt;DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta CHARSET=&#8221;UTF-8&#8243;&gt; &lt;script src=&#8221;http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.8\/angular.min.js&#8221;&gt;&lt;\/script&gt; &lt;script src=&#8221;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.8\/angular-route.js&#8221;&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;body ng-app=&#8221;myApp&#8221;&gt; &lt;aside&gt; &lt;a href=&#8221;#red&#8221;&gt;Red&lt;\/a&gt; &lt;a href=&#8221;#green&#8221;&gt;Green&lt;\/a&gt; &lt;a href=&#8221;#blue&#8221;&gt;Blue&lt;\/a&gt; &lt;a href=&#8221;#default&#8221;&gt;Default&lt;\/a&gt; &lt;\/aside&gt; &lt;section ng-view&gt;&lt;\/section&gt; &lt;\/body&gt; &lt;script&gt; var app = angular.module(&#8220;myApp&#8221;, [&#8220;ngRoute&#8221;]); \/\/ where ngRoute is a dependent module app.config(function ($routeProvider) { $routeProvider .when(&#8220;\/red&#8221;, { template: &#8220;&lt;h2 style=&#8217;color:red;&#8217;&gt;Red Color&lt;\/h2&gt;&#8221; }) .when(&#8220;\/green&#8221;, { template: &#8220;&lt;h2 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"quote","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/217"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=217"}],"version-history":[{"count":2,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/217\/revisions"}],"predecessor-version":[{"id":257,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/217\/revisions\/257"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}