{"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>