Criando uma SPA com Angular

Single-Page Application é um aplicativo de página única, quando usuário clica em um link a mesma carrega a página solicitada sem dar refresh da página no navegador.
SPA torna a navegação mais rápida para o usuário e sem fazer novas requisições ao servidor que roda aplicação.
O Gmail do Google, utiliza essa técnica de SPA, a navegação na aplicação rola toda em uma única página e todo o conteúdo é carregado de uma vez ou obtido dinamicamente (ou seja, via requisições Ajax).



Página única para SPA

Crie uma página index.html onde será o contêiner para nossa aplicação.

<!DOCTYPE html>
<html>
    <title>SPA com Angular</title>
    <head>
        <meta charset="utf-8">
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
   </head> 
    <body ng-app="SPA">
        <ul class="nav nav-tabs">
            <li><a href="#!/">Home</a></li>
            <li><a href="#!sobre">Sobre</a></li>
            <li><a href="#!contato">Contato</a></li>
        </ul>
        <!-- ng-view Mostra o conteúdo das páginas-->
        <div ng-view></div>
        <script src="js/app.js"></script>

    </body>
</html>

Crie o um arquivo app.js

Nesse arquivo vamos usar o módulo ngRoute do Angular.<br /> Esse arquivo foi colocado na pasta /js.

var app = angular.module("SPA", ["ngRoute"]);

app.config(function($routeProvider) {
    
    $routeProvider
    .when("/", {
        templateUrl : "views/home.html"
    })
    .when("/sobre", {
        templateUrl : "views/sobre.html"
    })
    .when("/contato", {
        templateUrl : "views/contato.html"
    })

});

Crie os arquivos das views home - sobre - contato

Crie as páginas home.html, sobre.html e contato.html dentro da pasta /views. <br /> Adicione o conteúdo em cada página.

<!-- home.html -->
<div class="page-header">
   <h1>Página Home!</h1>
</div>

<!-- sobre.html -->
<div class="page-header">
   <h1>Página Sobre!</h1>
</div>

<!-- contato.html -->
<div class="page-header">
   <h1>Página Contato!</h1>
</div>