Estou utilizando o seguinte material como referência:
http://tableless.com.br/criando-uma-aplicacao-single-page-com-angularjs/
Criei os arquivos com a estrutura apresentada no material para aprender sobre as rotas que o AngularJS disponibiliza e estou colocando os arquivos no diretório root do Apache e o nome do projeto como rotasangular
, sendo que a URL da aplicação é: localhost/rotasangular
.
Quando acesso a aplicação funciona normalmente, porém ele tira o nome da aplicação da URL ao acessar a aplicação, ficando apenas localhost
, além de colocar a URL dessa forma http://localhost/sobre#%2Fcontato
quando clicamos no link de Home
, Sobre
ou Contatos
impossibilitando que conteúdos de outros arquivos HTML sejam exibidos através das rotas.
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider
.when ('/', {
templateUrl: 'rotasangular/views/home.html',
controller: 'HomeCtrl',
})
.when ('/sobre', {
templateUrl: 'rotasangular/views/contato.html',
controller: 'ContatoCtrl',
})
.when('/contato', {
templateUrl: 'rotasangular/views/contato.html',
controller: 'ContatoCtrl',
})
.otherwise({
redirectTo: '/'
});
});
controllers.js:
app.controller('HomeCtrl', function($rootScope, $location)
{
$rootScope.activetab = $location.path();
});
app.controller('SobreCtrl', function($rootScope, $location)
{
$rootScope.activetab = $location.path();
});
app.controller('ContatoCtrl', function($rootScope, $location)
{
$rootScope.activetab = $location.path();
});
index.html:
<!doctype html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt-br" />
<title>AngularJS: Single Page com ngView e ngRoute</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
</head>
<body>
<ul class="nav nav-tabs">
<li ng-class="{active: activetab == '/'}"><a href="#/home">Home</a></li>
<li ng-class="{active: activetab == '/sobre'}"><a href="#/sobre">Sobre</a></li>
<li ng-class="{active: activetab == '/contato'}"><a href="#/contato">Contato</a></li>
</ul>
<div ng-view></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="controllers/controllers.js"></script>
</body>
</html>
Os outros arquivos HTML não irei postar porque são simples, mas a lógica está acima.