I have a MEAN js 3.2 application which I need to deploy along with JAX RS.
I have index.server.view.html, layout.server.view.html files in /app/views directory.
I'm not able to understand which will be my index.html file?
Can someone tell me what changes I need to make? Do I just paste the contents of public folder from MEAN to the webapp of JAX-RS?
All the angular part in MEANJS is in the folder public/.
You only have to create and serve an index.html file.
This file looks like this :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{{title}}</title>
<!-- General META -->
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Semantic META -->
<meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}">
<!-- Facebook META -->
<meta property="fb:app_id" content="{{facebookAppId}}">
<meta property="og:site_name" content="{{title}}">
<meta property="og:title" content="{{title}}">
<meta property="og:description" content="{{description}}">
<meta property="og:url" content="{{url}}">
<meta property="og:image" content="/img/brand/logo.png">
<meta property="og:type" content="website">
<!-- Twitter META -->
<meta name="twitter:title" content="{{title}}">
<meta name="twitter:description" content="{{description}}">
<meta name="twitter:url" content="{{url}}">
<meta name="twitter:image" content="/img/brand/logo.png">
<!-- Fav Icon -->
<link href="/modules/core/img/brand/favicon.ico" rel="shortcut icon" type="image/x-icon">
<!--Application CSS Files-->
<!-- HTML5 Shim -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="ng-cloak">
<header data-ng-include="'/modules/core/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-inverse"></header>
<section class="content">
<section class="container">
<section data-ui-view></section>
</section>
</section>
<!--Embedding The User Object-->
<script type="text/javascript">
var user = {{ user | json | safe }};
</script>
<!--Application JavaScript Files-->
<!--[if lt IE 9]>
<section class="browsehappy jumbotron hide">
<h1>Hello there!</h1>
<p>You are using an old browser which we unfortunately do not support.</p>
<p>Please click here to update your browser before using the website.</p>
<p>Yes, upgrade my browser!</p>
</section>
<![endif]-->
</body>
</html>
Your real problem is that MEANJS handle all dependency with nodejs, and you have to handle this too with JAX-RS or with webpack etc ... as you prefer.
PS : don't forget to replace {{value}} by what you need ;)
Related
[link for the css]:https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css
[link for javascript code file]:https://github.com/mdn/learningarea/blob/master/html/introduction-to-html/the-html-head/script.js
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Meta examples</title>
<meta name="author" content="Chris Mills">
<meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
<meta property="og:title" content="Metadata; The HTML <head>, on MDN">
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Meta examples</h1>
<p>Japanese example: ご飯が熱い。</p>
<script src="script.js"></script>
</body>
</html>
When I was trying to run the above HTML code, the output just shows this
Meta examples
japanese example:???
I was trying to learn to become a front-end developer, so I just started with HTML where I got struck in this. Please anyone help me with this.
The above HTML document does not consider the CSS and Javasricpt file even though it is presented in the same directory. I also tried it with different browsers.
Please provide correct path in the src attribute of your link tag and it should work.
Check:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Meta examples</title>
<meta name="author" content="Chris Mills">
<meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
<meta property="og:title" content="Metadata; The HTML <head>, on MDN">
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">
</head>
<body>
<h1>Meta examples</h1>
<p>Japanese example: ご飯が熱い。</p>
<script src="https://github.com/mdn/learningarea/blob/master/html/introduction-to-html/the-html-head/script.js"></script>
</body>
</html>
I am new to React.js.
Can someone please tell me why this is not working for me?
I created a basic html5 boilerplate and saved it as index.html. But when I open w/ browser, it says - Uncaught SyntaxError: Unexpected token <
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>TITLE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
<script>
const Button = function () {
return (
<button>Go</button>
);
};
React.render((<Button/>), document.getElementById('example'));
</script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<div id="example"></div>
</body>
</html>
Getting back to your question, the problem that you are facing is that you are using wrong syntax, you are using JSX and in order to be able to actually use that you need babel to parse it.
To parse your code in the browser using Babel. Here its your code fixed with babel (also available on CodePen)
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>TITLE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://unpkg.com/#babel/standalone/babel.js"></script>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script type="text/babel">
const Button = function () {
return (
<button>Go</button>
);
};
ReactDOM.render((<Button />), document.getElementById('example'));
</script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id="example"></div>
</body>
</html>
What I would recommend you to check the React Hello World Docs. It is a nice introduction to reactjs. The tutorial will give you plenty of information how to get started.
I'm trying to scrape a website using node.js and the request module. So far, I've been able to connect to the target site and generate the page's HTML using a query string from the site, but I am now realizing that the site renders the data using a script on their site.
Here is the HTML that I'm getting back.
C:\Users\ZHarriott>node test
error: null
statusCode: 200
body: <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="canonical" href="https://bethesda.net">
<title>Bethesda.net</title>
<meta name="description" content="The official site for Bethesda, publisher of Fallout, DOOM, Dishonored, Skyrim, Wolfenstein, The Elder Scrolls, more. Your source for news, features & community.">
<meta name="keywords" content="Fallout,Fallout 4,Fallout 3,Fallout New Vegas,DOOM,Dishonored,Dishonored 2,The Elder Scrolls,The Elder Scrolls Online,The Elder Scrolls Online Tamriel Unlimited,Wolfenstein,Wolfenstein The Old Blood,Wolfenstein The New Order,The Evil Within,The Elder Scrolls V Skyrim,Skyrim,Rage,Brink,Wet,The Elder Scrolls IV Oblivion,Oblivion,Bethesda Game Studios,ZeniMax Online Studios,id Software,Arkane Studios,MachineGames,Machine Games,Tango Gameworks,Bethesda Softworks,Todd Howard">
<meta name="author" content="">
<meta property="og:site_name" content="Bethesda.net">
<meta property="twitter:site" content="#bethesda">
<meta property="twitter:title" content="Bethesda.net">
<link href="https://bethesda.net" hreflang="x-default" rel="alternate">
<link href="https://bethesda.net/en/dashboard" hreflang="en" rel="alternate">
<link href="https://bethesda.net/de/dashboard" hreflang="de" rel="alternate">
<link href="https://bethesda.net/es/dashboard" hreflang="es" rel="alternate">
<link href="https://bethesda.net/fr/dashboard" hreflang="fr" rel="alternate">
<link href="https://bethesda.net/it/dashboard" hreflang="it" rel="alternate">
<link href="https://bethesda.net/pl/dashboard" hreflang="pl" rel="alternate">
<meta name="referrer" content="origin">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="/main.css">
<script src="https://cdn02.bethesda.net/contentful#3.8.1/browser-dist/contentful.min.js"></script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade"><h3>You are using an <strong>outdated</strong> browser.</h3></p>
<p class="browserupgrade">Many things may be non-functional if you continue, please upgrade your browser to improve your experience.</p>
<![endif]-->
<noscript>
<p class="browserupgrade">Please enable javascript to use this site.</p>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=nojs.html">
</noscript>
<app></app>
<section id="_bnContent"></section>
<globalfooter></globalfooter>
<script>
// Please do not use www
if (window.location.hostname === 'www.bethesda.net') {
window.location.replace('https://bethesda.net/' + window.location.hash)
}
try {
// This ensures the user is using javascript, this is required for bethesda.net
document.getElementsByTagName('html')[0].classList.remove('no-js')
} catch (e) {
console.log(e)
}
</script>
<script src="/sites/main.js"></script>
</body>
</html>
C:\Users\ZHarriott>
It looks like because I'm not actually using a web browser that the site is having trouble knowing how to handle this request. Any thoughts on this?
I'm using angular and angular-route. The index.html looks like this:
<!DOCTYPE html>
<html lang="en" ng-app="Showcase">
<head>
<meta charset="UTF-8">
<title>UCSD Showcase</title>
<base href="/showcase/">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="routes.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="js/initGlobalHelpers.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="#########################################">
<meta name="keywords" content="###############################################">
<meta property="og:url" content="#">
<meta property="og:site_name" content="CSES OSS">
<meta property="og:image" content="############################################################################################">
<meta property="og:description" content="#">
<meta property="og:type" content="website">
<meta name="twitter:site_name" content="CSS OSS">
<meta name="twitter:site" content="################">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="#">
<meta name="twitter:image" content="#">
<meta name="image" content="#">
<link rel="stylesheet" media="all" href="./styles/style.css">
</head>
<body>
<ng-view></ng-view>
</body>
</html>
And then for my home page when I'm using
<h1>This is the home page</h1>
<script src="home.html"></script>
I get the a warning
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. jquery.min.js:4
and an error
SyntaxError: Unexpected token < angular.js:13550
However when I replace that script that by the content of the script which basically ends up looking like:
<h1>This is the home page</h1>
<script>
console.log('Hi!');
</script>
Then it works.
Why is this happening and how can I fix it?
Use ngInclude instead of html script tag
<div ng-include="'home.html'"></div>
See ngInclude docs here
I've been searching in google how to include any html file inside my <head> in another html page, but all I got was with PHP and I don't want to use PHP, I'd like to use HTML and the last case a JavaScript code.
My page.html:
<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" xmlns="http://www.w3.org/1999/xhtml" > <!--<![endif]-->
<head>
</head>
</html>
My header.html:
<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"> <!--<![endif]-->
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<title>Lucas - Web Developer</title>
<meta name="description" content="" />
<meta name="author" content="" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Roboto+Slab:300,400" rel="stylesheet" type="text/css" />
<!-- JS
================================================== -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.11889.js" type="text/javascript"></script>
<![endif]-->
<!-- HTML5 Shiv events (end)-->
<script src="js/mgmenu_plugins.js"></script>
<script src="js/mgmenu.min.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</html>
The question is: how do I include header.html inside the <head> of page.html? I've tried the ui:include/ui:insert but didn't work well (maybe it's me that is using wrong)
Thank you! :)