I am using the following material as a reference:
I have created the files with the structure shown in the material to learn about the routes that AngularJS makes available and I am putting the files in the Apache root directory and the name of the project as rotasangular , with the URL of the application being: localhost/rotasangular .
When accessing the application works normally, however, it takes the name of the application from the URL when accessing the application, with only localhost , in addition to placing the URL http://localhost/sobre#%2Fcontato when we click the Home , Sobre or Contatos preventing contents of other HTML files from being displayed through the routes.
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><scriptsrc="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>
The other HTML files will not post because they are simple, but the logic is up.