ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Navigating between pages using ngRoute in AngularJS<p>Hi&nbsp;skp,</p> <p>Refer below code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <p><strong>Index.html</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#34;MyApp&#34;, [&#34;ngRoute&#34;]); app.controller(&#39;HomeController&#39;, function ($scope) { $scope.Home = &#39;This is home page.&#39;; }); app.controller(&#39;AboutController&#39;, function ($scope) { $scope.About = &#39;This is about page.&#39;; }); app.controller(&#39;ContactController&#39;, function ($scope) { $scope.Contact = &#39;This is contact page.&#39;; }); app.config([&#39;$routeProvider&#39;, &#39;$locationProvider&#39;, function ($routeProvider, $locationProvider) { $routeProvider.when(&#34;/&#34;, { templateUrl: &#34;Views/Home.html&#34;, controller: &#39;HomeController&#39; }).when(&#34;/about&#34;, { templateUrl: &#34;Views/About.html&#34;, controller: &#39;AboutController&#39; }).when(&#34;/contact&#34;, { templateUrl: &#34;Views/Contact.html&#34;, controller: &#39;ContactController&#39; }); } ]); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#!about&#34;&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#!contact&#34;&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div ng-view&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>Home.html</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Home&lt;/h1&gt; &lt;hr /&gt; &lt;p&gt;{{ Home }}&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>About.html</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;About&lt;/h1&gt; &lt;hr /&gt; &lt;p&gt;{{ About }}&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>Contact.html</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Contact&lt;/h1&gt; &lt;hr /&gt; &lt;p&gt;{{ Contact }}&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/R4gWqNc.gif" alt="" width="250" height="260" /></span></strong></p>https://www.aspforums.net:443/Threads/113203/Navigating-between-pages-using-ngRoute-in-AngularJS/https://www.aspforums.net:443/Threads/113203/Navigating-between-pages-using-ngRoute-in-AngularJS/Wed, 03 Jul 2019 08:12:33 GMT