I want map to my module with help of Knockoutjs and requrejs.
Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script data-main="js/index2" src="js/libs/require/require.js"></script>
</head>
<body>
<div id="review"></div>
</body>
</html>
index2.js (my main js)
requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': 'knockout/knockout-3.3.0',
'jquery': 'jquery/jquery-2.1.3.min',
'jqueryui-amd': 'jquery/jqueryui-amd-1.11.4.min',
'signals': 'js-signals/signals.min',
'crossroads': 'crossroads/crossroads.min'
},
shim: {
'jquery': {
exports: ['jQuery', '$']
},
'crossroads': {
deps: ['signals'],
exports: 'crossroads'
}
},
});
require([
'test'
'knockout',
'jquery'
],
function (test, oj, ko, $)
$(document).ready(function () {
ko.applyBindings(test,
document.getElementById('review'));
}
);
);
test.js (Module)
alert("Test done!!!");
Related
Hi i Have a problem with MathJax library. I want to display the mathjax formula on the screen, but when I use window.MathJax I get the error that it is undefined. Here is how I installed the MathJax in my html file:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<link rel="icon" href="/icons/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/icons/favicon.ico" type="image/x-icon">
<!-- inject:css -->
<!-- endinject -->
<script type="text/x-mathjax-config">
MathJax = {
options: {
renderActions: {
addMenu: []
}
},
};
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<script async type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-svg.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<div id="application-content">
</div>
</body>
<!-- inject:js -->
<!-- endinject -->
<script type="application/javascript">
EMBED.default.init();
</script>
</html>
And here is the component where I use the library:
import React, { Component } from 'react';
export default class MathBlock extends Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
render() {
const text = this.props.block.getText();
const latexRegex = /\${2}(.*?)\${2}/;
const hasLatex = latexRegex.test(this.props.block.getText());
return (
<div>
<div
dangerouslySetInnerHTML={{
__html: hasLatex
? window.MathJax.tex2svg(text.replaceAll('$', '')).innerHTML
: window.MathJax.mathml2svg(text).innerHTML,
}}
/>
</div>
);
}
}
MathBlock.propTypes = {
block: React.PropTypes.object.isRequired,
};
Does anyone know what is the problem here?
Because the script tag that loads MathJax has the async attribute, it may not be loaded when your EMBED.default.init(); command likely will run before MathJax is loaded, and so before window.MathJax has been defined.
You could either remove the async attribute (which will mean your page will have to wait for MathJax to load and compile before the rest of the page is processed, slowing down your initial view of the page), or you could put the EMBED.default.init(); in MathJax's startup ready() function so that it is not performed until MathJax is loaded.
You are loading MathJax version 3, but your current configuration seems to be a mix of v2 and v3 configurations, and it is currently being ignored entirely by MathJax.
You could use
<script>
MathJax = {
options: {
renderActions: {
addMenu: []
}
},
tex: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
},
startup: {
ready() {
MathJax.startup.defaultReady();
EMBED.default.init();
}
}
};
</script>
(a correct v3 configuration) in place of your current configuration script, and see if that avoids the problem.
I am writing because i have an issue using vue.js,
this is my index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<h1> Prova VUE </h1>
<div id="app">
<p> Login:</p>
<button v-on : click="getInfo">OK</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
cordocs: [],
docenti: [],
link : '/newProvaTweb/hello-servlet'
},
methods:{
getInfo:function(){
var self = this;
$.get(this.link,{
action: "initialization"
}, function (data) {
self.cordocs = data[0];
});
}
}
});
</script>
I have included the script but, working with intellij doesn't recognize the vue component like this,
and it doesn't work. Someone know how to solve this problem?
I want to scrape a HTML page in my nodejs application and form a list of head tags. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="script.src"></script>
</head>
<body>
...
</body>
</html>
Desired Output:
['<meta charset="UTF-8">','<meta name="viewport" content="width=device-width, initial-scale=1.0">','<title>Document</title>', ...etc]
But I am a little stuck as the meta tags do not "close" so it needs more than simple regex and split. I wanted to use DOMParser but I am in the node environment. I tried to the xmldom npm package but it just returned a list of new line characters (\r\n).
One option is to use Cheerio to parse the HTML and extract the information you need from each element:
const cheerio = require('cheerio');
const htmlStr = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="script.src"></script>
</head>
<body>
...
</body>
</html>`;
const $ = cheerio.load(htmlStr);
const headTags = [];
$('head > *').each((_, elm) => {
headTags.push({ name: elm.name, attribs: elm.attribs, text: $(elm).text() });
});
console.log(headTags);
Output:
[ { name: 'meta', attribs: { charset: 'UTF-8' }, text: '' },
{ name: 'meta',
attribs:
{ name: 'viewport',
content: 'width=device-width, initial-scale=1.0' },
text: '' },
{ name: 'title', attribs: {}, text: 'Document' },
{ name: 'link',
attribs: { rel: 'stylesheet', href: 'style.css' },
text: '' },
{ name: 'link',
attribs:
{ rel: 'shortcut icon',
href: 'favicon.ico',
type: 'image/x-icon' },
text: '' },
{ name: 'script', attribs: { src: 'script.src' }, text: '' } ]
use request npm to request your page and then after you get response , use cheerio npm to parse and get whatever you want from raw data .
Note : cheerio has syntax like jQuery
var request = require('request');
var cheerio = require('cheerio')
app.get('/scrape',(req,res)=>{
request('---your website url to scrape here ---', function (error, response, body) {
var $ = cheerio.load(body.toString())
let headContents=$('head').children().toString();
console.log('headContents',headContents)
});
});
Hi I am new for AngularJs, I am trying to navigate from one page to another when tapped on button and I followed the below code for my requirement but it's not working.
Html files--->
index.html,main.html,london.html,paries.html,others.html
Js files-->
AngularFile.js,Others.js
I kept button on london.html file.
When I taped on it I wanted to navigate from london.html file to others.html file, but where did I make a mistake?
Can some on help me please?
index.html:-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<head>
<script src="angularFile.js"></script>
<script type="others.js"></script>
</head>
<body ng-app="myApp">
<p>main</p>
City 1
City 2
<p>Click on the links.</p>
<p>Note that each "view" has its own controller which each gives the "msg" variable a value.</p>
<div ng-view></div>
</body>
</html>
london.html:
{{msg}}
<input type="Button" ng-click="changeMe()" value="Go to other"/>
others.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>Wel come to Others page</h1>
</body>
</html>
angularFile.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl : "main.htm",
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
others.js:
app.controller("londonCtrl", function ($scope,$location) {
$scope.msg = "I love London";
$scope.changeMe = function(){
$location.path('/others')
};
})
;
You need to register the view in the $routeProvider setup
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl : "main.htm",
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/others", {
templateUrl : "others.html"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
then go to it $location.path('/others');
Here's a sample plunker
I'm just starting out with Angular and most of programming in general. I'm trying to make a separate view1.html file appear on my index.html page but it won't, so I'm assuming it's a routing problem. I tried pasting the view1.html content in the body of my index.html to test it and it wasn't showing the controller content either. I'm sure they're simple mistakes but I can't find them. view.html is in a separate folder called views. I only have the javascript in the index.html page for convenience.
index.html
<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<body>
<div>
<div ng-view></div>
</div>
<script>
// create module called "demoApp" under the variable name "demoApp"
var demoApp = angular.module('demoApp', []);
// ROUTING
demoApp.config(function ($routeProvider) {
$routeProvider
.when ('/',
{
controller: 'SimpleController',
templateUrl: 'views/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'views/view2.html'
})
.otherwise({ redirectTo: '/' });
});
// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Caleb', city: 'Indianapolis' },
{ name: 'Samantha', city: 'Zionsville' },
{ name: 'Tim', city: 'Palo Alto' }
];
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
}
</script>
</body>
</html>
view1.html
<h2>View 1</h2>
Name:
<input type="text" ng-model="name" />
<ul>
<li ng-repeat="cust in customers"></li>
</ul>
Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br>Customer City:
<input type="text" ng-model="newCustomer.city" />
<br>
<button ng-click="addCustomer()">Add Customer</button>
View 2
</div>
You need to include the script for angular's router.
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>
Also, looks like you're missing a closing </head> tag.
Here's a working version of your HTML file:
<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
</head>
<body>
<div>
<div ng-view></div>
</div>
<script>
// create module called "demoApp" under the variable name "demoApp"
var demoApp = angular.module('demoApp', ['ngRoute']);
// ROUTING
demoApp.config(function ($routeProvider) {
$routeProvider
.when ('/',
{
controller: 'SimpleController',
templateUrl: 'view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'view2.html'
})
.otherwise({ redirectTo: '/' });
});
// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Caleb', city: 'Indianapolis' },
{ name: 'Samantha', city: 'Zionsville' },
{ name: 'Tim', city: 'Palo Alto' }
];
$scope.newCustomer = { name: "", city: ""};
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
</html>