Using ng-view and routeProvider does not render partial html

Asked

Viewed 908 times

0

I’m starting at Angularjs and I can’t make the routes with $routeProvider work at all. I’ve searched several solution attempts on google and none of them solved my problem.

Only partial is not loaded in the ng-view of index.html.

Follow my code (as the problem is in route, I believe it is not necessary to put the code of the controller or service).

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>
        <script src="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>
        
        <script src="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>

usuarioController.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
----usuarioController.js
---services
----serviceLogin.js
--views
---login.html
-index.html

angularjs route angular-routes

  • Browser console shows some error?

  • No error Vinicius. Console is clean and is what most intrigues me.

  • You are using relative paths in almost all scripting Urls and even views and templates... change by absolute paths (probably only add the "/" at the beginning of the Urls should solve). Maybe it could be something related, because I see no other reason. Something else, change the call to the method config to pass an array instead of a function, as done with the controllers, where it is specified its dependencies in the order expected by the function, which is the last element of the vector.

  • @Vinicius, I made the suggested changes, but I still have the same problem. The strangest thing of all is that when I put the /login, for example, in the url of the browser it returns me a 404, IE, it seems that it is not processing the configuration of routes.

  • Tonight I will have access to a web server, and I will try to simulate the problem. I send you news!

  • @Viníciusgobboa.deOliveira I think I was able to find the point of the problem, but I haven’t found the solution yet. I was doing a test by deletion and when I removed the reference to my controller, the route worked. I did a test putting the controller inside the app.js and it worked too. It just doesn’t work with the separate file controller! I took the opportunity to put the controller code in the question to see if there is something wrong with it that is causing this problem (still showing no error in the console).

  • I’m going to risk another possibility... if I’m not mistaken [I’m in the service, no time to search] when scripts are put into body, they are not executed in the order they appear. If you put them in the head, works?

  • @Viníciusgobboa.deOliveira, it doesn’t work. I was only able to make it work with separate files by taking var ggApp = angular.module('appGame', ['servicoLogin']); from the controller file and putting the direct injection into the app.js. It looks like he was somehow overwriting the app with what was in the controller.

  • I can’t believe I didn’t realize this... really, is wrong. If you want to use the same module declared earlier, in the reuses pass only 1 parameter to the call angular.module. That is, the first call can specify dependencies of your module in the second parameter. In the other calls, you cannot specify the dependencies parameter (it has to be undefined).

Show 4 more comments
No answers

Browser other questions tagged angularjs route angular-routes

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