I'm starting at AngularJS and I can not make routes with $ routeProvider working at all. I've tried several attempts to solve it on google and none of them solved my problem.
Simply the partial is not loaded into the ng-view of index.html.
Follow my code (as the problem is on the route, I believe you do not need to put the controller or service code).
app.js:
var app = angular.module("appGame", ['ngRoute']);
app.config(
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/login.html',
controller: 'usuarioController',
controllerAs: "loginCtrl"
})
.otherwise({
redirectTo: '/'
});
});index.html:
<!DOCTYPE html>
<html ng-app="appGame">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Game</title>
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/site.css">
</head>
<body>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script><scriptsrc="style/js/jquery-2.1.4.min.js"></script>
<script src="style/js/bootstrap.min.js"></script>
<script src="app/app.js"></script>
<script src="app/services/serviceLogin.js"></script>
<script src="app/controller/usuarioController.js"></script>
</body>
</html>login.html
<div class="col-md-8"></div>
<div class="col-md-4">
<h4>Realize o Login abaixo:</h4>
<form name="formLogin" ng-submit="formLogin.$valid && loginCtrl.realizaLogin()">
<div role="alert" ng-show="mostraMensagem" ng-class="classeErro">
{{mensagemErro}}
</div>
<div class="form-group">
<label for="exampleInputEmail1">Login</label>
<input type="text" class="form-control" id="login" placeholder="Login" ng-model="loginCtrl.usuarioLogin.login" required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Password</label>
<input type="password" class="form-control" id="password" placeholder="Senha" ng-model="loginCtrl.usuarioLogin.senha" required>
</div>
<button type="submit" class="btn btn-default pull-right">Login</button>
</form>
</div>userController.js
var ggApp = angular.module('appGame', ['servicoLogin']);
ggApp.controller("usuarioController", ['$scope', 'Login', function($scope, Login) {
$scope.erro = false;
$scope.mostraMensagem = false;
$scope.mensagemErro = "teste";
$scope.classeErro ='alert alert-danger'
this.usuarioLogin = {};
$scope.setClasseErro = function() {
if ($scope.erro) {
$scope.classeErro ='alert alert-danger'
} else {
$scope.classeErro = 'alert alert-success'
}
};
this.realizaLogin = function() {
var usuario = {
email: this.usuarioLogin.login,
senha: this.usuarioLogin.senha
}
var promise = Login.login(usuario);
promise.$promise.then(
function success(usuario) {
if (usuario.id > 0) {
$scope.erro = false;
$scope.mensagemErro = "Usuário encontrado com código = " + usuario.id;
} else {
$scope.erro = true;
$scope.mensagemErro = "Usuário não encontrado!";
};
$scope.mostraMensagem = true;
$scope.setClasseErro();
},
function error(value) {
$scope.erro = true;
$scope.mostraMensagem = true;
$scope.mensagemErro = "Erro: " + value.status;
}
);
};
}]);serviceLogin.js
var servicoLogin = angular.module('servicoLogin', ['ngResource']);
servicoLogin.factory('Login', ['$resource',
function($resource){
return $resource('http://localhost:8081/GamerAppService/webserver/usuario/realizaLogin', {}, {
login: {method:'POST'}
});
}]);The directory structure is:
- app
--- app.js
--- controller
---- userController.js
--- services
---- serviceLogin.js
--views
--- login.html
-index.html