I'm pretty new to AngularJs, i'm trying to bring on my index a partial, a pretty basic login form with semantic validation.
The issue is that, if i load everything within the index, everything works fine, but if i use Angular routes, my stylesheet and my js script stops working, but only those that have to work with the partials.
Here are the codes.
WORKING CODES: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<!--Mandatory links for styles and scripts-->
<link rel = "stylesheet" type = "text/css" href = "external/semantic/semantic.css">
<script type = "text/javascript" src = "external/js/jquery.min.js"></script>
<script type = "text/javascript" src = "external/semantic/semantic.js"></script>
<script type = "text/javascript" src = "external/angular-1.5.6/angular.js"></script>
<script type = "text/javascript" src = "external/angular-1.5.6/angular-route.js"></script>
<!--Own scripts and styles-->
<link rel = "stylesheet" type = "text/css" href = "app/styles/main.css">
<script type = "text/javascript" src = "app/modules.js"></script>
<script type = "text/javascript" src = "app/controllers/loginController.js"></script>
<script type = "text/javascript" src = "app/validations/loginFormValidation.js"></script>
</head>
<body data-ng-app = "loginApp">
<div class = "ui middle aligned center aligned grid" data-ng-app = "loginController">
<div class = "column">
<h2 class = "ui icon header">
<i class = "settings icon"></i>
<div class = "content">
Inicia sesión.
</div>
</h2>
<form class = "ui form segment">
<div class = "field">
<div class = "ui left icon input">
<i class = "user icon"></i>
<input type = "text" name = "username" data-validate = "username" placeholder = "Nombre de usuario" data-ng-model = "username">
</div>
</div>
<div class = "field">
<div class = "ui left icon input">
<i class = "lock icon"></i>
<input type = "password" name = "password" data-validate = "password" placeholder = "Contraseña" data-ng-model = "password">
</div>
</div>
<div class = "ui error message"></div>
<button type = "submit" class = "ui teal fluid submit button" ng-click = "loginUser()">
Login
</button>
<div class = "ui divider"></div>
<a href="#">Olvidaste la contraseña?</a>
</form>
</div>
</div>
</body>
</html>
modules.js
var login = angular.module('loginApp', ['ngRoute']);
loginController.js
login.controller('loginController', function($scope) {
$scope.loginUser = function (username, password) {
console.log($scope.username);
console.log($scope.password);
}
});
loginFormValidation.js
$(document).ready(function() {
$('.ui.form')
.form({
fields: {
username: {
identifier: 'username',
rules: [{
type: 'empty',
prompt: 'Ingresa tu usuario.'
}]
},
password: {
identifier: 'password',
rules: [{
type: 'empty',
prompt: 'Ingresa la contraseña.'
}]
}
}
});
});
Everything up to this point works fine. But I wanted to try out routes adding my stylesheet and the validation script on the partial with no success.
I also tried to leave this files on the index but it didn't work either
BROKEN CODES: index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<!--Mandatory links for styles and scripts-->
<link rel = "stylesheet" type = "text/css" href = "external/semantic/semantic.css">
<script type = "text/javascript" src = "external/js/jquery.min.js"></script>
<script type = "text/javascript" src = "external/semantic/semantic.js"></script>
<script type = "text/javascript" src = "external/angular-1.5.6/angular.js"></script>
<script type = "text/javascript" src = "external/angular-1.5.6/angular-route.js"></script>
<!--Own scripts and styles-->
<link rel = "stylesheet" type = "text/css" href = "app/styles/main.css">
<script type = "text/javascript" src = "app/modules.js"></script>
<script type = "text/javascript" src = "app/controllers/loginController.js"></script>
<script type = "text/javascript" src = "app/validations/loginFormValidation.js"></script>
<script type = "text/javascript" src = "app/configs/mainRoutes.js"></script>
</head>
<body data-ng-app = "loginApp">
<div data-ng-view></div>
</body>
</html>
mainRoutes.js
login.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'loginController',
templateUrl: 'app/partials/login/loginFormView.html'
})
.otherwise({
redirectTo: '/'
});
});
loginFormView.html
<div class = "ui middle aligned center aligned grid">
<div class = "column">
<h2 class = "ui icon header">
<i class = "settings icon"></i>
<div class = "content">
Inicia sesión.
</div>
</h2>
<form class = "ui form segment">
<div class = "field">
<div class = "ui left icon input">
<i class = "user icon"></i>
<input type = "text" name = "username" data-validate = "username" placeholder = "Nombre de usuario" data-ng-model = "username">
</div>
</div>
<div class = "field">
<div class = "ui left icon input">
<i class = "lock icon"></i>
<input type = "password" name = "password" data-validate = "password" placeholder = "Contraseña" data-ng-model = "password">
</div>
</div>
<div class = "ui error message"></div>
<button type = "submit" class = "ui teal fluid submit button" ng-click = "loginUser()">
Login
</button>
<div class = "ui divider"></div>
<a href="#">Olvidaste la contraseña?</a>
</form>
</div>
</div>
It seems to load the form and then semantic gives the style based on the class of the divs, but then it ignores the extra styling applied on "main.css" and the validation on "loginFormValidation.js".
All the other files still work except this two, and i think that this will happen with other files if i add some more.
I don't know what to do now, i tried adding this files into the partial, but it didn't work.
Is there anyway to achieve this?
Thank you very much!!
