I am having issues with rendering CSS on AngularJS client app using NodeJS as the Server. The entire code you have below are for a complete SPA (single page application) and they are compile-enabled.
/*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.*/
When I reference the .css file from an external webserver (online), e.g,
<style href="http://css_source.com/version/file.css" rel="stylesheet"></style>
It renders the page correctly with all CSS formatting done. But when I reference the .css file from within my application directory, e.g,
<style rel="stylesheet" href="css/file.css"></script>
it does render the HTML page but without the CSS formatting. Can anyone help me on this issue please? Please find the file structure below, and the respective codes for w3.css file, server.js and page.html below.
Thank you.
[DIRECTORY STRUCTURE]
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
[END OF DIRECTORY STRUCTURE]
[SERVER.JS CODE]
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.result;
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.result;
}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 && 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 && 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 && 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 && 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 && 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 CODE]
/* 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}
* some text truncated *
