I have an angular.js app where the index.html looks something like with ng-app in the <html> tag
<html lang="en" ng-app="app">
<head></head>
<body>
<custom-navbar-directive></custom-navbar-directive> //angular js directive
<custom-loader></custom-loader>
<!-- To render components -->
<div ui-view ng-cloak></div>
</body>
</html>
I was following the steps in the single-spa angular.js guide. I removed the ng-app from <html> tag and added the following in my app.js
System.register([], function (_export) {
return {
execute: function () {
_export(
window.singleSpaAngularjs.default({
angular: angular,
mainAngularModule: "app",
uiRouter: true,
preserveGlobal: false,
})
);
},
};
});
Also I did the import map and singleSpa.registerApplication steps in the index.html
My issue is now the content is rendering but the <custom-navbar-directive> and <custom-loader> are missing. I added them inside the index.html since they are commonly used in each html template.
When I inspect and checked the rendered html I noticed that they are outside the loaded single spa angularjs app
<custom-navbar-directive></custom-navbar-directive>
<custom-loader></custom-loader>
<div id="single-spa-application:legacyAngularApp">
<div id="__single_spa_angular_1" class="ng-scope">
<!-- content -->
</div>
</div>
I guess since they are directives if those are inside the <div id="__single_spa_angular_1" class="ng-scope"> then it should render.
Any idea how to solve this?
I am trying to create a web portfolio using html, css, node and particlesJS.
Here is a quick reference to my index.js file where in here I've coded expresss to include the static files(style.css, images,...etc) inside of the folder named static so they're utilized when I run the local server with nodemon. The server runs and loads the initial index.html file. When I click to go to the about me page, that works too. My problem is clicking back to the "Me" page. When I set href="../index.html" , I get the error "Cannot GET /index.html".
I have tried including all the files including index.html in the same folder and making a reference to that in the index.JS file. No avail.
// create an express app
const express = require("express")
const app = express()
// use the express-static middleware
app.use(express.static("public"))
app.use("/static", express.static('./static/'));
// define the first route
app.get("/", function (req, res) {
res.sendFile(__dirname + '/index.html');
})
// start the server listening for requests
app.listen(process.env.PORT || 3000,
() => console.log("Server is running... on localhost:3000"));
Here's another reference to how my directory is setup [Directory][https://imgur.com/JaGaxkd]
This is the about me html file from which I want to navigate back to the first index.html
<!DOCTYPE html>
<html>
<title>Meet Me</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<body>
<div id="particles-js" class="topnav">
<head>About</head>
<H3>About ME</H3>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Me</li>
</ul>
</div>
<script type="text/javascript" src="./particles.min.js"></script>
<script type="text/javascript" src="./app.js"></script>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
I believe I have the paths right but I think I am missing something I'm just not sure what it is . I would appreciate any help on this. Much thanks in advance
I am using express.js to an HTML file which further calls a bunch of JS files. The server seems to be working, however the JS and CSS files configured within the HTML are not being fetched by the browser.
var express = require('C:/Program Files/nodejs/node_modules/express/lib/express')
var app = express()
var path = require('C:/Program Files/nodejs/node_modules/path/path')
app.use(express.static(__dirname + '/lib'));
app.use(express.static(__dirname + '/js'));
app.use(express.static(__dirname + '/css'));
app.use(express.static(__dirname + '/img'));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})
My html file is:
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="./css/source-sans-pro.js"></script>
<link href="css/ratchet.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<script id="home-tpl" type="text/x-handlebars-template">
<header class="bar-title"><h1 class="title">Employee Directory</h1> </header>
<div class="bar-standard bar-header-secondary"><input class='search-key' type="text" style="height:31px;"/></div>
<div class="content"><ul class='list'></ul></div>
</script>
<script id="employee-li-tpl" type="text/x-handlebars-template">
{{#.}}
<li>
<a href="#employees/{{this.id}}" class="tappable">
<img src='img/{{firstName}}_{{lastName}}.jpg'/>
<p>{{this.firstName}} {{this.lastName}}</p>
<p>{{this.title}}</p>
<span class="chevron"></span><span class="count">{{reports}} </span>
</a>
</li>
{{/.}}
</script>
<script id="employee-tpl" type="text/x-handlebars-template">
<header class="bar-title"><a class="button-prev" href="#">Back</a><h1 class="title">Details</h1></header>
<div class='content'>
<div class="details">
<img src='img/{{firstName}}_{{lastName}}.jpg'/>
<h1>{{firstName}} {{lastName}}</h1>
<h2>{{title}}</h2>
<h2>{{city}}</h2>
</div>
<ul class="list inset" style="clear:both;">
{{#if managerId}}
<li> <p>View Manager</p><p>{{managerName}}</p><div class="action-icon icon-manager"/></li>
{{/if}}
{{#if reports}}
<li> <p>View Direct Reports</p><p>{{reports}}</p><div class="action-icon icon-reports"/></li>
{{/if}}
<li><img src="/pix/byron_bay_225x169.jpg" ></li>
<li><img src="/pix/byron_bay_225x169.jpg" </li>
<li> <p>Message</p><p>{{cellPhone}}</p><div class="action-icon icon-sms"/> </li>
<li><p>Email</p> <p>{{email}}</p><div class="action-icon icon-mail"/></li>
<li><p>Map</p> <p>{{city}}</p><div class="action-icon icon-location"/></li>
</ul>
</div>
</script>
<script id="reports-tpl" type="text/x-handlebars-template">
<header class="bar-title"><a class="button-prev" href="#">Back</a><h1 class="title">Direct Reports</h1></header>
<div class='content'>
<div class="details">
<img src='img/{{firstName}}_{{lastName}}.jpg'/>
<h1>{{firstName}} {{lastName}}</h1>
<h2>{{title}}</h2>
<h2>{{city}}</h2>
</div>
<ul class="list"></ul>
</div>
</script>
<script src="./phonegap.js"></script>
<script src="./lib/fastclick.js"></script>
<script src="./lib/zepto.min.js"></script>
<script src="./lib/handlebars.js"></script>
<script src="./js/storage/memory-store.js"></script>
<script src="./js/HomeView.js"></script>
<script src="./js/EmployeeView.js"></script>
<script src="./js/ReportsView.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
When I render this using an IIS server, it works perfectly fine.
you don't need to specify paths for node modules,
just do this:
const express = require('express');
const app = express();
const path = require('path');
First, I'd discourage you from using absolute paths when using node. I'd suggest configuring your Windows environment, so it works correctly with npm, then package.json should tell the npm what modules are required.
When you finish with your configuration your first line should look like this:
var express = require('express');
Additionally, consider moving on to es6 and use const/let instead of var. But that's another topic.
Your problem is that resources files are unknown for the browser.
For express, it's better to run it locally and use it in a browser navigating to localhost: PORT.
Then, resources could be requested from relative urls like "/css/foo.css".
Then, when your website is deployed it won't get lost when the hostname changes.
Make sure that you're script 'src' is correct in your html page. If your css is in you styles folder you'd have to source it like so
<link rel="stylesheet" href="/styles/style.css">
Also make sure that the order of your files are correct. You will want to source your js first. If all else fails try using the jq or js cdn. Google Jquery CDN or whatever language you're using and copy and paste the cdn in your <head>. I wouldn't recommend doing it regularly. CDN's don't work without internet.
I am using node.js to run a local website and am having trouble linking the css to html.
The html is:
<!DOCTYPE html>
<html>
<head>
<title> Name </title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="background">
<h1> My Website </h1>
<span style="float:right">
Google
</span>
</body>
and css is:
#background {
background-color: #0099FF;
}
I have not been able to view the effects of the css on the website and am not able to change the background color.
I have checked online resources and it seems as if the syntax is correct. The css file style.css is in the same directory as the html. The html is working on the local website but not the css.
update: i am adding the app.js file
var http = require('http'),
fs = require('fs');
fs.readFile('./header.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(8080);
});
Your syntax looks correct. Definitely check the browser console to see if there is error with finding the css file. I would check to make sure that the css file is indeed named "style.css".
try doing class="background"
and then in css do .background instead of #background
Try putting this code at the line under your title tag
<base href="/">
This thread might help you more
I'm building my first AngularJS dynamic form, built based on information received from a JSON file using AngularJS directive.
Everything works, my issue is that the JSON code is getting displayed while the page is loaded - once the page is loaded the JSON code disappears.
Am I doing something wrong?
Check http://plnkr.co/edit/v4jOwuF6jmZfORlNbvIB?p=preview to see the behavior, click on "Stop"/"Start" multiple times to see the behavior.
HTML code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ViewCtrl">
<div ng-repeat="page in form.form_pages">
<div ng-repeat="field in page.page_fields" class="form-group">
<field-directive field="field" ng-form="subForm"></field-directive>
</div>
</div>
</body>
js code:
'use strict';
angular.module('myApp',[])
.controller('ViewCtrl', ['$scope', function($scope) {
var jsonStr='{"form_id":"1","form_name":"My Test Form","form_pages":{"1":{"page_id":1,"page_title":"My First Tab","page_hide":false,"page_fields":{"1":{"field_id":1,"field_title":"First Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"2":{"field_id":2,"field_title":"Last Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"3":{"field_id":3,"field_title":"Gender","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false},"4":{"field_id":4,"field_title":"Email Address","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"5":{"field_id":5,"field_title":"Password","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"6":{"field_id":6,"field_title":"Birth Date","field_type":"textfield","field_value":"1981-01-10T06:00:00.000Z","field_required":true,"field_disabled":false},"7":{"field_id":7,"field_title":"Your browser","field_type":"textfield","field_value":"2","field_required":false,"field_disabled":false},"8":{"field_id":8,"field_title":"Additional Comments","field_type":"textarea","field_value":"","field_required":true,"field_disabled":false},"9":{"field_id":9,"field_title":"I accept the terms and conditions.","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false}}}}}';
$scope.form = JSON.parse(jsonStr);
}])
.directive('fieldDirective',function($http, $compile) {
var linker = function(scope, element) {
// GET template content from path
var templateUrl = "textfield.html";
$http.get(templateUrl).success(function(data) {
element.html(data);
$compile(element.contents())(scope);
});
}
return {
template: '<div>{{field}}</div>',
restrict: 'E',
scope: {
field: '='
},
link: linker
};
})
textfield.html - the html template:
<div class="row" ng-form="subForm" ng-class="{'has-success': subForm[field.field_id].$invalid}">
<div class="col-sm-5">{{field.field_title}}:</div>
<div class="col-sm-7">
<input type="text"
placeholder="{{field.field_title}}"
ng-model="field.field_value"
value="{{field.field_value}}"
ng-required="field.field_required"
ng-disabled="field.field_disabled"
class="form-control"
id = "{{field.field_id}}"
name = "{{field.field_id}}" >
<div ng-show="subForm[field.field_id].$touched && subForm[field.field_id].$error && subForm[field.field_id].$invalid">Field '{{field.field_title}}'
<span ng-show="subForm[field.field_id].$error.required"> is required.</span>
</div>
</div>
</div>
Thank you.
http://plnkr.co/edit/YC9p0UluhHyEgAjA4D8R?p=preview
Basically instead of adding the loaded template into the element then compiling it in place I just compile the string then insert the compiled element directly
element.append($compile(data)(scope));
Seems you can still see a delay but this might be the async loading of the template causing that, would need to debug in the network panel and do some profiling or logging to see exactly what's going on.
Edit
Made a fork of the plnkr to show one with the template inlined so there's no delay fetching it with $http http://plnkr.co/edit/Tnc3VOeI8cELDJDHYPTO?p=preview instead just grabbing it synchronously from the template cache and using ng-template in a script block to have it loaded in advance.