<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.25"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.39/system.js"></script>
<script src="https://npmcdn.com/typescript@2.0.3/lib/typescript.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
Loading...
</my-app>
</body>
</html>
/* Styles go here */
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
(function(global) {
var ngVer = '@latest'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src', // 'dist',
'rxjs': 'https://npmcdn.com/rxjs',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/testing',
'@angular/upgrade',
'@angular/forms',
'@angular/router',
];
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
/*packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});*/
// ng2-ckeditor
map['ng2-ckeditor'] = 'https://npmcdn.com/ng2-ckeditor@latest';
packages['ng2-ckeditor'] = { main: 'lib/ng2-ckeditor.js', defaultExtension: 'js' };
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
//main entry point
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {FormsModule} from '@angular/forms';
import {App} from './app';
import {CKEditorModule} from 'ng2-ckeditor';
/**
* App main module
*/
@NgModule({
imports: [
BrowserModule,
FormsModule,
CKEditorModule
],
declarations: [
App,
],
bootstrap: [App]
})
export class AppModule { }
/**
* Angular 2 bootstrap
*/
platformBrowserDynamic().bootstrapModule(AppModule);
//our root app component
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ckeditor [(ngModel)]="content" debounce="500">
<p>Hello <strong>world</strong></p>
</ckeditor>
<div [innerHTML]="content"></div>
`,
})
export class App {
constructor() {
this.content = '<p>Hello <strong>World !</strong></p>'
}
}