I am implementing ag-Grid with angular2 in visual studio2015
and I want to implement the example from https://github.com/helix46/ag-grid-angular2-beta-ts
import {Component} from 'angular2/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';
#Component({
selector: 'agGrid',
templateUrl: "/partial/agGrid",
directives: [AgGridNg2]
})
export class agGridComponent {
constructor() {
console.log("agGrid Component Start");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
<environment names="Development">
<!-- Css -->
<link rel="stylesheet" asp-href-include="~/css/*.css">
<!-- Js -->
<script src="~/js/jquery.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/system.js"></script>
<script src="~/js/rx.js"></script>
<script src="~/js/typescript.js"></script>
<script src="~/js/angular2/angular2.dev.js"></script>
<script src="~/js/angular2/angular2-polyfills.js"></script>
<script src="~/js/angular2/http.dev.js"></script>
<script src="~/js/angular2/router.dev.js"></script>
<!--ag-grid-->
<script src="node_modules/ag-grid/dist/ag-grid.js"></script>
</environment>
<environment names="Production">
<!-- Css -->
<link rel="stylesheet" asp-href-include="~/css/*.min.css" asp-append-version="true">
<!-- Js -->
<script src="~/js/jquery.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/system.min.js"></script>
<script src="~/js/rx.min.js"></script>
<script src="~/js/typescript.min.js"></script>
<script src="~/js/angular2/angular2.dev.min.js"></script>
<script src="~/js/angular2/angular2-polyfills.min.js"></script>
<script src="~/js/angular2/http.dev.min.js"></script>
<script src="~/js/angular2/router.dev.min.js"></script>
<!--ag-grid-->
<script src="~/js/ag-grid.js"></script>
</environment>
<!-- Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'ag-grid-ng2': {
defaultExtension: "js"
},
'ag-grid': {
defaultExtension: "js"
},
'ag-grid-enterprise': {
defaultExtension: "js"
}
},
map: {
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
'ag-grid-enterprise': 'node_modules/ag-grid-enterprise',
'ag-grid': 'node_modules/ag-grid'
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<base href="/" />
<body>
<div>
#RenderBody()
</div>
</body>
</html>
but unable to load Failed to load resource: the server responded with a status of 404 (Not Found) ag-grid-ng2/main.js
which is inside node_module and I am giving the correct path, but it is still showing, unable to load resource. Here is a snap of the error.
ag-grid error message
Please help me to resolve this.
Thanking you
You are missing:
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
i.e.
var map = {
'ag-grid': 'node_modules/ag-grid',
'ag-grid-ng2': 'node_modules/ag-grid-ng2',
};
Related
i have a simple Vuejs projet that only have an index.html file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
</div>
<script src="https://unpkg.com/vue#next"></script>
<script src="app.js"></script>
</body>
</html>
and app.js File
const HelloVueApp = {
data() {
return {
message: 'Hello VueXYZ!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
The problem is that i dont have any IntelliSense for the code in
<script src="https://unpkg.com/vue#next"></script>
when i hover the mouse over a method of the Vue Object it only show (ANY)
I am trying to get a code editor that shows the result on clicking a button. I've adapted How to output result of codemirror in iframe? but I am having issues with the closing tags on the example code not being styled.
See screenshot and code below.
I would be very appreciative if someone can take a look and point me in the right direction (I am not very good with JS).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/theme/neo.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/fold/indent-fold.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/edit/matchbrackets.min.js"></script>
<style>
body {
background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
</head>
<body>
<div id="codeeditor"></div>
<iframe>Example</iframe>
<button>RUN</button>
<script>
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "<html>\n<body class=\"fdf\">\n<h1>Hello world</h1>\n<button type=\"button\" disabled>Click Me!</button>\n</body>\n</html>",
theme: "neo",
lineNumbers: true,
matchBrackets: true
});
$("button").click(function(){
$("iframe").contents().find("body").html(editor.getValue());
})
</script>
</body>
</html>
I fixed it. It wasn't configured correctly. Also putting the code in a separate html file and importing it helps with all the formatting.
You need the following file (plus any theme css file):
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/xml/xml.min.js"></script>
Here is the new script config:
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "{{ range $matches }}{{ .Content }}{{ end }}",
theme: "neo",
mode: "htmlmixed",
htmlMode: true,
lineNumbers: true,
matchBrackets: true,
smartIndent: true,
});
You Can Try that Code:-
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="CloseTag()">Close Tag</button>
<script>
function CloseTag() {
myCodeMirror.execCommand("closeTag");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
});
</script>
</body>
</html>
I have been using the chalkboard plugin for a reveal presentation. As it is written on the github page (https://github.com/rajgoel/reveal.js-plugins/tree/master/chalkboard), I saved the drawings in a json file by pressing d (as far as I can tell, the data was correctly stored in the json file) and then I added the line src: "prova/cb.json", to the initialization for chalkboard and loaded the presentation with ?print-pdf.
However, when I open the presentation, there is no trace of the drawings that should be loaded.
This is the html of a minimal (non) working example...
Does anyone know what's going on?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Prova</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/night.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section >
<h4>Prova</h4>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/chalkboard/plugin.js"></script>
<script>
Reveal.initialize({
hash: true,
controls: false,
transition: 'convex',
math: {
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS-MML_HTMLorMML'
},
chalkboard: {
src: "prova/cb.json",
toggleChalkboardButton: { left: "80px" },
toggleNotesButton: { left: "130px" },
},
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealMath, RevealChalkboard ],
});
</script>
</body>
</html>
I'm building a chrome devtools extension with TypeScript + React
My Steps
loaded unpacked dist on chrome://extensions
open a new tab with devtools page(and the window alerts "this is content script")
clicked my extension panel
the error appears on chrome://extensions
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
Context
devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/#a6b12dfad6663f13a7e16e9a42a6a4975374096b/&can_dock=true&dockSide=undocked
Stack Trace
index.html:0 (anonymous function)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>React App</title>
<link href="/static/css/sidebar.2001c5a3.chunk.css" rel="stylesheet">
<link href="/static/css/devtools.2001c5a3.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static/js/runtime-index.d09d0bdd.js"></script>
<script src="/static/js/index.chunk.js"></script>
<script src="/static/js/runtime-sidebar.7a085c24.js"></script>
<script src="/static/js/0.chunk.js"></script>
<script src="/static/js/sidebar.chunk.js"></script>
<script src="/static/js/runtime-devtools.f0ac3d91.js"></script>
<script src="/static/js/devtools.chunk.js"></script>
<script src="/static/js/runtime-background.c42f91dc.js"></script>
<script src="/static/js/background.chunk.js"></script>
<script src="/static/js/runtime-contentScript.7cf7a071.js"></script>
<script src="/static/js/contentScript.chunk.js"></script>
</body>
</html>
But if I click the "inspect views background page` manually before step 2, everything works well.
I think the background should start up automatically in production. Did I miss something?
index.tsx
chrome.devtools.panels.create("Garbanzo",
"favicon.ico",
"devtools.html",
function (panel) {
// code invoked on panel creation
let backgroundPageConnection: chrome.runtime.Port
panel.onShown.addListener(function (window) {
// when the user switches to the panel, check for an elements tab
// selection
backgroundPageConnection = chrome.runtime.connect({
name: "devtools-page"
});
});
panel.onHidden.addListener(function () {
backgroundPageConnection.disconnect()
});
}
);
contentScript.chunk.js
alert("this is content script")
background.chunk.js
chrome.runtime.onConnect.addListener((port) => {
alert("OK");
})
manifest.json
{
...
"devtools_page": "index.html",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"static/js/content_script.js"
]
}
],
"background": {
"scripts": [
"static/js/background.js"
],
"persistent": true
},
"permissions": [
"storage",
"declarativeContent",
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
...
}
My app has two kinds of templates. The first is used in "logged out" pages and the second one is used in "logged in" pages.
Below is the index.html which is used with all "logged out" template pages:
<!DOCTYPE html>
<html ng-app="appLoggedOut">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/loggedout/app.js"></script>
<script src="js/loggedout/controllers.js"></script>
<script src="js/loggedout/routes.js"></script>
<script src="js/loggedout/services.js"></script>
<script src="js/loggedout/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<div>
<div class="spacer" style="width: 300px; height: 15px;"></div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for Logged out pages
</div>
</body>
</html>
I need to set all my "logged in" pages to show a header and a different footer. So, it is like I have another index.html, used just for "logged in" pages.
Below is the what I want to use to all my "logged in" pages:
<!DOCTYPE html>
<html ng-app="appLoggedIn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services 4 Uber</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet" >
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/loggedin/app.js"></script>
<script src="js/loggedin/controllers.js"></script>
<script src="js/loggedin/routes.js"></script>
<script src="js/loggedin/services.js"></script>
<script src="js/loggedin/directives.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body ng-controller="homeCtrl">
<div class="bar bar-header bar-light">
Header used only in logged in pages
</div>
<div>
<ion-nav-view></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
Footer for logged in pages
</div>
</body>
</html>
How can I define my routes, to jump from my login page (using "logged out" template) to a logged page (using "logged in" template) ?
I want to change all the page and not just load a view inside the tag "".
Thanks.
i am only discuss about the How to navigate from one template to another.
ionic that used angularjs or javaScript. is follow the simple call by state or url etc
for example Each controller have routing and there HTML page
angular.module('starter.storeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('storeDetails', {
url: '/user/:store',
abstract:true,
templateUrl: 'templates/store_detail.html',
controller: 'StoreDetailsCtrl'
})
})
.controller('StoreDetailsCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
$scope.goToNextPage=function(){
$state.go('home'); //here navigate from one template to another
}
}])
And another page
angular.module('starter.homeDetailsController', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract:true,
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
})
.controller('HomeCtrl', ['$scope', '$ionicLoading', '$timeout', function($scope, $ionicLoading, $timeout) {
console.log('Welcome');
}])
above example show two controller StoreDetailsCtrl and HomeCtrl and i go from StoreDetailsCtrl to HomeCtrl in home page. this is navigate by javascript but there are many ways to navigate page.
in HTML side by href=#/url and also used ui-sref="stateName" in ionic for navigate page.