import - example - pagination angular 4
Cómo usar Angular2 y Typescript en Jsfiddle (3)
Pregunta falsa ...
Intento codificar una aplicación angular2 (2.0.0-beta.6) en Typescript en jsfiddle.
Sé que hay otra solución en línea pero ...
De hecho, mi ejemplo es muy pequeño y el problema está en el módulo de importación:
import {bootstrap} from ''angular2/platform/browser''
import {Component} from ''angular2/core'';
Tuve el siguiente error :
Uncaught ReferenceError: System is not defined
Uncaught ReferenceError: require is not defined
Intento agregar algunas dependencias (requiere, sistema ...) pero no funciona.
Y ya no hay más paquetes de ejecución automática para la versión reciente (beta-6) de Angular2 (angular2.sfx.dev.js).
Algunas pruebas:
https://jsfiddle.net/asicfr/q8bwosfn/1/
https://jsfiddle.net/asicfr/q8bwosfn/3/
https://jsfiddle.net/asicfr/q8bwosfn/4/
https://jsfiddle.net/asicfr/q8bwosfn/5/
https://jsfiddle.net/asicfr/q8bwosfn/6/
En Plunker puedes usar el menú.
New > Angularjs > 2.0.x (TS)
para obtener una aplicación Angular2 mínima de trabajo
Enrutador
Si desea utilizar el enrutador agregue en config.js
''@angular/router'': {
main: ''router.umd.js'',
defaultExtension: ''js''
},
<base href="."> como primer hijo en el <head> de index.html podría ser necesario.
Para cambiar a HashLocationStrategy cambie main.ts de
import {bootstrap} from ''@angular/platform-browser-dynamic'';
import {App} from ''./app'';
bootstrap(App, [])
.catch(err => console.error(err));
a
import {bootstrap} from ''@angular/platform-browser-dynamic'';
import {App} from ''./app'';
import {provide} from ''@angular/core''
import {ROUTER_PROVIDERS} from ''@angular/router'';
import {LocationStrategy, HashLocationStrategy} from ''@angular/common'';
bootstrap(App, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HasLocationStrategy}])
.catch(err => console.error(err));
Si no estás atado a JS Fiddle , considera Plunker en Plunker lugar. Los desarrolladores de Angular mantienen un espacio de trabajo actualizado con las nuevas versiones de Angular en este enlace .
Es más actual que incluso la configuración de Angular 2 de Plunker (a la que se puede acceder desde el menú Plunker: New > AngularJS > 2.0.x (TS)
El inconveniente es que la configuración está en TypeScript, por lo que si desea desarrollar con Javascript de vainilla (ES5 o ES6), lo mejor es usar la opción de menú Plunker.
También necesitas incluir el archivo SystemJS JS. Vi que te lo perdiste. Todos estos incluyen son necesarios:
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>
También necesita configurar SystemJS con el siguiente código y luego importar su módulo principal que contiene la función bootstrap:
System.config({
transpiler: ''typescript'',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
''app'': {
defaultExtension: ''ts''
}
}
});
System.import(''app/main'')
.then(null, console.error.bind(console));