1
I’m trying to create routes with the AngularJS to make a Single Application. I can load the main page that would be the /, but others that contains parameters I cannot. I have the URL http://localhost:3000/#/music/5876a78078b88fe8662a188b and I need to upload the view views/routes/visualizar.html, but when I click on the link it doesn’t leave the root page and the URL in the browser gets http://localhost:3000/#%2Fmusica%2F5876a78078b88fe8662a188b
<html ng-app="PlayerNode">
<head>
<title>Lista de músicas</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/style.css">
</head>
<body>
<div ng-view></div>
</body>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/angular.min.js"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/js/tether.min.js"></script>
<script type="text/javascript" src="/node_modules/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script type="text/javascript" src="/assets/js/angular-route.js"></script>
<script type="text/javascript">
'use strict';
const app = angular.module('PlayerNode', ['LocalStorageModule', 'ngRoute']);
/* Configurações */
app.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('PlayerNode')
.setStorageType('sessionStorage')
.setNotify(true, true)
});
app.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/views/routes/lista.html',
controller : 'ListaMusicas'
})
.when('/musica/:id', {
templateUrl: '/views/routes/visualizar.html',
controller : 'Musica'
})
});
/* Controllers */
app.controller('ListaMusicas', function($scope, $http){
$http({
method: 'GET',
url: '/musicas'
}).then(function(res){
vm.musicas = res.data;
});
});
app.controller('Musica', function($scope, $http, localStorageService, $routeParams){
console.log($routeParams);
$scope.ExecutaMusica = function(id){
$http({
url: '/play/'+id,
method: 'GET',
}).then(function(){
localStorageService.set("id_ultimo_executado", id);
localStorageService.set("id_ultima_acao", 'executando');
$scope.executando = true;
$scope.pausado = false;
});
}
$scope.PausarMusica = function(){
$http({
url: '/pause',
method: 'GET',
}).then(function(){
localStorageService.set("id_ultima_acao", 'pausado');
$scope.executando = false;
$scope.pausado = true;
});
}
$scope.RetornarMusica = function(){
$http({
url: '/retornar',
method: 'GET',
}).then(function(){
localStorageService.set("id_ultima_acao", 'retornar');
$scope.executando = true;
$scope.pausado = false;
});
}
$scope.PararMusica = function(){
$http({
url: '/parar',
method: 'GET',
}).then(function(){
localStorageService.set("id_ultima_acao", 'parar');
$scope.executando = false;
$scope.pausado = false;
});
}
let UltimaAcao = localStorageService.get("id_ultima_acao");
let ultimo_executado = localStorageService.get("id_ultimo_executado");
let idMusica = window.location.pathname.substr(8);
if(ultimo_executado == idMusica){
if(UltimaAcao == 'executando'){
$scope.executando = true;
$scope.pausado = false;
}else if(UltimaAcao == 'pausado'){
$scope.executando = false;
$scope.pausado = true;
}else if(UltimaAcao == 'retornar'){
$scope.executando = true;
$scope.pausado = false;
}else if(UltimaAcao == 'parar'){
$scope.executando = false;
$scope.pausado = false;
}
}else{
$scope.executando = false;
$scope.pausado = false;
}
});
</script>
</html>
Try removing the
$locationProvider.html5Mode(true);, worked?– Giancarlo Abel Giulian
@Giancarloabelgiulian I retired, but it doesn’t work
– Alisson Acioli