Angular application does not load in browser

Asked

Viewed 1,278 times

1

I am having trouble loading my application in the browser. The url works but the screen does not show any content, does not show the view html.

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>
    <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>

Follow 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 '/'
});
javascript angularjs

  • in the browser is shown some error?

  • Shows no message no.

  • @Leandro open the tools (F12 normally) of your browser and see what error appears in the console.

  • without html5Mode works? otherwise it is necessary to configure it

  • @Leandro also, it seems that the error is in the fact that it is declaring the same module pierx twice, once before the controller, again before the config

  • It doesn’t work not even taking away html5Mode

  • console error of a this: angular.js:88 Uncaught Error: [$Location:nobase] http://errors.angularjs.org/1.6.5/$Location/nobase at angular.js:88 at Mf.$get (angular.js:14297) at Object.invoke (angular.js:5040) at angular.js:4832 at d d (angular.js:4981) at e (angular.js:5006) at Object.invoke (angular.js:5032) at angular.js:4832 at Object. d [as get] (angular.js:4981) at instantiateRoute (angular-route.js:899)

  • then it is html5Mode error, ie if taking it out does not work you possibly have 2 errors, I will reply one then say which error appears

  • Guys got here was missing the base tag in the head of the index.html.

Show 4 more comments

1 answer

3


By activating the html5Mode, you will need to define a base, example...

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

<base href="/nomeDoDiretorio/" />

will also need to configure the .htaccess to link the url on 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/

  • Here in case I would have to create a file. htacess at the root of the project and put this code?

  • I had to do this so that when changing course, the root would find the other routes, notice that now the routes are no longer connected to your application, so I think this is necessary. but if it is already working normal disregard.

Browser other questions tagged javascript angularjs

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