When implementing a code using routes, the header files are not loading, giving the following message to everyone.
link 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
}
})();
// contacts-controller.js
angular.module ('MyApp') .controller ('ContactsController', ContactsController);
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>