1

Estou com problemas para carregar minha aplicação no browser. A url funciona porém a tela não mostra nenhum conteúdo, não mostra o html da view.

Segue o index.html:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PierX - WebAdmin</title>
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <link rel="stylesheet" type="text/css" href="css/dados.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>

<body ng-app="pierx">

    <style>
        body {
            background: #AAB7B8;
        }
    </style>

    <div ng-view></div>

    <script src="js/controllers/login.js"></script>
    <script src="js/rotas.js"></script>

</body>

</html>

Segue a view que quero carregar no browser:

<div class="container">
<div class="row">
    <div class="col-lg-8 col-lg-offset-2">
        <div class="box">
            <h3>TELA DE LOGINgfsdggsgsgdss</h3>
            <hr>
            <div class="input-group" ng-app="pierx" ng-controller="loginCtrl">                      
                <input type="text" class="form-control" placeholder="Cnpj" ng-model="users.cnpj">
                <input type="text" class="form-control" placeholder="Email" ng-model="users.email">
                <input type="text" class="form-control" placeholder="Senha" ng-model="users.senha">
            </div>
        </div><br>
        <div class="text-center">
            <a href="#/dados.html"><button type="button" class="btn btn-success left">Entrar <span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button></a>&nbsp;
            <button type="button" class="btn btn-danger right">Sair <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        </div>
    </div>
</div>

Segue o controller:

var app = angular.module('pierx', ['ngRoute', '$scope', '$location']);
app.controller('loginCtrl', function($scope, $location){

    $scope.texto = "Tkjfsaiojfiojfaijas";
    $scope.users = [
        {cnpj:"", email:"", senha:""},
    ];
});

Segue a rota:

var app = angular.module('pierx', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {


    $locationProvider.html5Mode(true);      // remove o # da url, padrão

    $routeProvider

    .when('/', {
        templateUrl : '/views/login.html',
        controller: 'controller/login.js'
      })
    .when('/dados', {
        templateUrl : '/views/dados.html',
        controller: 'controller/dados.js'
      })
    .otherwise ({ redirectTo: '/' });        // caso não seja nenhum desses, redirecione para a rota '/'
});
9
  • no navegador é apresentado algum erro? Commented 15/08/2017 às 19:53
  • Não mostra nenhuma mensagem não.
    – LeAndrade
    Commented 15/08/2017 às 19:54
  • @Leandro abra as developer tools (F12 normalmente) do seu browser e veja que erro aparece na consola.
    – jpmnteiro
    Commented 15/08/2017 às 19:55
  • sem o html5Mode funciona? senão é necessário configurá-lo Commented 15/08/2017 às 19:56
  • @Leandro alem disso, parece que o erro esta no facto de estar a declarar o mesmo modulo pierx duas vezes, uma vez antes do controller, outra vez antes do config
    – jpmnteiro
    Commented 15/08/2017 às 19:56

1 Resposta 1

3

Ao ativar o html5Mode, você terá de definir uma base, exemplo...

Sua pagina principal é index.html então logo abaixo de <header> você vai adicionar o seguinte

<base href="/nomeDoDiretorio/" />

também vai ter de configurar o .htaccess para vincular as url na sua página.

.htaccess

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /nomeDoDiretorio/
2
  • Aqui no caso eu teria que criar um arquivo .htacess na raíz do projeto e colocar este código?
    – LeAndrade
    Commented 15/08/2017 às 20:24
  • Eu tive de fazer isso para que ao mudar de rota, a raiz encontrasse as outras rotas, repare que agora as rotas não estão mais ligadas a sua aplicação, então creio que isso é necessário. mas se já está funcionando normal desconsidere. Commented 15/08/2017 às 20:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .