AngularJS: exemplo ngRoute / SPA

Exemplo de aplicação de uma única página em AngularJS com ngRoute. Copiar e colar para testar e também começar a produzir. No final do texto, depois dos detalhes há um trecho de configuração para Apache.

SPA, single-page application

<!doctype html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8">
    <title>My WebPage</title>
    <base href="/">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-route.js"></script>
  </head>
  <body ng-controller="main" ng-cloak>
    <nav>
      Go to
      <a href="/">home</a>
      <a href="/page">page</a>
    </nav>
    ...
    <div ng-view></div>
    ...
    <script type="text/ng-template" id="home.html">
      Home Page
    </script>
    <script type="text/ng-template" id="page.html">
      Some Page
    </script>
    <script>
      angular.module('myapp', ['ngRoute'])
        .controller('main', function($scope) {
          // para todos
        })
        .controller('home', function($scope) {
          // apenas home
        })
        .controller('page', function($scope) {
          // apenas page
        })
        .config(function($routeProvider, $locationProvider) {
          $routeProvider
            .when('/', {
              templateUrl: 'home.html',
              controller: 'home'
            })
            .when('/page', {
              templateUrl: 'page.html',
              controller: 'page'
            });
          // sem hash na URL
          $locationProvider.html5Mode(true);
        });
    </script>
  </body>
</html>

Detalhes

<html ng-app="myapp"> nome da sua aplicação. Escolha o nome que quiser. Mas lembre-se de manter alinhado com angular.module('myapp', ['ngRoute'])

<base href="/"> essa tag é importante para a navegação/permalink funcionar sem hash. Se você quiser realmente remover, é preciso remover também $locationProvider.html5Mode(true);

<body ng-controller="main" ng-cloak> sua controller principal. Nela você define instruções gerais e também interage facilmente com as outras controllers.

<body ng-controller="main" ng-cloak> evita a “piscada” de tela com valores antes de serem processados.

<div ng-view></div> é aqui onde o template e o conteúdo das controllers, sem ser a main é renderizado.

<script type="text/ng-template" id="home.html"> define o template de cada URL. É importante que o valor do atributo id corresponda ao valor do templateUrl no $routeProvider. Você pode remover essas tag e criar os arquivos no servidor. O Angular fica responsável de baixar os arquivos.

.controller('xxx', function() {}) a definição de cada controller. Main pode interagir com as outras controller e as outras controller podem interagir facilmente com por $scope.$parent

.config(function($routeProvider, $locationProvider) {... possui as definições de rotas, templates e controllers. Para cada nova URL que precisar, defina uma nova instrução when. Você pode, numa controller, atender várias URLs usando os padrões do Angular e você pode definir otherwise para receber todas as requests que não corresponderam há nenhum padrão.

Apache Rewrite

htaccess ou virtual host

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* index.html

You may also like...