Configuration de l'environnement TypeScript Angular 2

Ce chapitre utilise TypeScript pour créer des applications Angular, ce qui est également la recommandation officielle. Les exemples de ce tutoriel sont également écrits en TypeScript.

TypeScript est un langage de programmation gratuit et open source développé par Microsoft. C'est un sur-ensemble de JavaScript et il étend la syntaxe de JavaScript.

Si vous ne connaissez pas TypeScript, vous pouvez consulter les ressources suivantes :

Avant de commencer, vous devez vous assurer que npm est installé. Si vous n'avez pas installé npm ou ne comprenez pas npm, vous pouvez consulter notre tutoriel :Introduction à l'utilisation de NPM。

Comme le registre npm officiel est trop lent d'accès en Chine, j'ai utilisé ici le miroir npm de Taobao. La méthode d'installation est la suivante :

$ npm install -g cnpm --registry=https://registry.npmmirror.com

Après l'exécution, nous pouvons utiliser la commande cnpm pour installer les modules :

$ cnpm install

Étape 1 : Créer et configurer le projet

Créer un répertoire

$ mkdir angular-quickstart
$ cd angular-quickstart

Créer des fichiers de configuration

Un projet Angular nécessite les fichiers de configuration suivants :

package.jsonSpécifie les paquets de dépendances npm requis par ce projet.
tsconfig.jsonDéfinit comment le compilateur TypeScript génère le code JavaScript à partir des fichiers source du projet.
typings.jsonFournit des fichiers de définition supplémentaires pour les bibliothèques que le compilateur TypeScript ne peut pas reconnaître.
systemjs.config.jsFournit au chargeur de modules des informations sur l'emplacement des modules d'application et enregistre tous les paquets de dépendances requis. Il inclut également les paquets nécessaires aux exemples ultérieurs de ce document.

Créez les fichiers suivants dans angular-quickstart, comme indiqué dans le code ci-dessous :

fichier package.json :

{ "name": "angular-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.27", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.2.0", "lite-server": "^2.2.2", "typescript": "^2.3.4", "typings":"^1.3.2" } }

fichier tsconfig.json :

{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false } }

fichier typings.json :

{ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160725163759", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160909174046" } }

fichier systemjs.config.js :

/** * Configuration de System pour les exemples Angular * Ajustez selon les besoins de votre application. */ (function (global) { System.config({ paths: { // les chemins servent d'alias 'npm:': 'node_modules/' }, // map indique au chargeur System où chercher les éléments map: { // notre application se trouve dans le dossier app app: 'app', // bundles Angular '@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-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/forms': 'npm:@angular/forms/bundles/forms.umd.js', // autres bibliothèques 'rxjs': 'npm:rxjs', 'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', }, // packages indique au chargeur System comment charger lorsqu'il n'y a pas de nom de fichier et/ou d'extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this);

Ensuite, nous utilisons la commande cnpm pour installer les paquets de dépendances :

$ cnpm install

Après une exécution réussie, un répertoire node_modules sera généré dans le répertoire angular-quickstart, qui contient les modules nécessaires pour cet exemple. Nous pouvons jeter un coup d'œil à la structure du répertoire du projet :

Étape 2 : Créer l'application

Nous utilisons les NgModules pour organiser les applications Angular en blocs de code fonctionnels liés à des fonctionnalités.

Angular lui-même est divisé en modules Angular distincts, donc dans notre application, nous devons seulement importer les parties d'Angular dont nous avons besoin.

Chaque application Angular a besoin d'au moins unmodule racine, qui dans l'exemple est AppModule.

Ensuite, nous créons un répertoire app sous le répertoire angular-quickstart :

$ mkdir app
$ cd app

Ensuite, créez le fichier app.module.ts dans le répertoire app, comme indiqué dans le code ci-dessous :

fichier app.module.ts :

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @NgModule({ imports: [ BrowserModule ] }) export class AppModule { }

Comme QuickStart est une application web s'exécutant dans le navigateur, le module racine doit importer BrowserModule depuis @angular/platform-browser et l'ajouter au tableau imports.

Créer un composant et l'ajouter à l'application

Chaque application Angular a au moins uncomposant racine, dans l'exemple il s'agit de AppComponent. Le code du fichier app.component.ts est le suivant :

fichier app.component.ts :

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Ma première application Angular</h1>' }) export class AppComponent { }

Explication du code :

Le code ci-dessus provenant deangular2/coreimporte le paquetComponent.
@Componentest ledécorateurd'Angular 2, il associe des métadonnées à la classe de composant AppComponent.
my-appest un sélecteur CSS qui peut être utilisé dans des balises HTML comme composant.
@viewcontient untemplate, indiquant à Angular comment afficher la vue du composant.
exportindique que le composant peut être utilisé en dehors du fichier.

Ensuite, nous rouvrons le fichier app.module.ts, importons le nouveau AppComponent et l'ajoutons aux champs declarations et bootstrap du décorateur NgModule :

fichier app.module.ts :

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Étape 4 : Démarrer l'application

Ensuite, nous devons indiquer à Angular comment démarrer l'application.

Créez un fichier main.ts dans le répertoire angular-quickstart/app, avec le code suivant :

Fichier main.ts :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule);

Le code ci-dessus initialise la plateforme pour permettre à votre code de s'exécuter, puis démarre votre AppModule sur cette plateforme.

Définir la page hôte de l'application

Créez un fichier index.html dans le répertoire angular-quickstart, avec le code suivant :

Fichier index.html :

<html> <head> <title>Angular 2 Exemple - Tutoriel d'exemple (example.com)</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css">   <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script>  <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head>  <body> <my-app>Chargement...</my-app> </body> </html>

Les points à noter ici sont :

Bibliothèques JavaScript :core-jsest une bibliothèque polyfill pour les navigateurs plus anciens,zone.jsetreflect-metadataLa bibliothèque est requise par Angular, tandis que la bibliothèque SystemJS est utilisée pour le chargement des modules.
Le fichier de configuration et le script SystemJS peuvent importer et exécuter le module d'application que nous venons d'écrire dans le fichier principal.
La balise <my-app> est l'endroit où l'application est chargée.

Ajouter des styles

Nous pouvons définir les styles dont nous avons besoin dans le fichier styles.css dans le répertoire angular-quickstart :

Fichier styles.css :

/* Styles principaux */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; }

Étape 6 : Compiler et exécuter l'application

Ouvrez une fenêtre de terminal et saisissez la commande suivante :

npm start

Visitez http://localhost:3000/, et le navigateur affiche le résultat suivant :

À ce stade, notre première application Angular 2 est créée. La structure finale des répertoires est :

Le code source utilisé dans cet article peut être téléchargé via la méthode suivante, et n'inclut pas les répertoires node_modules et typings.

Téléchargement du code source