Angular Application does not load in browser

0

I'm having trouble loading my application into my browser. The url works however the screen does not show any content, it does not show the html of the view.

Follow the 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><scriptsrc="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>

Here is the view I want to load in the 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>

Follow the controller:

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

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

Follow the route:

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 '/'
});
    
asked by anonymous 15.08.2017 / 21:52

1 answer

2

When you enable html5Mode , you will have to define a base, for example ...

Your home page is index.html then just below <header> you will add the following

<base href="/nomeDoDiretorio/" />

You'll also have to set .htaccess to link urls to your page.

.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/
    
15.08.2017 / 22:06