个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我是 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>
模块.js
var login = angular.module('loginApp', ['ngRoute']);
登录 Controller .js
login.controller('loginController', function($scope) {
$scope.loginUser = function (username, password) {
console.log($scope.username);
console.log($scope.password);
}
});
登录表单验证.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: '/'
});
});
登录表单 View .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”的验证。
除这两个文件外，所有其他文件仍然有效，我认为如果我添加更多文件，其他文件也会发生这种情况。
我现在不知道该怎么办，我尝试将这些文件添加到部分文件中，但没有成功。
有什么办法可以实现吗？
非常感谢!!
最佳答案
对于初学者来说，拥有一个包含所有 CSS 文件中所有规则的“全局”CSS。 CSS 文件将被缓存，因此您将节省下载时间。只需在 .
中引用该全局 CSS 文件即可- 有一些工具可以为每个路由加载特定的 CSS:
How to include view/partial specific styling in AngularJS
https://github.com/castillo-io/angular-css
以上内容可能对您有所帮助。
我强烈建议你尝试改变很少的东西来使用 ui-router..快乐的编码。
关于javascript - 使用路由/部分时如何在 AngularJs 上加载 js 和 css 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38215385/
24
4
0
我是一名优秀的程序员,十分优秀！