我对AngularJs很陌生，我试图通过语义验证为我的索引带来一个部分的，非常基本的登录表单。
问题是，如果我在索引中加载所有内容，一切正常，但如果我使用Angular路由，我的样式表和我的js脚本将停止工作，但只有那些必须使用部分。
以下是代码。
工作代码： 的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.'
}]
}
}
});
});
到目前为止，一切都运行良好。但我想尝试在部分上添加样式表和验证脚本的路线，但没有成功。
我也尝试将这些文件留在索引上，但它不起作用
破碎的代码： 的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>
似乎加载表单然后语义根据div的类给出了样式，但是它忽略了应用于“main.css”的额外样式和“loginFormValidation.js”的验证。
除了这两个文件之外，所有其他文件仍然有用，我认为如果我添加更多其他文件，这将会发生。
我现在不知道该怎么做，我尝试将这些文件添加到部分文件中，但它没有用。
无论如何要实现这个目标吗？
非常感谢!!
答案 0 :(得分：0)
对于初学者来说，拥有一个包含所有CSS文件中所有规则的“全局”CSS。 CSS文件将被缓存，因此您将节省下载时间。只需在。
中引用该全局CSS文件- 有工具可以为每条路线加载特定的CSS：
How to include view/partial specific styling in AngularJS
https://github.com/castillo-io/angular-css
以上内容可能会对您有所帮助。
我强烈建议你尝试改变很少的东西来使用ui-router ..快乐的编码。