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.
– Taisbevalle
It is probably because the files are inside folders and not in the application root.
– Jéf Bueno
I think @jbueno may have got it right. Show us the project structure.
– BrTkCa