Course Angulaire et AngularJS cadres côte à côte

Progressivement mise à niveau d'une application AngularJS Angulaire.

L'une des clés de la réussite de la mise à niveau est de le faire progressivement, en l'exécution de la deux cadres côte à côte dans la même application, et le portage d'AngularJS composants Angulaire, un par un. Ceci rend possible la mise à niveau même de grands et complexes des applications sans perturber les autres affaires, parce que le travail peut être fait en collaboration et s'étaler sur une période de temps. Le upgrade module Angulaire a été conçu pour rendre incrémentielle de la mise à niveau transparente.

Pour plus d'informations, voir Angulaire 2 Guide de mise à niveau à partir AngularJS Angulaire

La DÉMO sur PLNKR

Voir aussi,

• La migration d'AngularJS Angulaire 4,5 (avec DÉMONSTRATION)

---

Je ne veux pas lancer un autre serveur avec un transpiler.

La transpiler peut être exécuté côté client. C'est possible, mais pas recommandé.

<script src="https://unpkg.com/[email protected]?main=browser"></script>
<script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
  System.import('main.js').catch(function(err){ console.error(err); });
</script>

systemjs.config.js

/**
* WEB ANGULAR VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
//DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
//Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
//paths serve as alias
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
//our app is within the app folder
'app': 'app',
//angular bundles
'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
//other libraries
'rxjs':                      'npm:[email protected]',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'ts':                        'npm:[email protected]/lib/plugin.js',
'typescript':                'npm:[email protected]/lib/typescript.js',
},
//packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts',
meta: {
'./*.ts': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);

Pour plus d'informations, voir Angulaire 2 Tapuscrit De Démarrage Rapide

---

Convertir Angulaire Tapuscrit exemples dans l'ES6 et ES5 JavaScript.

Tout ce que vous pouvez faire avec Angulaire dans Tapuscrit, vous pouvez également le faire en JavaScript. La traduction d'une langue à l'autre est surtout une question de changer la façon dont vous organisez votre code d'accès et Angulaire de l'Api.

Pour plus d'informations, voir Angulaire 2 Developer Cookbook - Tapuscrit de JavaScript

OriginalL'auteur georgeawg