Error loading header files with Angularjs

Asked

Viewed 131 times

0

When implementing a code using routes, the header files are not loading, giving the following message to everyone.

http://localhost:9090/bootstrap.css Failed to load Resource: the server responded with a status of 404 (Not Found)

Follow the code below.

//main.js

(Function () { angular.module('Myapp', ['ngRoute']). config(config);

function config($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);  // Módulo do html5 para retirar o # da URL
    $routeProvider.when('/cadastro', {
        templateUrl: 'cadastro.html',
        controller: 'CadastroController'
    });

    $routeProvider.when('/cadastro/contato', {
        templateUrl: 'contatos.html',
        controller: 'ContatosController'
    });

    $routeProvider.otherwise({ redirectTo: '/cadastro' });     // Redireciona caso a URL digita não existir

}


})();

// js contacts-controller.

angular.module('Myapp') . controller('Contact Center', Contact Center);

function ContatosController ($scope, $http) {

    $scope.contatos = [{}];

    $scope.listarContato = function (contato) {
        $http.get('http://localhost:9090/angular/api/alunos/todos')
            .then(function(contato){
                $scope.contatos = contato.data;
            },
            function(erro){
                console.log(erro);
            });
    }

    $scope.listarContato();


}

// cadastro-controller.js

angular.module('Myapp') . controller('Cadastrocontroller', Cadastrocontroller);

function CadastroController ($scope, $http) {

    $scope.contatos = [
        {}
    ];


    $scope.adicionarContato = function (contato) {
        $http.post('http://localhost:9090/angular/api/alunos/cadastrar', contato)
            .then(function(contato) {
                $scope.listarContato();
                delete $scope.contato;
                $scope.contatoForm.$setPristine();
            },
            function(erro){
                console.log(erro);
            });

    }

    $scope.removerContato = function (contato) {
            $http.post('http://localhost:9090/angular/api/alunos/remover', contato)
            .then(function(contato) {
                $scope.listarContato();
                delete $scope.contato;
                $scope.contatoForm.$setPristine();
            },
            function(erro){
                console.log(erro);
            });

    }

    $scope.alterarContato = function (contato) {
            $http.post('http://localhost:9090/angular/api/alunos/alterar', contato)
            .then(function(contato) {
                $scope.listarContato();
                delete $scope.contato;
                $scope.contatoForm.$setPristine();
            },
            function(erro){
                console.log(erro);
            });

    }

    $scope.listarContato = function (contato) {
        $http.get('http://localhost:9090/angular/api/alunos/todos')
            .then(function(contato){
                $scope.contatos = contato.data;
            },
            function(erro){
                console.log(erro);
            });
    }

    $scope.listarContato();
}

//index.html

Contact record

<!--Css-->
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="estilo.css">
<!--Js-->
<script src="angular.js"></script>
<script src="angular-route.min.js"></script>
<script src="main.js"></script>
<script src="cadastro-controller.js"></script>
<script src="contatos-controller.js"></script>

    </ng-view>
</div>

  • Enter your code.

  • 1

    It is probably because the files are inside folders and not in the application root.

  • I think @jbueno may have got it right. Show us the project structure.

No answers

Browser other questions tagged

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