¿Qué es SPA (aplicación de página única) en AngularJS?

Tradicionalmente, las aplicaciones eran aplicaciones multipágina (MPA) donde con cada clic se cargaba una nueva página desde el servidor. Esto no solo consumía mucho tiempo, sino que también aumentaba la carga del servidor y hacía que el sitio web fuera más lento. AngularJS es un marco web front-end basado en JavaScript basado en el enlace de datos de la interfaz de usuario bidireccional y se utiliza para diseñar aplicaciones de una sola página. Las aplicaciones de una sola página son aplicaciones web que cargan una sola página HTML y solo una parte de la página en lugar de la página completa se actualiza con cada clic del mouse. La página no se recarga ni transfiere el control a otra página durante el proceso. Esto asegura un alto rendimiento y una carga de páginas más rápida. La mayoría de las aplicaciones modernas utilizan el concepto de SPA. En el SPA, todos los datos se envían al cliente desde el servidor al principio. A medida que el cliente hace clic en ciertas partes de la página web, solo la parte requerida de la información se obtiene del servidor y la página se reescribe dinámicamente. Esto da como resultado una menor carga en el servidor y es rentable. Los SPA utilizan AJAX y HTML5 para crear aplicaciones web fluidas y con capacidad de respuesta, y la mayor parte del trabajo se realiza del lado del cliente. Aplicaciones populares como Facebook, Gmail, Twitter, Google Drive, Netflix y muchas más son ejemplos de SPA.
ventajas:

• Colaboración en equipo
  Las aplicaciones de una sola página son excelentes cuando más de un desarrollador está trabajando en el mismo proyecto. Permite a los desarrolladores de back-end centrarse en la API, mientras que los desarrolladores de front-end pueden centrarse en crear la interfaz de usuario basada en la API de back-end.
• Almacenamiento en caché
  La aplicación envía una sola solicitud al servidor y almacena toda la información recibida en el caché. Esto resulta beneficioso cuando el cliente tiene una conectividad de red deficiente.
• Rápido y receptivo
  Como solo partes de las páginas se cargan dinámicamente, mejora la velocidad del sitio web.
• La depuración es más fácil
  La depuración de aplicaciones de una sola página con Chrome es más fácil ya que dichas aplicaciones se desarrollan utilizando herramientas de desarrollo como AngularJS Batarang y React.
• Experiencia de usuario lineal
  Navegar o navegar por el sitio web es fácil.

Desventajas:

• Los SPA de optimización SEO
  proporcionan una optimización SEO deficiente. Esto se debe a que las aplicaciones de una sola página funcionan con JavaScript y cargan datos a la vez en el servidor. La URL no cambia y las diferentes páginas no tienen una URL única. Por lo tanto, es difícil para los motores de búsqueda indexar el sitio web de SPA en lugar de las páginas tradicionales renderizadas por el servidor.
• Historial del navegador
  Un SPA no guarda la transición de estados de los usuarios dentro del sitio web. Un navegador guarda solo las páginas anteriores, no la transición de estado. Por lo tanto, cuando los usuarios hacen clic en el botón Atrás, no son redirigidos al estado anterior del sitio web. Para resolver este problema, los desarrolladores pueden equipar sus marcos SPA con la API de historial de HTML5.
• Problemas de seguridad
  Las aplicaciones de una sola página son menos inmunes a las secuencias de comandos entre sitios (XSS) y dado que no se cargan páginas nuevas, los piratas informáticos pueden acceder fácilmente al sitio web e inyectar nuevas secuencias de comandos en el lado del cliente.
• Consumo de memoria
  Dado que el SPA puede ejecutarse durante mucho tiempo, a veces durante horas, es necesario asegurarse de que la aplicación no consuma más memoria de la que necesita. De lo contrario, los usuarios con dispositivos con poca memoria pueden enfrentar serios problemas de rendimiento.
• Los desarrolladores de Javascript deshabilitado
  necesitan señalar ideas para que los usuarios accedan a la información en el sitio web para los navegadores que tienen Javascript deshabilitado.

Cuándo usar SPA
Los SPA son buenos cuando el volumen de datos es pequeño y el sitio web necesita una plataforma dinámica. También es una buena opción para aplicaciones móviles. Pero las empresas que dependen en gran medida de las optimizaciones de los motores de búsqueda, como las aplicaciones de comercio electrónico, deben evitar las aplicaciones de una sola página y optar por las MPA.

<!DOCTYPE html>
<!--ng-app directive tells AngularJS that myApp
    is the root element of the application -->
<html ng-app="myApp">
    <head>
        <!--import the angularjs libraries-->
        <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>
        <!--hg-template indicates the pages 
            that get loaded as per requirement-->
        <script type="text/ng-template" 
                id="first.html">
            <h1>First Page</h1>
            <h2 style="color:green">
                Welcome to GeeksForGeeks
            </h2>
            <h3>{{message}}</h3>
        </script>
        <script type="text/ng-template" 
                id="second.html">
            <h1>Second Page</h1>
            <h2 style="color:green">
                Start Learning With GFG
            </h2>
            <h3>{{message}}</h3>
        </script>
        <script type="text/ng-template"
                id="third.html">
            <h1>Third Page</h1>
            <h2 style="color:green">
                Know about us
            </h2>
            <h3>{{message}}</h3>
        </script>
        <!--hyperlinks to load different 
              pages dynamically-->
        <a href="#/">First</a>
        <a href="#/second">Second</a>
        <a href="#/third">Third</a>
        <!--ng-view includes the rendered template of
            the current route into the main page-->
        <div ng-view></div>
        <script>
            var app = angular.module('myApp', []);
            var app = angular.module('myApp', ['ngRoute']);
            app.config(function($routeProvider) {
            $routeProvider
  
            .when('/', {
            templateUrl : 'first.html',
            controller : 'FirstController'
            })
  
            .when('/second', {
            templateUrl : 'second.html',
            controller : 'SecondController'
            })
  
            .when('/third', {
            templateUrl : 'third.html',
            controller : 'ThirdController'
            })
  
            .otherwise({redirectTo: '/'});
            });
  
            <!-- controller is a JS function that maintains
     application data and behavior using $scope object -->
            <!--properties and methods can be attached to the
                $scope object inside a controller function-->
  
            app.controller('FirstController', function($scope) {
            $scope.message = 'Hello from FirstController';
            });
  
            app.controller('SecondController', function($scope) {
            $scope.message = 'Hello from SecondController';
            });
  
            app.controller('ThirdController', function($scope) {
            $scope.message = 'Hello from ThirdController';
            });
        </script>
    </body>
</html>

Producción: