Configuration de l'environnement JavaScript Angular 2

Dans ce chapitre, nous vous montrerons comment configurer l'environnement d'exécution Angular 2.

Ce chapitre utilise JavaScript pour créer des applications Angular; bien sûr, vous pouvez également utiliser TypeScript et Dart pour créer des applications Angular.

La structure des répertoires de fichiers utilisée dans ce chapitre est la suivante:

---

Créer un fichier de configuration

Créer un répertoire

$ mkdir angular-quickstart
$ cd angular-quickstart

Charger les bibliothèques requises

Ici, nous recommandons d'utiliser npm comme outil de gestion de paquets. Si vous n'avez pas encore installé npm ou si vous n'êtes pas familier avec npm, vous pouvez consulter notre tutoriel:Introduction à l'utilisation de NPM。

Créez le fichier package.json, le code est le suivant:

Comme l'accès au miroir officiel de npm est trop lent 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

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.

---

Créer des composants Angular

Les composants sont la base et le cœur des applications Angular. Un composant encapsule une fonction spécifique, et les composants travaillent ensemble pour assembler une application complète.

En général, un composant est une classe JavaScript utilisée pour contrôler le template de vue.

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

$ mkdir app
$ cd app

Et ajoutez le fichier de composant app.component.js avec le contenu suivant:

Ensuite, analysons le code ci-dessus:

Nous avons créé un composant visuel nommé AppComponent en appelant en chaîne les méthodes Component et Class dans l'espace de noms global du noyau Angular ng.core.

La méthode Component accepte un objet de configuration contenant deux propriétés. La méthode Class est l'endroit où nous implémentons le composant lui-même. Dans la méthode Class, nous ajoutons des propriétés et des méthodes au composant, qui sont liées aux vues et comportements correspondants.

Modules

Les applications Angular sont modulaires. ES5 ne dispose pas d'un système de modules intégré, donc un système de modules tiers peut être utilisé. Ensuite, nous créons un espace de noms indépendant app pour l'application, et le code du fichier peut être enveloppé dans une IIFE (Immediately Invoked Function Expression) :

(function(app) {
})(window.app || (window.app = {}));

Nous passons l'objet global de l'espace de noms app dans l'IIFE, et s'il n'existe pas, nous l'initialisons avec un objet vide.

La plupart des fichiers d'application exportent du code en ajoutant des choses à l'espace de noms app. Nous avons exporté AppComponent dans le fichier app.component.js.

app.AppComponent =

Objet de définition de classe

Dans cet exemple, la classe AppComponent n'a qu'un constructeur vide :

.Class({
    constructor: function() {}
});

Lorsque nous voulons créer une application significative, nous pouvons étendre cet objet avec des propriétés et une logique d'application.

Objet de définition de composant

ng.core.Component() indique à Angular que l'objet de définition de classe est un composant Angular. L'objet de configuration passé à ng.core.Component() a deux champs : selector et template.

selector définit un sélecteur CSS simple my-app pour un élément HTML hôte. Lorsqu'Angular rencontre un élément my-app dans le HTML hôte, il crée et affiche une instance d'AppComponent.

La propriété template contient le template du composant.

---

Ajouter NgModule

Les applications Angular sont constituées de modules Angular, qui contiennent les composants et tout le reste nécessaire à l'application Angular.

Ensuite, créez le fichier app/app.module.js avec le contenu suivant :

---

Démarrer l'application

Ajoutez le fichier app/main.js :

Nous avons besoin de deux choses pour démarrer l'application :

• La fonction platformBrowserDynamic().bootstrapModule d'Angular.
• Le module racine de l'application AppModule mentionné ci-dessus.

Ensuite, créez index.html avec le code suivant :

Analyse de index.html

• 1. Chargez les bibliothèques JavaScript dont nous avons besoin ;
• 2. Chargez nos propres fichiers JavaScript, faites attention à l'ordre ;
• 3. Nous ajoutons la balise <my-app> à l'intérieur de la balise <body>.

Le processus d'exécution est le suivant : lorsque Angular appelle la fonction bootstrapModule dans main.js, il lit les métadonnées d'AppModule, trouve AppComponent dans les composants bootstrap, trouve le sélecteur my-app, localise un élément nommé my-app, puis charge le contenu entre ces balises.

Ajoutez quelques styles

Le code du fichier styles.css est :

Ouvrez un terminal et saisissez la commande suivante :

$ npm start

Visitez http://localhost:3000/, le navigateur affiche :

Ainsi, notre première application Angular 2 est terminée. Le code source utilisé dans cet article peut être téléchargé via la méthode suivante, en excluant node_modules.

Téléchargement du code source

Autres extensions