{"id":19363,"date":"2022-11-14T09:29:04","date_gmt":"2022-11-14T08:29:04","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=19363"},"modified":"2023-02-28T17:03:20","modified_gmt":"2023-02-28T16:03:20","slug":"single-page-applications-with-angular","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/","title":{"rendered":"How to Build Single Page Applications with Angular"},"content":{"rendered":"\n<p>Angular is not dead, despite the constant calls and warnings in that direction, <strong>it is more alive than ever,<\/strong> <strong>especially with its last version<\/strong>. And creating a Single Page Application, with multiple routes helps you with the performance and load time of your page.<\/p>\n\n\n\n<p>In this simple tutorial, we will explain when it is convenient to use SPA and how to do it easily with <a href=\"https:\/\/angular.io\/\" target=\"_blank\" aria-label=\"Angular (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Angular<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-single-page-application-and-what-s-used-for\">What is a Single Page Application, and what\u2019s used for?<\/h2>\n\n\n\n<p>Single plage applications are great for creating engaging and unique user experiences for website visitors. These sites or web applications dynamically rewrite an existing web page with new information. <strong>These websites don\u2019t load new pages entirely and don\u2019t refresh the pages<\/strong>. Instead, the code is retrieved by the browser using a single page load. Only a part of the web page will be changed with every click of the mouse.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-where-can-we-see-spa\">Where can we see SPA?<\/h3>\n\n\n\n<p>Lots of businesses are using SPAs to offer better user experiences. Some popular single plage applications include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pinterest<\/li>\n\n\n\n<li>PayPal<\/li>\n\n\n\n<li>Netflix<\/li>\n\n\n\n<li>Facebook<\/li>\n\n\n\n<li>Gmail<\/li>\n\n\n\n<li>Google Maps<\/li>\n\n\n\n<li>AirBnB<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-advantages-and-disadvantages\">Advantages and Disadvantages<\/h3>\n\n\n\n<p>The main advantage of single page applications is that they have a high load speed. Unlike MPAs or multi-page applications, <strong>SPAs don\u2019t secure all their pages to their core<\/strong>. That means they take less time and effort to maintain security. This helps to quicken the load speed of the websites. It is also worth noting that SPAs download everything upfront, and that means the back-and-forth is eliminated. The new information will always be downloaded as a single page. <strong>It is also faster to navigate single page application sites since they have higher caching capabilities<\/strong>. Caching works better with SPAs as these sites request data from the server just one time.<\/p>\n\n\n\n<p>Another advantage of single page applications is that they are able to work offline. When the internet connection is restored, the local data will be synced with the server of the website. These websites also offer cross-platform functionality. They can work on different operating systems on different browsers.<\/p>\n\n\n\n<p>SPAs also offer a great user experience. You won\u2019t have to click through links to access different pages and will simply need to scroll through the pages. SPAs are especially good for mobile users.<\/p>\n\n\n\n<p>Although single page applications are efficient, they have some disadvantages. First, they can hurt your SEO since they use JavaScript. <strong>Search engines like Bing and Yahoo work better with HTML<\/strong> format. Another issue with SPAs is that they make it hard to track website metrics. This is because Google Analytics will not be able to determine which pages or content are more popular among readers.<\/p>\n\n\n\n<p>Single page applications also offer production deployment advantages. They are very easy to deploy in production and to version. <strong>The application is only one index.html file and has a CSS bundle and a JavaScript bundle<\/strong>. You can upload these three static files to a content server like Amazon S3, Apache, Nginx, or Firebase Hosting. The backend server can be built with different technology. Node, Java, and PHP are some popular choices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prerequisites-in-angularjs\">Prerequisites in AngularJS<\/h2>\n\n\n\n<p>To build a single page application in AngularJS, you will need a basic understanding of the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.codemotion.com\/magazine\/backend\/why-you-should-use-typescript-for-your-next-project\/\" target=\"_blank\" aria-label=\"TypeScript (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">TypeScript<\/a><\/li>\n\n\n\n<li>HTML<\/li>\n\n\n\n<li>CSS<\/li>\n\n\n\n<li>Angular CLI<\/li>\n<\/ul>\n\n\n\n<p>You also need to install Node and Node Package Manager.<\/p>\n\n\n\n<figure class=\"wp-block-embed alignfull is-type-wp-embed is-provider-codemotion-magazine wp-block-embed-codemotion-magazine\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"3TlAta8NQW\"><a href=\"https:\/\/www.codemotion.com\/magazine\/backend\/why-you-should-use-typescript-for-your-next-project\/\">Why You Should Use Typescript for Your Next Project<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Why You Should Use Typescript for Your Next Project&#8221; &#8212; Codemotion Magazine\" src=\"https:\/\/www.codemotion.com\/magazine\/backend\/why-you-should-use-typescript-for-your-next-project\/embed\/#?secret=IW5cPACSBL#?secret=3TlAta8NQW\" data-secret=\"3TlAta8NQW\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-1-create-a-module\">Step 1: Create a Module<\/h2>\n\n\n\n<p>The first step is to create a module. This is a container for the different components of the application. Some of these components are the controller and service. You can create a module by issuing the following command:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-keyword\">Var<\/span> app = angular.module( \u2018myApp\u2019 , &#91;]);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Since Angular uses MVC architecture, every app is made up of different modules.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-2-define-a-simple-controller\">Step 2: Define a simple controller<\/h2>\n\n\n\n<p>Next, you have to define a simple controller. Do this with the following code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">app.controller(<span class=\"hljs-string\">'FirstController'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span><span class=\"hljs-params\">($scope)<\/span> <\/span>{\n$scope.message = <span class=\"hljs-string\">'Hello from FirstController'<\/span>;\n});<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-3-include-angularjs-in-the-code\">Step 3: Include AngularJS in the Code<\/h2>\n\n\n\n<p>At this point, you have to <strong>use the module and controller in the HTML code<\/strong>. You have to first add the Angular script and app.js that you have developed. It is also necessary to specify the module in the ng-app tribute. In the ng-controller tribute, you must specify the controller.<br><\/p>\n\n\n\n<p>You can ensure that everything is configured properly on localhost. Also, check whether AngularJS is operational.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-4-use-routeprovider-service-from-ngroute-module\">Step 4: Use $routeProvider service from ngRoute module<\/h2>\n\n\n\n<p>AngularJS ngRoute module provides routing, directives and deep linking services for angular applications. For this step, you have to <strong>download the angular-route.js script<\/strong> which has the ngRoute module. It is also possible to use the CND in your application to include the routing file.<\/p>\n\n\n\n<p>After bunding the file into your application, you can add the ngRoute module in the Angular JS application. This should be added as a dependent module as you can see below:<br>angular.module(&#8216;appName&#8217;, [&#8216;ngRoute&#8217;]);<\/p>\n\n\n\n<p>The ngView directive can be used to show HTML templates or views in the indicated routes. Whenever the route is altered, the view will change as per the configuration of the $route service.<\/p>\n\n\n\n<p>To configure the routes, <strong>you have to use $route provider<\/strong>. You can configure it using the ngRoute config(). The config() will have a function and uses the $routeprovider as the parameter. The routing configuration will be in the function. $routeprovider can either use the when() or otherwise() method. With the when() method, you will use a path and route as the parameters. <strong>The path is simply the part of the URL that is seen after the hash sign<\/strong>. <\/p>\n\n\n\n<p>For example, in the URL randompage.com\/index.html#\/home, the path is \u2018\/home\u2019.<\/p>\n\n\n\n<p>The route has two properties, and <strong>these are the templateURL and controller<\/strong>. TemplateURL will define the HTML template that AngularJS should load and display in the div with the ngView directive. On the other hand, the controller will define the controllers that will be used in the HTML template. Once you load the application, the path will be matched with the part of the URL after the hash sign.<\/p>\n\n\n\n<p>In case the route paths don\u2019t match the provided URL, the browser will use the path specified in the otherwise() function. Using the same example of randompage.com\/index.html#\/students, you can set the path to \u2018\/students\u2019 and the otherwise() function to \u2018\/home\u2019. If the \u2018\/students\u2019 path doesn\u2019t match anything, it will go into otherwise() condition, and the page will be redirected to home.html.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"436\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-1024x436.jpg\" alt=\"app performance\" class=\"wp-image-18036\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-1024x436.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-300x128.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-768x327.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-1536x654.jpg 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-2048x872.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Single Page Applications are great for improving user experience.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-step-5-configure-the-pages-that-will-be-active\">Step 5: Configure the pages that will be active<\/h2>\n\n\n\n<p>Finally, you have to configure the pages that will be active. You should save all the files in the same directory and open index.html on your browser. After generating an HTML layout for your site, you can use the ngView directive to determine where the HTML for each page will be shown in the layout. <strong>Configure the pages with proper HTML format<\/strong>. For example, for the about page, you should use H1 for the title \u2018About\u2019. You should also add links to the HTML to help with navigation to the configured pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusions\">Conclusions<\/h2>\n\n\n\n<p>Single page applications offer many advantages. <strong>They load faster and offer a great user experience<\/strong>. They are also easy to deploy in production and to version. These applications only load a single HTML page, and only part of the page gets updated with every click of the mouse. This is different from multi-page applications as they load a new page with every click. Lots of popular modern applications use the concept of SPAs. They include Gmail, Facebook, Twitter, and Netflix. You can build SPAs with Angular.<\/p>\n\n\n\n<figure class=\"wp-block-embed alignfull is-type-wp-embed is-provider-codemotion-magazine wp-block-embed-codemotion-magazine\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"PyP1ZvtA5X\"><a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/\">Reactive Forms in Angular<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Reactive Forms in Angular&#8221; &#8212; Codemotion Magazine\" src=\"https:\/\/www.codemotion.com\/magazine\/frontend\/reactive-forms-in-angular\/embed\/#?secret=4wif2S0MQC#?secret=PyP1ZvtA5X\" data-secret=\"PyP1ZvtA5X\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Angular is not dead, despite the constant calls and warnings in that direction, it is more alive than ever, especially with its last version. And creating a Single Page Application, with multiple routes helps you with the performance and load time of your page. In this simple tutorial, we will explain when it is convenient&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/\">Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":19368,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":5,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[4141,9952],"collections":[],"class_list":{"0":"post-19363","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-angular","9":"tag-languages","10":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Build Single Page Applications with Angular - Codemotion<\/title>\n<meta name=\"description\" content=\"Need to create an SPA the easy way? Follow these 5 steps with Angular and get it done. Discover the advantages of Single Page Applications!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build Single Page Applications with Angular\" \/>\n<meta property=\"og:description\" content=\"Need to create an SPA the easy way? Follow these 5 steps with Angular and get it done. Discover the advantages of Single Page Applications!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-14T08:29:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-28T16:03:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1254\" \/>\n\t<meta property=\"og:image:height\" content=\"836\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c\"},\"headline\":\"How to Build Single Page Applications with Angular\",\"datePublished\":\"2022-11-14T08:29:04+00:00\",\"dateModified\":\"2023-02-28T16:03:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/\"},\"wordCount\":1263,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg\",\"keywords\":[\"Angular\",\"Languages\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/\",\"name\":\"How to Build Single Page Applications with Angular - Codemotion\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg\",\"datePublished\":\"2022-11-14T08:29:04+00:00\",\"dateModified\":\"2023-02-28T16:03:20+00:00\",\"description\":\"Need to create an SPA the easy way? Follow these 5 steps with Angular and get it done. Discover the advantages of Single Page Applications!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg\",\"width\":1254,\"height\":836,\"caption\":\"Mobile responsive website development with UI\/UX front end designer previewing wireframe sketch layout design mockup on smartphone screen\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Build Single Page Applications with Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\/\/x.com\/CodemotionIT\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build Single Page Applications with Angular - Codemotion","description":"Need to create an SPA the easy way? Follow these 5 steps with Angular and get it done. Discover the advantages of Single Page Applications!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/","og_locale":"en_US","og_type":"article","og_title":"How to Build Single Page Applications with Angular","og_description":"Need to create an SPA the easy way? Follow these 5 steps with Angular and get it done. Discover the advantages of Single Page Applications!","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2022-11-14T08:29:04+00:00","article_modified_time":"2023-02-28T16:03:20+00:00","og_image":[{"width":1254,"height":836,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg","type":"image\/jpeg"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"How to Build Single Page Applications with Angular","datePublished":"2022-11-14T08:29:04+00:00","dateModified":"2023-02-28T16:03:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/"},"wordCount":1263,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg","keywords":["Angular","Languages"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/","name":"How to Build Single Page Applications with Angular - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg","datePublished":"2022-11-14T08:29:04+00:00","dateModified":"2023-02-28T16:03:20+00:00","description":"Need to create an SPA the easy way? Follow these 5 steps with Angular and get it done. Discover the advantages of Single Page Applications!","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg","width":1254,"height":836,"caption":"Mobile responsive website development with UI\/UX front end designer previewing wireframe sketch layout design mockup on smartphone screen"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/single-page-applications-with-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"How to Build Single Page Applications with Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-600x600.jpg","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg",1254,836,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-300x200.jpg",300,200,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-768x512.jpg",768,512,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-1024x683.jpg",1024,683,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg",1254,836,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg",1254,836,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966.jpg",100,67,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/11\/iStock-844419966-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"Angular is not dead, despite the constant calls and warnings in that direction, it is more alive than ever, especially with its last version. And creating a Single Page Application, with multiple routes helps you with the performance and load time of your page. In this simple tutorial, we will explain when it is convenient&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/19363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=19363"}],"version-history":[{"count":5,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/19363\/revisions"}],"predecessor-version":[{"id":19374,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/19363\/revisions\/19374"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/19368"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=19363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=19363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=19363"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=19363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}