1
I am using the following material as a reference:
http://tableless.com.br/criando-uma-aplicacao-single-page-com-angularjs/
I created the files with the structure presented 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, where the application’s URL is: localhost/rotasangular.
When access to the application works normally, but it removes the application name from the URL when accessing the application, leaving only localhost, in addition to putting the URL this way http://localhost/sobre#%2Fcontato when we click on the Home, Sobre or Contatos making it impossible for contents of other HTML files to be displayed via 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: '/'
});
});
js controllers.:
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>
The other HTML files I will not post because they are simple, but the logic is above.