Use angularjs 1.2. Within this code there is already content of angularjs, both in the initialization in the header, I have also declared ng-app and ng-controller , in addition to the zone of beginning of session are added ng-model and ng-submit .
I do not really know what can be badly ordered, structured or located but it does not recognize me $state or UserService when I put them in the controller.
This is the error that throws me:
This is the HTML code:
<!DOCTYPE html>
<html lang="es" ng-app="LoginCTRL">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Kupomcity</title>
<!-- Bootstrap core CSS -->
<script src="lib/angular.js"></script>
<script src="lib/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="js/controllers/LoginCTRL.js"></script>
<script src="app.js"></script>
<script src="js/tether.js"></script>
<script src="lib/services.js"></script>
<script src="js/vendor/jquery-slim.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body ng-controller="LoginController">
<header class="containNav">
<div class="topNav">
<div class="container">
<a href="#" class="logoMenu"><img src="img/logo.png"></a>
<div class="input-group" id="searchNav">
<input type="text" class="form-control" placeholder="¿Qué estas buscando?">
<span class="input-group-btn">
<button class="btn" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
</div>
<div class="coontainLoginNav hidden-sm-down">
<a href="#" class="btnIngresarNav">Ingresar</a>
<a href="#" class="btnCrearCuentaNav">Crear cuenta</a>
</div>
</div>
</div>
<nav class="navbar navbar-toggleable-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#">Iniciar Sesion</a>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav">
<!--
Resto de las categorias en mobile
-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="hidden-md-down"><i class="fa fa-bars" aria-hidden="true"></i></span><span class="hidden-md-up">Más Categoría</span>
</a>
<div class="dropdown-menu" id="restoCategorias" aria-labelledby="dropdownMenu">
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
<a class="dropdown-item" href="#">categoria</a>
</div>
</li>
<!--
Resto de las categorias en mobile
-->
<li class="nav-item active">
<a class="nav-link" href="#">categoria 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">categoria 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">categoria 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">categoria 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">categoria 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">categoria 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">categoria 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">categoria 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">categoria 9</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">categoria 10</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<section class="row">
<div class="col-md-6 offset-md-3">
<h2 class="tituloLogin">Iniciar Sesión</h2>
<form ng-submit="formSubmit" class="form">
<div class="inputRojo input-group mb-3 mr-sm-2">
<div class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
<input type="text" name="email" ng-model="usuario.email" class="form-control" placeholder="E-mail">
</div>
<div class="inputRojo input-group mb-2 mr-sm-2">
<div class="input-group-addon"><i class="fa fa-key" aria-hidden="true"></i></div>
<input type="password" name="passwd" ng-model="usuario.passwd" class="form-control" placeholder="Contraseña">
</div>
<a href="#" class="btnContrasenaLogin mb-3">¿Olvidaste tu contraseña?</a>
<button type="submit" class="btn btn-primary btn-block" ng-click="SignInClean()">Iniciar Sesión</button>
<button type="button" class="btn btn-secondary btn-block mb-4"><i class="fa fa-facebook" aria-hidden="true"></i> Ingresar con Facebook</button>
<a href="#" class="btnRegistrarme mb-3">Registrarme</a>
</form>
</div>
</section>
</div>
<footer>
<div class="topFooter">
<div class="container">
<div class="row">
<div class="col-12 col-md-4 mt-4">
<h4>Suscríbete a nuestro newsletter</h4>
<p class="textSmall"><small>Entérate primero de los últimos descuentos y promociones disponibles en Kupom City directo en tu e-mail.</small></p>
<div class="input-group" id="newsletter">
<input type="text" class="form-control" placeholder="Ingresa tu E-mail">
<span class="input-group-btn">
<button class="btn" type="button"><i class="fa fa-envelope-o" aria-hidden="true"></i></button>
</span>
</div>
</div>
<div class="col-6 col-md mt-4">
<h4>Somos Kupom city</h4>
<div class="row">
<ul class="nav flex-column menuFooter">
<li class="nav-item">
<a class="nav-link active" href="#">Acerca de Kupom City</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Únete a nuestro equipo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">¿Cómo publico en Kupom City?</a>
</li>
</ul>
</div>
</div>
<div class="col-6 col-md mt-4">
<h4>¡A Seguirnos!</h4>
<p class="textSmall"><small>Estamos en las redes sociales para ayudarte con lo que necesites.</small></p>
<a href="#" class="btnRedesFooter mr-3"><i class="fa fa-facebook"></i></a>
<a href="#" class="btnRedesFooter"><i class="fa fa-instagram"></i></a>
</div>
<div class="col-xs-12 col-md mt-4">
<h4>Descarga la app</h4>
<a href="#" class="btnTiendasFooter"><img src="img/app-store.png"></a>
<a href="#" class="btnTiendasFooter mt-3"><img src="img/google-play.png"></a>
</div>
</div>
</div>
</div>
<div class="bottomFooter">
<div class="container">
<p>2017 Kupom City SPA, todos los derechos reservados.
<br><a href="">[email protected]</a>
</p>
</div>
</div>
</footer>
</body>
</html>
Here I leave my app.js file.
var app = angular.module('starter', [ 'starter.services','angularMoment'
, 'ui.router' ])
app.run(function($window, $q, $state, UserService, $rootScope,
$timeout) {
if (JSON.stringify(UserService.getLoginUser()) != '{}') {
}
})
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('inicio', {
url: '/',
templateUrl: 'inicio.html',
controller: 'InicioCTRL'
})
.state('crear', {
url: '/crear',
templateUrl: 'crear.html',
controller: 'CrearCTRL'
})
.state('interior-categoria', {
url: '/interior-categoria',
templateUrl: 'interior-categoria.html',
controller: 'CategoriaCTRL'
})
.state('interior-kupom', {
url: '/interior-kupom',
templateUrl: 'interior-kupom.html',
controller: 'KupomCTRL'
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCTRL'
})
.state('perfil-comercio', {
url: '/perfil-comercio',
templateUrl: 'perfil-comercio.html',
controller: 'PerfilComercioCTRL'
})
.state('perfil', {
url: '/perfil',
templateUrl: 'perfil.html',
controller: 'PerfilUsuarioCTRL'
})
.state('recuperar', {
url: '/recuperar',
templateUrl: 'recuperar.html',
controller: 'RecuperarCTRL'
})
.state('trabaja-con-nosotros', {
url: '/trabaja-con-nosotros',
templateUrl: 'trabaja-con-nosotros.html',
controller: 'TrabajaNosotrosCTRL'
})
$urlRouterProvider.otherwise('/');
});
And finally my login driver.
var app = angular.module("LoginCTRL",[]);
app.controller("LoginController", [ '$state', 'UserService',
function($scope, $rootScope, $state, UserService) {
$scope.usuario = {
email: UserService.getUser().email,
passwd: UserService.getUser().passwd,
};
var form = new FormData();
form.append("email", $scope.usuario.email);
form.append("passwd", $scope.usuario.passwd);
var settings = {
"async": true,
"crossDomain": true,
"url": "http://www.kupomcity.com/gamma/api_v2.php?_opt=user&_act=login",
"method": "POST",
"processData": false,
"contentType": false,
"mimeType": "multipart/form-data",
"data": form
}
$.ajax(settings).done(function(response) {
var data = JSON.parse(response);
if (data.code == 'OK') {
var userData = {
k_user_id: data.user_id,
k_user_nombre: data.nombre,
k_user_email: data.email
};
$window.localStorage.setItem('user-data', JSON.stringify(userData));
if (data.code == 'EXISTS') {
$state.go('inicio', {}, {
reload: true
});
}else{
}
} else if (data.code == 'ERROR') {
} else {
console.log('ELSE');
console.log(data);
}
});
}]);