Warning: Undefined array key "global_protection_id" in /home/wikitechy/public_html/interview-questions/wp-content/plugins/content-protector/inc/class-ps-rest-handler.php on line 51
{"id":91,"date":"2021-07-10T19:31:44","date_gmt":"2021-07-10T19:31:44","guid":{"rendered":"https:\/\/www.wikitechy.com\/interview-questions\/?p=91"},"modified":"2021-09-15T06:26:41","modified_gmt":"2021-09-15T06:26:41","slug":"what-is-spa-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/","title":{"rendered":"What is SPA in AngularJS ? – AngularJS programing questions and answers"},"content":{"rendered":"
\n
\n

SPA in AngularJS<\/h2>\n<\/div>\n<\/div>\n
\n
\n
    \n
  • Single page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n

    Advantages of SPA :<\/h2>\n<\/div>\n<\/div>\n
    \n
    \n
      \n
    • No page flicker. Native application feel.<\/li>\n
    • Client side routing and data rendering on client side.<\/li>\n
    • Data is from server is in JSON format.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n
      \n
      \n

      Disadvantages of SPA :<\/h2>\n<\/div>\n<\/div>\n
      \n
      \n
        \n
      • User must enable JavaScript.<\/li>\n
      • Security.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n

        You need to write javascript, handle shared state between pages, manage permissions, etc.<\/p>\n

        The SPA works on the two Elements:<\/p>\n

        \n
        \n
          \n
        • \n
            \n
          • Ng-Route<\/li>\n
          • Ng-view<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n
            \n
            \n

            ngRoute<\/h2>\n<\/div>\n<\/div>\n
            \n
            \n
              \n
            • Since we are making a single page application and we don\u2019t want any page refreshes, we\u2019ll use Angular\u2019s routing capabilities.<\/li>\n
            • The ngRoute module provides routing, deeplinking services and directives for angular apps.<\/li>\n
            • We need to include angular-route script after the main angular script.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n
              \n
              \n
                \n
              • Then we need to specify that our module depends on ngRoute module to be able to use it.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n
                \n

                Syntax :<\/h2>\n
                <\/div> 
                var app = angular.module('myApp', ['ngRoute']);<\/code><\/pre> <\/div>\n<\/div>\n
                \n
                \n
                  \n
                • Then we need to specify the place where HTML of each page will be placed in our layout. There is a ng-view directive for that.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n
                  \n
                  \n
                  ng-view<\/h2>\n<\/div>\n<\/div>\n
                  \n
                  \n
                    \n
                  • ng-view is an Angular directive that will include the template of the current route (for example, \/blog or \/about) in the main layout file.<\/li>\n
                  • In plain words, it takes the file we specified for current route and injects it into the layout in the place of ng-view directive.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n
                    \n
                    Example 1<\/h2>\n
                     
                     <\/div> 
                    <html ng-app="myApp"><head><script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.4.7\/angular.min.js"><\/script><script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.4.7\/angular-route.min.js"><\/script><\/head><body><div ng-view><\/div><script src="app.js"><\/script><\/body><\/html><\/code><\/pre> <\/div>\n
                     <\/p>\n<\/div>\n
                    \n
                    \n
                    When HTML is ready, we need to configure our routes. We will use $route Provider service from the ngRoute module.<\/figure>\n<\/div>\n<\/div>\n
                    \n
                    \n
                      \n
                    • For each route, we need to specify template Url and controller.<\/li>\n
                    • If user will try to go to the route that does not exist, we can handle this by using otherwise function. In our case, we will redirect user to the \u201c\/\u201d route:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n
                      \n
                      Syntax :<\/h2>\n
                       
                       <\/div> 
                      var app = angular.module('myApp', ['ngRoute']);<\/code><\/pre> <\/div>\n<\/div>\n
                      \n
                      \n
                      \n
                      Example 2 :<\/pre>\n<\/figure>\n<\/div>\n<\/div>\n
                      \n
                      \n
                       
                       <\/div> 
                      <head><script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.4.7\/angular.min.js"><\/script><script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.4.7\/angular-route.min.js"><\/script><\/head><body><script type="text\/ng-template" id="pages\/home.html"><h1>Home<\/h1><h3>{{message}}<\/h3><\/script><script type="text\/ng-template" id="pages\/blog.html"><h1>Blog<\/h1><h3>{{message}}<\/h3><\/script><script type="text\/ng-template" id="pages\/about.html"><h1>About<\/h1><h3>{{message}}<\/h3><\/script><a href="#\/">Home<\/a><a href="#\/blog">Blog<\/a><a href="#\/about">About<\/a><div ng-view><\/div><script src="app.js"><\/script><\/body><\/html><\/code><\/pre> <\/div><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
                      Answer : Single page application (SPA) is a web application that fits on a single page…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[45],"tags":[54,57,52,56,55,67,69,63,59,53,58,62,47,49,51,61,64,66,68,60,46,48,65,50],"class_list":["post-91","post","type-post","status-publish","format-standard","hentry","category-angularjs","tag-advanced-angularjs-interview-questions","tag-angularjs-2-interview-questions-and-answers-for-experienced","tag-angularjs-coding-interview-questions","tag-angularjs-coding-test","tag-angularjs-interview-questions-codeproject","tag-angularjs-spa-architecture","tag-angularjs-spa-authentication","tag-angularjs-spa-example","tag-angularjs-spa-framework","tag-angularjs-tricky-interview-questions","tag-building-a-spa-framework-using-angularjs","tag-building-spa-with-angularjs","tag-single-page-application-angularjs-mvc","tag-single-page-application-angularjs-template","tag-single-page-application-using-angularjs-and-web-api","tag-spa-application-angularjs","tag-spa-in-angularjs","tag-spa-using-angularjs","tag-spa-using-angularjs-example","tag-spa-with-angularjs-tutorial","tag-what-is-meant-by-single-page-application-in-angularjs","tag-what-is-single-page-application","tag-what-is-spa-in-angularjs","tag-why-angularjs-is-called-single-page-application"],"yoast_head":"\nWhat is SPA in AngularJS ? -AngularJS programming questions & Answers<\/title>\n<meta name=\"description\" content=\"What is SPA in Angularjs ? - Angularjs programming questions and answers - Single page application (SPA) is a web application that fits on a single page.\" \/>\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.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is SPA in AngularJS ? -AngularJS programming questions & Answers\" \/>\n<meta property=\"og:description\" content=\"What is SPA in Angularjs ? - Angularjs programming questions and answers - Single page application (SPA) is a web application that fits on a single page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-10T19:31:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-15T06:26:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.wikitechy.com\/interview-questions\/angularjs\/spa.png\" \/>\n<meta name=\"author\" content=\"Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/\",\"name\":\"What is SPA in AngularJS ? -AngularJS programming questions & Answers\",\"isPartOf\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn.wikitechy.com\/interview-questions\/angularjs\/spa.png\",\"datePublished\":\"2021-07-10T19:31:44+00:00\",\"dateModified\":\"2021-09-15T06:26:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/4d5a581fb5470d1560324bddc5e8b757\"},\"description\":\"What is SPA in Angularjs ? - Angularjs programming questions and answers - Single page application (SPA) is a web application that fits on a single page.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/#primaryimage\",\"url\":\"https:\/\/cdn.wikitechy.com\/interview-questions\/angularjs\/spa.png\",\"contentUrl\":\"https:\/\/cdn.wikitechy.com\/interview-questions\/angularjs\/spa.png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/4d5a581fb5470d1560324bddc5e8b757\",\"name\":\"Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e9531079fe7e07841b7b156c04d65e5f39d4adfd18b6ffe3edfff8ca5aab85b5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e9531079fe7e07841b7b156c04d65e5f39d4adfd18b6ffe3edfff8ca5aab85b5?s=96&d=mm&r=g\",\"caption\":\"Editor\"},\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/author\/editor\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is SPA in AngularJS ? -AngularJS programming questions & Answers","description":"What is SPA in Angularjs ? - Angularjs programming questions and answers - Single page application (SPA) is a web application that fits on a single page.","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.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/","og_locale":"en_US","og_type":"article","og_title":"What is SPA in AngularJS ? -AngularJS programming questions & Answers","og_description":"What is SPA in Angularjs ? - Angularjs programming questions and answers - Single page application (SPA) is a web application that fits on a single page.","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/","og_site_name":"Wikitechy","article_published_time":"2021-07-10T19:31:44+00:00","article_modified_time":"2021-09-15T06:26:41+00:00","og_image":[{"url":"https:\/\/cdn.wikitechy.com\/interview-questions\/angularjs\/spa.png"}],"author":"Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Editor","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/","name":"What is SPA in AngularJS ? -AngularJS programming questions & Answers","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/#primaryimage"},"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.wikitechy.com\/interview-questions\/angularjs\/spa.png","datePublished":"2021-07-10T19:31:44+00:00","dateModified":"2021-09-15T06:26:41+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/4d5a581fb5470d1560324bddc5e8b757"},"description":"What is SPA in Angularjs ? - Angularjs programming questions and answers - Single page application (SPA) is a web application that fits on a single page.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/angularjs\/what-is-spa-in-angularjs\/#primaryimage","url":"https:\/\/cdn.wikitechy.com\/interview-questions\/angularjs\/spa.png","contentUrl":"https:\/\/cdn.wikitechy.com\/interview-questions\/angularjs\/spa.png"},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/4d5a581fb5470d1560324bddc5e8b757","name":"Editor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e9531079fe7e07841b7b156c04d65e5f39d4adfd18b6ffe3edfff8ca5aab85b5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e9531079fe7e07841b7b156c04d65e5f39d4adfd18b6ffe3edfff8ca5aab85b5?s=96&d=mm&r=g","caption":"Editor"},"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/editor\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":7,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/91\/revisions"}],"predecessor-version":[{"id":3818,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/91\/revisions\/3818"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}