Few days ago, I visited a site, and for no reason I tried to view its source code. And surprisingly, it doesn't contain regular HTML tags such as h1, h2, p, etc.
it only contains code like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
if (window.PerformanceObserver) {
var observer = new PerformanceObserver(function(list) {
const entries = list.getEntries();
for (var i=0; i<entries.length; i++) {
var entry = entries[i];
// `name` will be either 'first-paint' or 'first-contentful-paint'.
var metricName = entry.name;
var time = Math.round(entry.startTime + entry.duration);
ga('send', {
hitType: 'timing',
timingCategory: 'Performance Metrics',
timingVar: metricName,
timingValue: time,
});
}
});
observer.observe({entryTypes: ['paint']});
}
</script>
<!-- Open search -->
<link type="application/opensearchdescription+xml" rel="search"
href="./assets/opensearch-id.xml"/>
<script>dataLayer = [];</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WJZQSJF');</script>
<!-- End Google Tag Manager -->
<link href="***/assets/bundle.f4eb17af99f6bcda6c58794466a0abd3.css" rel="stylesheet"></head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJZQSJF"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="main"></div>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
</script>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
<!-- Criteo One Tag Code -->
<script type="text/javascript" src="//*******" async="true"></script>
<script>window.criteo_q = window.criteo_q || [];</script>
<!-- End Criteo Code -->
<script>!function(e){function c(a){if(b[a])return b[a].exports;var d=b[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var a=window.webpackJsonp;window.webpackJsonp=function(b,f,n){for(var r,t,o,i=0,u=[];i<b.length;i++)t=b[i],d[t]&&u.push(d[t][0]),d[t]=0;for(r in f)Object.prototype.hasOwnProperty.call(f,r)&&(e[r]=f[r]);for(a&&a(b,f,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=c(c.s=n[i]);return o};var b={},d={74:0};c.e=function(e){function a(){r.onerror=r.onload=null,clearTimeout(t);var c=d[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}var b=d[e];if(0===b)return new Promise(function(e){e()});if(b)return b[2];var f=new Promise(function(c,a){b=d[e]=[c,a]});b[2]=f;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+""+({61:"vendor",62:"bundle",63:"icons",64:"short_url"}[e]||e)+".bundle."+{0:"c38a1529c3b99c325cbb",1:"36418a346d47b7489609",2:"ef74eff3789cd571abc8",3:"40b845bf76f300f55de4",4:"8a6a439aa451d3d927b0",5:"72986b428e8cbd866607",6:"c6c9571f8e2fe5d212bb",7:"aae34ad175b103ef7e4e",8:"242c59a9d553de716c60",9:"ef6bbc1570fb8834ab36",10:"4bbc0a828f9c224773d1",11:"ddb3f50d8864e9408fc1",12:"6c1497f53303248323d7",13:"afeda231b24bbc8194de",14:"a87b72a437d706639baf",15:"09604bb7d99977b19574",16:"2a88b519fe8a5231bed8",17:"8752912c6b561ea445e5",18:"1bc4d82776cf99767789",19:"a2333c0fb5928e5c8294",20:"5b3a12ea7ea8144d0b40",21:"84073184bb3f2047b2a7",22:"20b45cf24e9ba43bfeb9",23:"cd0ea9678da108d1f4ce",24:"cd3c35192890404fa9f8",25:"5eb5420abef187dc2df6",26:"18f747b4b8c098ff19f7",27:"669314a53c5cfe3c73d6",28:"ebcb097c69b716623654",29:"ac9eccdcdb242cc2aef8",30:"5e109d633d36dcbba47f",31:"5a7027b9dfa01f78bf70",32:"61e7dceb5b3a30078d83",33:"4fee29baa1d2816fdae7",34:"cc8761150451212c4a22",35:"b17ad377b0cb1ef37461",36:"66899702ab02bf7a6339",37:"bf88a5c916c22b7dd322",38:"0f8294f2a9a2e2e1ffeb",39:"dc558711f648a8ae4fc6",40:"aa5362b270c5e5c12cb8",41:"53574e3109dc0721b45b",42:"e7d39f00425207d8b5b0",43:"b1cdc408800853db7b1a",44:"90e7fdfc599c75ed6c00",45:"33db36c7330b10227972",46:"830b163b775b656e3a92",47:"03bfb3bbdd79ee0e0442",48:"e0548b8051ef72fb0e4f",49:"a14357c795d7bc1913cd",50:"ed0bec3efe20b2dc2da1",51:"76f7f508111c9d32ea1e",52:"ce6f96656a3b08a5f978",53:"dbce6a5f7c10fc5bda8b",54:"00e18ead99250bf63f01",55:"04d3bb1b65d42a9fdaf4",56:"1a12a992adc0cc13f856",57:"5fe4d3c577315f8f99a2",58:"bcd10412dcbab2259da4",59:"c8db0c00ea4034701abc",60:"d33e9ca4f6d41e01d92c",61:"8ee65c855117c2ea0d78",62:"7d31cc04d88c6681ce75",63:"d2dcedabc8faa5a71473",64:"e66827895350ae2fac63",65:"230b7a8a1670edc8e52c",66:"33b35d4cbdffc7271758",67:"6a55b5d11720b6d975ad",68:"7d28f6e0272beec18917",69:"91c610b55fa27ae0d91c",70:"4c240b9a04ec67a27235",71:"54531e628f75037462bd",72:"f6a6e9ff0ab728eabca1",73:"3d7f47216be8efeca29b"}[e]+".js";var t=setTimeout(a,12e4);return r.onerror=r.onload=a,n.appendChild(r),f},c.m=e,c.c=b,c.d=function(e,a,b){c.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:b})},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="https://cdngarenanow-a.akamaihd.net/shopee/shopee-pcmall-live-id/assets/",c.oe=function(e){throw e}}([]);
</script>
<script type="text/javascript" src="https://***/vendor.8ee65c855117c2ea0d78.js"></script><script type="text/javascript" src="https://***/assets/icons.d2dcedabc8faa5a71473.js"></script><script type="text/javascript" src="https://***/assets/bundle.7d31cc04d88c6681ce75.js"></script><script type="text/javascript" src="https://***/assets/short_url.e66827895350ae2fac63.js"></script></body>
</html>
what programming language / technique is this? it shows all the content on my browser, but the html tags remains invisible. any idea what it is?
That's some straight up Javascript you're seeing there, and the code running will be generating all the necessary tags client side (hence why viewing the source doesn't show them).
Try right-clicking on an element and using "Inspect". That should open the browser's dev tools and show the HTML code the Javascript is generating.
I used a Loopback/Polymer starter kit I found as a starting base for an application, but it does not seem to work on browsers other than Chrome (i.e. Firefox/IE/Safari). The demo for the starter kit code works in other browsers, so I know it must be possible, but I am having trouble converting my code into the structure that works. I am wondering if anyone would have any insight as to why it does not work with the structure I have in place from my index.html. It doesn't read my <application-polymer> element or native HTML elements (if I add them in) on the other browsers.
I have the webcomponents.js file imported in, and my elements are all inside client/element directory and linked to client/elements/elements.html. It works perfectly in Chrome, but no other browser. Please help!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Application">
<title>Site</title>
<link rel="shortcut icon" sizes="32x32" href="/images/site-thumbnail.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#fff">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"</script>
<!-- endbuild -->
<!-- build:js scripts/bundle.js -->
<script src="scripts/bundle.js"></script>
<!-- endbuild -->
<!-- Because this project uses vulcanize this should be your only html import
in this file. All other imports should go in elements.html -->
<link rel="import" href="elements/elements.html">
<!-- <link rel="import" href="elements/application-polymer.html"> -->
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
<style>
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eee;
}
</style>
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<!-- <h1>HELLO</h1> -->
<application-polymer></application-polymer>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
The link to the full starterkit that this application is based off of is here:
https://github.com/klarkc/polymer-loopback-starter-kit
The index.html structure is different (trying to import custom web components from elements/elements.html instead of creating them all inside the index.html which is unrealistic for a sophisticated app), which is why I am having issues.
I'm not sure what you have there, but it doesn't appear to be the latest starter kit, which I believe now follows the PRPL pattern and loads the stuff much later in the startup cycle.
If you look at it, it tries to dynamically decide to load the web components polyfill dependant whether the browser supports web components or not.
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js');
});
}
</script>
I suspect you are not correctly initializing the polyfills for non chrome browsers
I recommend actually using the polymer-cli from creating a framework as described here
https://www.polymer-project.org/1.0/toolbox/
var myApp = angular.module('myApp',['ui.router'])
myApp.config(function($stateProvider, $urlRouterProvider){
// $urlRouterProvider.otherwise('/home');
$stateprovider
//Home states and nested views
.state('home',{
url: '/home',
templateUrl: 'index.html'
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Modern Business - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="myApp">
<div ng-include='"templates/header.html"'></div>
<div ui-view></div>
<div ng-include='"templates/footer.html"'></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<!-- Do not edit these files! In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
</body>
</html>
Here is my HTML and app.js I am working with UIRouter. I am getting an error of injector module, but unable to figure it out. I am new to AngularJS, so please help me out. And yes, my ng-include too is not working. No results are displayed when I run my index.html file.
There is a working plunker
The casing is essential. It is $stateProvider not $stateprovider. This must be the state def:
var myApp = angular.module('myApp', ['ui.router'])
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
//$stateprovider
$stateProvider
//Home states and nested views
.state('home', {
url: '/home',
//templateUrl: 'index.html'
template: "<h1>hello from home</h1>",
})
});
Check it here
NOTE: when you develop... do NOT use min versions. Only full can give you nice and easy to understand exceptions...
$stateprovider should be $stateProvider
So I have this json file I need to process:
http://pastebin.com/6aYkTjsw
I'm trying to make 1 single select dropdown menu for each entry in links array for each version. So basically 2 entries should be added to the select dropdown menu for each version (one for windows and one for linux).
However, i'm failing as its making a select element for each version. I can't add another ng-repeat within the select statement so I am a bit confused on how I can accomplish this. I've tinkered around with ng-options and other things but couldn't manage to get it to work.
Here is the current implementation:
http://plnkr.co/edit/TenmOPpXef85KAowXbTx?p=preview
Code:
index.html
<!-- Algorithmic Trading © -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Algorithmic Trading - Revitpo Inc</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="appDownload">
<div ng-controller="VersionController">
<!-- Drop Down Menu -->
<div ng-repeat="x in deployments">
<select>
<option ng-repeat="y in x.links" value="{{y.link}}">{{x.short_descr}} ({{y.os}})</option>
</select>
</div>
</div>
<tt>Copyright © 2015. Revitpo Inc. All Rights Reserved.</tt>
</body>
</html>
app.js
var app = angular.module("appDownload", []);
app.controller("VersionController", function($scope, $http) {
$http.get('http://algorithmictrading.azurewebsites.net/json/versions.json').
success(function(data, status, headers, config) {
$scope.deployments = data;
});
});
I solved my issue. (Actually icebox from freenode irc in #angularjs solved it for me).
This is what I ended up using:
index.html
<!-- Algorithmic Trading © -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Algorithmic Trading - Revitpo Inc</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="appDownload">
<div ng-controller="VersionController">
<!-- Drop Down Menu -->
<select>
<option ng-repeat="deployment in deployments" value="{{deployment.link}}">{{deployment.short_descr}} ({{deployment.os}})</option>
</select>
</div>
<tt>Copyright © 2015. Revitpo Inc. All Rights Reserved.</tt>
</body>
</html>
app.js
var app = angular.module("appDownload", []);
app.controller("VersionController", function($scope, $http) {
$scope.deployments = [];
//Retrieve all build versions
$http.get('json/versions.json').
success(function(data, status, headers, config) {
//Push required fields onto array
data.forEach(function(item1) {
item1.links.forEach(function(item2) {
$scope.deployments.push({
short_descr: item1.short_descr,
link: item2.link,
os: item2.os
});
});
})
});
});