ngRoute not working properly

Asked

Viewed 49 times

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?

  • @Giancarloabelgiulian I retired, but it doesn’t work

1 answer

0

try using the $Location service

self.go = function ( path ) {
        $location.path( path );
};

<a href="" ng-click="myCtrl.go('musica/5876a78078b88fe8662a188b')">Abrir musica</a>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.