Single page web app using Angularjs<\/title><br \/>\n <script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.3\/angular.min.js\"><\/script><br \/>\n <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.3.3\/angular-route.min.js\"> <\/script><br \/>\n<script src=\"script.js\"><\/script><br \/>\n<\/head><br \/>\n<body ng-app=\"single-page-app\"><\/p>\n<div ng-controller=\"cfgController\">\n<div>\n<nav>\n<ul>\n<li><a href=\"#\/\">Home<\/a><\/li>\n<li><a href=\"#\/about\">About us<\/a><\/li>\n<\/ul>\n<\/nav>\n<\/div>\n<p><\/p>\n<div ng-view>\n \n <\/div>\n<\/p><\/div>\n<p><\/body><br \/>\n<\/html><br \/>\n<\/code><br \/>\nHere is our <a href=\"https:\/\/codeforgeek.com\/angularjs\/\" target=\"_blank\" rel=\"noopener noreferrer\">angular<\/a> code. Responsible for handling routes and updating view.<\/p>\n<div class=\"file_name\"><strong>script.js<\/strong><\/div>\n<p><code lang=\"javascript\"><br \/>\nvar app=angular.module('single-page-app',['ngRoute']);<br \/>\napp.config(function($routeProvider){<br \/>\n $routeProvider<br \/>\n .when('\/',{<br \/>\n templateUrl: 'home.html'<br \/>\n })<br \/>\n .when('\/about',{<br \/>\n templateUrl: 'about.html'<br \/>\n });<br \/>\n});<br \/>\napp.controller('cfgController',function($scope){<\/p>\n<p> \/*<br \/>\n\tHere you can handle controller for a specific route as well.<br \/>\n *\/<br \/>\n});<br \/>\n<\/code><br \/>\nIf you have noticed <strong>$routeProvide<\/strong> here we are loading home and about HTML files into view. Let’s have a look on to them too.<\/p>\n<div class=\"file_name\"><strong>home.html<\/strong><\/div>\n<p><code lang=\"html\"><\/p>\n<h1>Hello, world!<\/h1>\n<p>....<\/p>\n<p>\n This is executed because of this code.<\/p>\n<pre>\r\n <code>\r\n .when('\/',{\r\n templateURl: 'home.html'\r\n })\r\n <\/code>\r\n <\/pre>\n<\/p>\n<p><\/code><\/p>\n<div class=\"file_name\"><strong>about.html<\/strong><\/div>\n<p><code lang=\"html\"><\/p>\n<h1>About us page.<\/h1>\n<p>......<\/p>\n<p>\n This is executed because of this code.<\/p>\n<pre>\r\n <code>\r\n .when('\/about',{\r\n templateURl: 'about.html'\r\n })\r\n <\/code>\r\n <\/pre>\n<\/p>\n<p><\/code><\/p>\n<h3>Explanation:<\/h3>\n<p>The main code which does the magic is this.<br \/>\n<code lang=\"javascript\"><br \/>\n .when('\/',{<br \/>\n templateUrl: 'home.html'<br \/>\n })<br \/>\n .when('\/about',{<br \/>\n templateUrl: 'about.html'<br \/>\n });<br \/>\n<\/code><br \/>\nDepending upon your templates and routes you can add more in it. As you see, when particular URL hits, we simply passing our file URL and Angular automatically Loads it into <strong>ng-view<\/strong>. <\/p>\n<h4>How to run the code:<\/h4>\n<p>Download file, serve it using any web server, for ease you can use <strong>XAMPP<\/strong> package to install web <a href=\"https:\/\/codeforgeek.com\/visualize-server-traffic-logstalgia\/\" title=\"Visualize Server traffic using logstalgia\" target=\"_blank\" rel=\"noopener noreferrer\">server<\/a>. Put directory into HTDOCS folder and run through browser.<\/p>\n<h3>Conclusion:<\/h3>\n<p>Single page web application is very intuitive and easy to use. In this, web app used to load once and then only particular part of app keeps on changing without refreshing whole page which saves bandwidth as well as no loading of external files again and again such as Images or CSS files which in most of web app is static.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJs provides ng-route and ng-view directive and by using them we can easily develop our single page web app. In this tutorial, I am going to show you how to develop a simple one-page web application using AngularJs. ng-route manage routing of web application. By routing i mean when you click on link in ordinary […]<\/p>\n","protected":false},"author":1,"featured_media":1000,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"_uag_custom_page_level_css":"","footnotes":""},"categories":[2,18],"tags":[],"class_list":["post-978","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","category-tutorial"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32.png",858,288,false],"thumbnail":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32-150x150.png",150,150,true],"medium":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32-300x101.png",300,101,true],"medium_large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32-768x258.png",768,258,true],"large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32.png",858,288,false],"1536x1536":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32.png",858,288,false],"2048x2048":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32.png",858,288,false]},"uagb_author_info":{"display_name":"Shahid","author_link":"https:\/\/codeforgeek.com\/author\/shahid\/"},"uagb_comment_info":0,"uagb_excerpt":"AngularJs provides ng-route and ng-view directive and by using them we can easily develop our single page web app. In this tutorial, I am going to show you how to develop a simple one-page web application using AngularJs. ng-route manage routing of web application. By routing i mean when you click on link in ordinary…","_links":{"self":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/comments?post=978"}],"version-history":[{"count":0,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/978\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media\/1000"}],"wp:attachment":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media?parent=978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/categories?post=978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/tags?post=978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

index.html<\/strong><\/div>\n
\n \n \n \n \n Single page web app using Angularjs<\/title><br \/>\n <script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.3\/angular.min.js\"><\/script><br \/>\n <script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.3.3\/angular-route.min.js\"> <\/script><br \/>\n<script src=\"script.js\"><\/script><br \/>\n<\/head><br \/>\n<body ng-app=\"single-page-app\"><\/p>\n<div ng-controller=\"cfgController\">\n<div>\n<nav>\n<ul>\n<li><a href=\"#\/\">Home<\/a><\/li>\n<li><a href=\"#\/about\">About us<\/a><\/li>\n<\/ul>\n<\/nav>\n<\/div>\n<p><\/p>\n<div ng-view>\n \n <\/div>\n<\/p><\/div>\n<p><\/body><br \/>\n<\/html><br \/>\n<\/code><br \/>\nHere is our <a href=\"https:\/\/codeforgeek.com\/angularjs\/\" target=\"_blank\" rel=\"noopener noreferrer\">angular<\/a> code. Responsible for handling routes and updating view.<\/p>\n<div class=\"file_name\"><strong>script.js<\/strong><\/div>\n<p><code lang=\"javascript\"><br \/>\nvar app=angular.module('single-page-app',['ngRoute']);<br \/>\napp.config(function($routeProvider){<br \/>\n $routeProvider<br \/>\n .when('\/',{<br \/>\n templateUrl: 'home.html'<br \/>\n })<br \/>\n .when('\/about',{<br \/>\n templateUrl: 'about.html'<br \/>\n });<br \/>\n});<br \/>\napp.controller('cfgController',function($scope){<\/p>\n<p> \/*<br \/>\n\tHere you can handle controller for a specific route as well.<br \/>\n *\/<br \/>\n});<br \/>\n<\/code><br \/>\nIf you have noticed <strong>$routeProvide<\/strong> here we are loading home and about HTML files into view. Let’s have a look on to them too.<\/p>\n<div class=\"file_name\"><strong>home.html<\/strong><\/div>\n<p><code lang=\"html\"><\/p>\n<h1>Hello, world!<\/h1>\n<p>....<\/p>\n<p>\n This is executed because of this code.<\/p>\n<pre>\r\n <code>\r\n .when('\/',{\r\n templateURl: 'home.html'\r\n })\r\n <\/code>\r\n <\/pre>\n<\/p>\n<p><\/code><\/p>\n<div class=\"file_name\"><strong>about.html<\/strong><\/div>\n<p><code lang=\"html\"><\/p>\n<h1>About us page.<\/h1>\n<p>......<\/p>\n<p>\n This is executed because of this code.<\/p>\n<pre>\r\n <code>\r\n .when('\/about',{\r\n templateURl: 'about.html'\r\n })\r\n <\/code>\r\n <\/pre>\n<\/p>\n<p><\/code><\/p>\n<h3>Explanation:<\/h3>\n<p>The main code which does the magic is this.<br \/>\n<code lang=\"javascript\"><br \/>\n .when('\/',{<br \/>\n templateUrl: 'home.html'<br \/>\n })<br \/>\n .when('\/about',{<br \/>\n templateUrl: 'about.html'<br \/>\n });<br \/>\n<\/code><br \/>\nDepending upon your templates and routes you can add more in it. As you see, when particular URL hits, we simply passing our file URL and Angular automatically Loads it into <strong>ng-view<\/strong>. <\/p>\n<h4>How to run the code:<\/h4>\n<p>Download file, serve it using any web server, for ease you can use <strong>XAMPP<\/strong> package to install web <a href=\"https:\/\/codeforgeek.com\/visualize-server-traffic-logstalgia\/\" title=\"Visualize Server traffic using logstalgia\" target=\"_blank\" rel=\"noopener noreferrer\">server<\/a>. Put directory into HTDOCS folder and run through browser.<\/p>\n<h3>Conclusion:<\/h3>\n<p>Single page web application is very intuitive and easy to use. In this, web app used to load once and then only particular part of app keeps on changing without refreshing whole page which saves bandwidth as well as no loading of external files again and again such as Images or CSS files which in most of web app is static.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJs provides ng-route and ng-view directive and by using them we can easily develop our single page web app. In this tutorial, I am going to show you how to develop a simple one-page web application using AngularJs. ng-route manage routing of web application. By routing i mean when you click on link in ordinary […]<\/p>\n","protected":false},"author":1,"featured_media":1000,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"_uag_custom_page_level_css":"","footnotes":""},"categories":[2,18],"tags":[],"class_list":["post-978","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","category-tutorial"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32.png",858,288,false],"thumbnail":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32-150x150.png",150,150,true],"medium":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32-300x101.png",300,101,true],"medium_large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32-768x258.png",768,258,true],"large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32.png",858,288,false],"1536x1536":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32.png",858,288,false],"2048x2048":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2014\/12\/banner32.png",858,288,false]},"uagb_author_info":{"display_name":"Shahid","author_link":"https:\/\/codeforgeek.com\/author\/shahid\/"},"uagb_comment_info":0,"uagb_excerpt":"AngularJs provides ng-route and ng-view directive and by using them we can easily develop our single page web app. In this tutorial, I am going to show you how to develop a simple one-page web application using AngularJs. ng-route manage routing of web application. By routing i mean when you click on link in ordinary…","_links":{"self":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/comments?post=978"}],"version-history":[{"count":0,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/978\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media\/1000"}],"wp:attachment":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media?parent=978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/categories?post=978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/tags?post=978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}