#html #angularjs #node.js #single-page-application #w3.css
#HTML #angularjs #node.js #одностраничное приложение #w3.css
Вопрос:
У меня возникли проблемы с рендерингом CSS в клиентском приложении AngularJS, использующем NodeJS в качестве сервера. Весь приведенный ниже код предназначен для полного SPA (одностраничного приложения) и поддерживает компиляцию.
/*nodeJS: used to develop the server (server.js).*/
/*AngularJS: used to develop the HTML page (page.html).*/
/*w3 CSS: used as the custom CSS library.*/
Когда я ссылаюсь на файл .css с внешнего веб-сервера (онлайн), например,
<style href="http://css_source.com/version/file.css" rel="stylesheet"></style>
Страница отображается правильно со всем выполненным форматированием CSS. Но когда я ссылаюсь на файл .css из каталога моего приложения, например,
<style rel="stylesheet" href="css/file.css"></script>
он отображает HTML-страницу, но без форматирования CSS.
Кто-нибудь может мне помочь в этом вопросе, пожалуйста?
Пожалуйста, найдите структуру файла ниже и соответствующие коды для файла w3.css, server.js и page.html ниже.
Спасибо.
[СТРУКТУРА КАТАЛОГОВ]
NodeJS folder contains the following:
----server.js
----AngularJS folder
AngularJS folder contains the following:
----CSS folder
----js folder
----img folder
----page1.html
----page2.html
----page3.html
----mainpage.html
CSS folder contains the following:
----w3.css
js folder contains the following:
----angular.min.js
----angular-route.js
----angular-animate.js
img folder contains the following:
----img1.jpg
---img2.jpg
---img3.jpg
[КОНЕЦ СТРУКТУРЫ КАТАЛОГОВ]
[СЕРВЕР.JS-КОД]
var http = require('http');
var fs = require('fs');
var url = require('url');
// Create a server
http.createServer( function (request, response) {
// Parse the request containing file name
var pathname = url.parse(request.url).pathname;
// Print the name of the file for which request is made.
console.log("Request for " pathname " received.");
// Read the requested file content from file system
fs.readFile(pathname.substr(1), function (err, data) {
if (err) {
console.log(err);
// HTTP Status: 404 : NOT FOUND
// Content Type: text/plain
response.writeHead(404, {'Content-Type': 'text/html'});
}else {
//Page found
// HTTP Status: 200 : OK
// Content Type: text/plain
response.writeHead(200, {'Content-Type': 'text/html'});
// Write the content of the file to response body
response.write(data.toString());
}
// Send the response body
response.end();
});
}).listen(9800);
// Console will print the message
console.log('Server running at http://127.0.0.1:9800/');
[MAIN PAGE .HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Easytime Calculator</title>
<script src="../angular.min.js"></script>
<script src="../angular-route.js"></script>
<link rel="stylesheet" href="css/w3.css">
/***...here if I reference the w3.css file from an external server, it renders perfectly with the css formatting**.*/
but when I reference the w3.css from within my app folder (angularJS/css/w3.css), it does not render the css formatting but the angularJS codes compile.
</head>
<body ng-app="myApp">
<div class="w3-card-24 w3-margin" style="max-width:720px; height:550px;">
<header class="w3-container w3-light-grey w3-padding-18">
<h2>Easytime Calculators</h2>
</header>
<ul class="w3-navbar w3-green">
<!--<p><a href="#/" class="">Calculators Page</a></p>
<a href="#page1" class="">Simple Calculator</a>
<a href="#page2" class="">Advanced Calculator 1</a>
<a href="#page3" class="">Advanced Calculator 2</a>-->
<li><a href="#/" onclick="openCalc('main')" class="w3-hover-red">Main Page</a></li>
<li><a href="#page1" onclick="openCalc('simp')" class="w3-hover-red">Simple Calculator</a></li>
<li><a href="#page2" onclick="openCalc('adv1')" class="w3-hover-red">Advanced Calculator 1</a></li>
<li><a href="#page3" onclick="openCalc('adv2')" class="w3-hover-red">Advanced Calculator 2</a></li>
</ul>
<hr style="width:100%; border-bottom-color:purple; border-style:solid;" />
<ng-view></ng-view>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "mainpage.html",
})
.when("/page1", {
templateUrl : "page1.html",
})
.when("/page2", {
templateUrl : "page2.html",
})
.when("/page3", {
templateUrl : "page3.html",
});
});
app.controller("math1Ctrl", function ($scope) {
$scope.val1 = "";
$scope.val2 = "";
$scope.calculate = function() {
if(angular.equals($scope.selectedOperator, "-")){
$scope.result = ($scope.val1 - $scope.val2);
}
if(angular.equals($scope.selectedOperator, " ")){
$scope.result = ($scope.val1 $scope.val2);
}
if(angular.equals($scope.selectedOperator, "*")){
$scope.result = ($scope.val1 * $scope.val2);
}
if(angular.equals($scope.selectedOperator, "/")){
$scope.result = ($scope.val1 / $scope.val2);
}
/*if(angular.equals($scope.selectedOperator, "%")){
$scope.result = ($scope.val1 % $scope.val2);
}*/
if($scope.selectedOperator ==""){
scope.result = "Invalid operator - Please select an operator";
}
}//end the calculate function
});
app.controller("math2Ctrl", function ($scope) {
$scope.val1 = "";
$scope.val2 = "";
$scope.calculate = function() {
if(angular.equals($scope.selectedOperator, "^")){
$scope.result = ($scope.val1 ** $scope.val2);
}
if(angular.equals($scope.selectedOperator, "100%")){
$scope.result = (($scope.val1 /100)* $scope.val2);
}
if(angular.equals($scope.selectedOperator, "%")){
$scope.result = ($scope.val1 % $scope.val2);
}
if(angular.equals($scope.selectedOperator,"")){
scope.result = "Invalid operator - Please select an operator";
}
}//end the calculate function
});
app.controller("math3Ctrl", function ($scope) {
$scope.val1 = "";
//$scope.val2 = "";
$scope.showMe = true;
//check which operator is active and hide or show the textbox
$scope.myFunc = function() {
if (angular.equals($scope.selectedOperator, "")){
$scope.showMe = true;
$scope.sh = false; //hid or show the 'of' keyword beside the textbox
}else if(angular.equals($scope.selectedOperator, "sqrt")){
$scope.showMe = true;
$scope.sh = true; //hid or show the 'of' keyword beside the textbox
$scope.sel = true; //show the <p> element for the selected number
$scope.action = "Square the Root"; //change the value of the action button
$scope.msg = "";
}else if(angular.equals($scope.selectedOperator, "pi")){
$scope.showMe = false;
$scope.sh = false; //hid or show the 'of' keyword beside the textbox
$scope.val1 = ""; //reset the val1 variable to empty
$scope.sel = false; //hide the <p> element for selected number
$scope.action = "Get Value of PI"; //display a different text on the action button
$scope.msg = ""; //clear the msg variable
}
}// end the myFunc function
//calculate and display the value based on the selected operator
$scope.calculate = function() {
if(angular.equals($scope.selectedOperator, "sqrt")){
$scope.result = Math.sqrt($scope.val1);
$scope.msg = "The Square Root of " $scope.val1 " is: " $scope.resu<
if (angular.equals($scope.val1, "")){
$scope.msg = "Please select a number to square.";
}
}else if(angular.equals($scope.selectedOperator, "pi")){
$scope.x = 22;
$scope.y = 7;
$scope.result = ($scope.x / $scope.y);
$scope.msg = "The value of [Pi Ratio] is usually [22 / 7] = " $scope.resu<
}else{
$scope.result = "Invalid operator - Please select an operator";
}
}//end the calculate function
});
</script>
<script>
/* this script is used to create a navigation tab on the page
you can add more tabs by adding div blogs above.
*/
openCalc("main")
function openCalc(calcName) {
var i;
var x = document.getElementsByClassName("calc");
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
document.getElementById(calcName).style.display = "block";
}
</script>
</div>
</body>
</html>
[PAGE1 .HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div ng-controller="math1Ctrl" style="margin-left:35px;">
<h2 style="color:navy;">Simple Functions Calculator</h2>
<form name="maths" action="">
<div>
<label>Enter 1st Number : </label>
<input type="number" name="val1" ng-model="val1" required />
<span class="w3-padding-left w3-text-red" ng-show="maths.val1.$touched amp;amp; maths.val1.$invalid">value 1 must be a number and is required </span>
</div>
<p></p>
<div>
<label>Select Desired Operator : </label>
<select name="operator" ng-model="selectedOperator" nc-click="chkOperator()">
<option value=" " selected="selected">Addition</option>
<option value="-">Subtraction</option>
<option value="*">Multiplication</option>
<option value="/">Division</option>
</select>
</div>
<p></p>
<div>
<label>Enter 2nd Number : </label>
<input type="number" name="val2" ng-model="val2" required />
<span class="w3-padding-left w3-text-red" ng-show="maths.val2.$touched amp;amp; maths.val2.$invalid">value 2 must be a number and is required</span>
</div>
<p></p>
<div>
<!--<button ng-click="calculate()">Calculate</button>-->
<h3 class="w3-btn w3-padding w3-green" ng-click="calculate()">
Calculate
</h3>
</div>
</form>
<p>1st Number is: <span class="w3-padding-left w3-text-red">{{val1}}</span></p>
<p>2nd Number is: <span class="w3-padding-left w3-text-red">{{val2}}</span></p>
<h3 class="w3-padding-left w3-text-red">
Value 1
<span class="w3-padding-left w3-text-purple">[ {{selectedOperator}} ]</span>
Value 2
<span class="w3-padding-left w3-text-green">equals to: </span>
{{result}}
</h3>
</div>
</body>
</html>
[PAGE 2]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div ng-controller="math2Ctrl" style="margin-left:35px;">
<h2 style="color:navy;">Advanced Calculator 1</h2>
<form name="maths" action="">
<div>
<label>Enter 1st Number : </label>
<input type="number" name="val1" ng-model="val1" required />
<span style="color:red;" ng-show="maths.val1.$touched amp;amp; maths.val1.$invalid">value 1 must be a number and is required </span>
</div>
<p></p>
<div>
<label>Select Desired Operator : </label>
<select name="operator" ng-model="selectedOperator" nc-click="chkOperator()">
<!--<option value=" " selected="selected">Addition</option>
<option value="sqrt">SQRT</option>-->
<option value="^">Exponent (power of)</option>
<option value="100%">Percent</option>
<option value="%">Modulus (remainder)</option>
</select>
</div>
<p></p>
<div>
<label>Enter 2nd Number : </label>
<input type="number" name="val2" ng-model="val2" required />
<span style="color:red;" ng-show="maths.val2.$touched amp;amp; maths.val2.$invalid">value 2 must be a number and is required</span>
</div>
<p></p>
<div>
<!--<button ng-click="calculate()">Calculate</button>-->
<h3 class="w3-btn w3-padding w3-green" ng-click="calculate()">Calculate</h3>
</div>
</form>
<p>1st Number is: <span class="w3-padding-left w3-text-red">{{val1}}</span></p>
<p>2nd Number is: <span class="w3-padding-left w3-text-red">{{val2}}</span></p>
<h3 class="w3-padding-left w3-text-red">
Value 1
<span class="w3-padding-left w3-text-purple">[ {{selectedOperator}} ]</span>
Value 2
<span class="w3-padding-left w3-text-green">equals to: </span>
{{result}}
</h3>
</div>
</body>
</html>
[PAGE3.HTML ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div ng-controller="math3Ctrl" style="margin-left:35px;">
<h2 style="color:navy;">Advanced Calculator 2</h2>
<form name="maths" action="">
<div>
<label>Select Desired Operator : </label>
<select name="operator" ng-model="selectedOperator" ng-change="myFunc()">
<option value="sqrt" selected="selected">SQRT</option>
<option value="pi">PI Ratio</option>
</select> <span ng-show="sh">Of</span>
</div>
<p></p>
<div ng-show="showMe">
<label>Enter a Number : </label>
<input type="number" name="val1" ng-model="val1" required />
<span class="w3-padding-left w3-text-red" ng-show="maths.val1.$touched amp;amp; maths.val1.$invalid">value 1 must be a number and is required </span>
</div>
<p></p>
<div>
<h3 class="w3-btn w3-padding w3-green" ng-click="calculate()">{{action}}</h3>
</div>
</form>
<p ng-show="sel">Selected Number is: <span style="color:red;">{{val1}}</span></p>
<h3 class="w3-padding-left w3-text-red">{{msg}} </h3>
</div>
</body>
</html>
[КОД W3.CSS]
/* W3.CSS 2.8 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}
img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
h1,h2,h3,h4,h5,h6,.w3-slim,.w3-wide{font-family:"Segoe UI",Arial,sans-serif}
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
.w3-serif{font-family:"Times New Roman",Times,serif}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
img{margin-bottom:-5px}a{color:inherit}
.w3-image{max-width:100%;height:auto}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}
.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}
.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}
.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}
.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
.w3-btn,.w3-btn-block{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none!important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap}
.w3-btn:hover,.w3-btn-block:hover,.w3-btn-floating:hover,.w3-btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-btn-floating,.w3-btn-floating-large,.w3-closenav,.w3-opennav{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
* некоторый текст усечен *
Комментарии:
1. Можете ли вы предоставить ссылку на онлайн-версию всего этого?
2. Какой путь вы используете для доступа к своей странице? Почему ваши ссылки на angular используются
../?3. Вы обслуживаете файл css из узла srver или получаете к нему доступ локально на клиенте?
4. Если вы посмотрите на структуру файла, папка CSS, содержащая файл w3.css, находится внутри <папки AngularJS>, а <папка AngularJS> находится внутри <папки NodeJS> . В <NodeJS fold> у меня есть server.js файл и в <папке AngularJS> у меня есть HTML-файлы.
Ответ №1:
в приведенном выше коде показано, что вы ссылаетесь на свой css следующим образом:
<style rel="stylesheet" href="css/file.css"></script>
Вы закрываете style тег script тегом
Комментарии:
1. Привет, спасибо за замечание. Но проблема не в этом. Ошибка, которую вы видели выше, — это опечатка, когда я печатал этот документ. Все равно спасибо.