Premiers pas avec Angular 2

Installer angular2 avec angular-cli

Cet exemple est une configuration rapide d’Angular 2 et explique comment générer un exemple de projet rapide.

Conditions préalables:

  • [Node.js v4][1] ou supérieur.
  • [npm][2] v3 ou supérieur ou [fil][3].

Ouvrez un terminal et exécutez les commandes une par une :

npm install -g @angular/cli

ou

yarn global add @angular/cli

en fonction de votre choix de gestionnaire de packages.

La commande précédente installe @angular/cli globalement, en ajoutant l’exécutable “ng” à PATH.

Pour configurer un nouveau projet

Naviguez avec le terminal vers un dossier dans lequel vous souhaitez configurer le nouveau projet.

Exécutez les commandes :

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Voilà, vous avez maintenant un exemple de projet simple réalisé avec Angular 2. Vous pouvez maintenant naviguer vers le lien affiché dans le terminal et voir ce qu’il exécute.

A ajouter à un projet existant

Accédez à la racine de votre projet actuel.

Exécutez la commande :

ng init

Cela ajoutera l’échafaudage nécessaire à votre projet. Les fichiers seront créés dans le répertoire courant, assurez-vous donc de l’exécuter dans un répertoire vide.

Exécuter le projet localement

Pour voir et interagir avec votre application pendant son exécution dans le navigateur, vous devez démarrer un serveur de développement local hébergeant les fichiers de votre projet.

ng serve

Si le serveur a démarré avec succès, il doit afficher une adresse à laquelle le serveur s’exécute. Généralement c’est ça :

http://localhost:4200

Prêt à l’emploi, ce serveur de développement local est connecté à Hot Module Reloading, de sorte que toute modification apportée au html, au tapuscrit ou au css déclenchera le rechargement automatique du navigateur (mais peut être désactivé si vous le souhaitez).

Génération de composants, directives, tuyaux et services

La commande ng generate <scaffold-type> <name> (ou simplement ng g <scaffold-type> <name>) vous permet de générer automatiquement des composants Angular :

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component

Il existe plusieurs types d’échafaudages possibles que angular-cli peut générer :

Type d’échafaudage Usage
module ng g module mon-nouveau-module
Composant ng g component mon-nouveau-composant
Directive ng g directive ma-nouvelle-directive
Tuyau ng g pipe mon-nouveau-pipe
Services ng g service mon-nouveau-service
Classe ng g classe ma-nouvelle-classe
Interface ng g interface ma-nouvelle-interface
Énumération ng g enum mon-nouveau-enum

Vous pouvez également remplacer le nom du type par sa première lettre. Par exemple:

ng g m my-new-module pour générer un nouveau module ou ng g c my-new-component pour créer un composant.

Construction/Regroupement

Lorsque vous avez terminé de créer votre application Web Angular 2 et que vous souhaitez l’installer sur un serveur Web comme Apache Tomcat, il vous suffit d’exécuter la commande de construction avec ou sans l’indicateur de production défini. La production minimisera le code et l’optimisera pour un environnement de production.

ng build

ou

ng build --prod

Ensuite, recherchez dans le répertoire racine des projets un dossier /dist, qui contient le fichier build.

Si vous souhaitez bénéficier des avantages d’un bundle de production plus petit, vous pouvez également utiliser la compilation de modèles Ahead-of-Time, qui supprime le compilateur de modèles de la version finale :

ng build --prod --aot

Tests unitaires

Angular 2 fournit des tests unitaires intégrés, et chaque élément créé par angular-cli génère un test unitaire de base, qui peut être étendu. Les tests unitaires sont écrits avec du jasmin et exécutés via Karma. Pour commencer le test, exécutez la commande suivante :

ng test

Cette commande exécutera tous les tests du projet, et les ré-exécutera à chaque fois qu’un fichier source change, qu’il s’agisse d’un test ou du code de l’application.

Pour plus d’informations, visitez également : [page github angulaire-cli] [4]

[1] : https://nodejs.org [2] : https://www.npmjs.com/ [3] : https://yarnpkg.com [4] : https://github.com/angular/angular-cli

Premiers pas avec Angular 2 sans angular-cli.

Angulaire 2.0.0-rc.4

Dans cet exemple, nous allons créer un “Hello World!” app avec un seul composant racine (AppComponent) par souci de simplicité.

Conditions préalables:

  • Node.js v5 ou version ultérieure
  • npm v3 ou version ultérieure

Remarque : Vous pouvez vérifier les versions en exécutant node -v et npm -v dans la console/le terminal.

Étape 1

Créez et entrez un nouveau dossier pour votre projet. Appelons-le angular2-example.

mkdir angular2-example
cd angular2-example

Étape 2

Avant de commencer à écrire le code de notre application, nous ajouterons les 4 fichiers fournis ci-dessous : package.json, tsconfig.json, typings.json et systemjs.config.js.

Avis de non-responsabilité : Les mêmes fichiers peuvent être trouvés dans le [Guide de démarrage rapide officiel en 5 minutes][1].

package.json - Nous permet de télécharger toutes les dépendances avec npm et fournit une exécution de script simple pour faciliter la vie des projets simples. (Vous devriez envisager d’utiliser quelque chose comme Gulp à l’avenir pour automatiser les tâches).

{
  "name": "angular2-example",
  "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-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

tsconfig.json - Configure le transpileur TypeScript.

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

typings.json - Permet à TypeScript de reconnaître les bibliothèques que nous utilisons.

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

systemjs.config.js - Configure SystemJS (vous pouvez également utiliser webpack).

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application's needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

Étape 3

Installons les dépendances en tapant

npm install

dans la console/le terminal.

Étape 4

Créez index.html dans le dossier angular2-example.

<html>
  <head>
    <title>Angular2 example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <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>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app></my-app>
  </body>
</html>

Votre application sera rendue entre les balises my-app.

Cependant, Angular ne sait toujours pas * quoi * rendre. Pour lui dire cela, nous allons définir AppComponent.

Étape 5

Créez un sous-dossier appelé app où nous pouvons définir les composants et [services] [2] qui composent notre application. (Dans ce cas, il ne contiendra que le code AppComponent et main.ts.)

mkdir app

Étape 6

Créez le fichier app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <ul>
        <li *ngFor="let message of messages">
            {{message}}
        </li>
    </ul>
  `
})
export class AppComponent { 
    title = "Angular2 example";
    messages = [
        "Hello World!",
        "Another string",
        "Another one"
    ];
}

Que ce passe-t-il? Tout d’abord, nous importons le décorateur @Component que nous utilisons pour donner à Angular la balise HTML et le modèle de ce composant. Ensuite, nous créons la classe AppComponent avec les variables title et messages que nous pouvons utiliser dans le modèle.

Regardons maintenant ce modèle :

<h1>{{title}}</h1>
<ul>
    <li *ngFor="let message of messages">
        {{message}}
    </li>
</ul>

Nous affichons la variable title dans une balise h1 puis créons une liste montrant chaque élément du tableau messages en utilisant la directive *ngFor. Pour chaque élément du tableau, *ngFor crée une variable message que nous utilisons dans l’élément li. Le résultat sera :

<h1>Angular 2 example</h1>
<ul>
    <li>Hello World!</li>
    <li>Another string</li>
    <li>Another one</li>
</ul>

Étape 7

Nous créons maintenant un fichier main.ts, qui sera le premier fichier examiné par Angular.

Créez le fichier app/main.ts.

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

Nous importons la fonction bootstrap et la classe AppComponent, puis utilisons bootstrap pour indiquer à Angular quel composant utiliser comme racine.

Étape 8

Il est temps de lancer votre première application. Taper

npm start

dans votre console/terminal. Cela exécutera un script préparé à partir de package.json qui démarre lite-server, ouvre votre application dans une fenêtre de navigateur et exécute le transpilateur TypeScript en mode veille (ainsi les fichiers .ts seront transpilés et le navigateur sera actualisé lorsque vous enregistrez les modifications).

Et maintenant?

Consultez le guide officiel d’Angular 2 et les autres sujets sur [la documentation de StackOverflow][3].

Vous pouvez également modifier AppComponent pour utiliser des modèles externes, des styles ou ajouter/modifier des variables de composant. Vous devriez voir vos modifications immédiatement après avoir enregistré les fichiers.

[1] : https://angular.io/docs/ts/latest/quickstart.html [2] : https://www.wikiod.com/fr/angular2/services-et-injection-de-dependance [3] : https://www.wikiod.com/fr/angular2

Premiers pas avec Angular 2 avec le backend node.js/expressjs (exemple http inclus)

Nous allons créer un simple “Hello World!” app avec Angular2 2.4.1 (modification @NgModule) avec un backend node.js (expressjs).

Conditions préalables

Ensuite, exécutez npm install -g typescript ou yarn global add typescript pour installer le typescript globalement

Feuille de route

Étape 1

Créez un nouveau dossier (et le répertoire racine de notre back-end) pour notre application. Appelons-le Angular2-express.

ligne de commande:

mkdir Angular2-express
cd Angular2-express

Étape 2

Créez le package.json (pour les dépendances) et app.js (pour l’amorçage) pour notre application node.js.

package.json :

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "node app.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  }
}

app.js :

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

server.listen(process.env.PORT || 9999, function(){
    console.log("Server connected. Listening on port: " + (process.env.PORT || 9999));
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/front' ) );

app.get('/test', function(req,res){ //example http request receiver
  return res.send(myTestVar);
});

//send the index.html on every page refresh and let angular handle the routing
app.get('/*',  function(req, res, next) {
    console.log("Reloading");
    res.sendFile('index.html', { root: __dirname }); 
});

Exécutez ensuite un npm install ou yarn pour installer les dépendances.

Maintenant, notre structure back-end est terminée. Passons au frontal.

Étape 3

Notre frontal doit se trouver dans un dossier nommé “front” dans notre dossier “Angular2-express”.

ligne de commande:

mkdir front
cd front

Tout comme nous l’avons fait avec notre back-end, notre front-end a également besoin des fichiers de dépendance. Continuons et créons les fichiers suivants : package.json, systemjs.config.js, tsconfig.json

package.json :

{
  "name": "Angular2-express",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.4.1",
    "@angular/compiler": "~2.4.1",
    "@angular/compiler-cli": "^2.4.1",
    "@angular/core": "~2.4.1",
    "@angular/forms": "~2.4.1",
    "@angular/http": "~2.4.1",
    "@angular/platform-browser": "~2.4.1",
    "@angular/platform-browser-dynamic": "~2.4.1",
    "@angular/platform-server": "^2.4.1",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "typescript": "2.0.2"
  }
}

systemjs.config.js :

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    defaultJSExtensions:true,
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@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',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/*"
  ]
}

Exécutez ensuite un npm install ou yarn pour installer les dépendances.

Maintenant que nos fichiers de dépendance sont complets. Passons à notre index.html :

index.html :

<html>
  <head>
    <base href="/">
    <title>Angular2-express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <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>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Nous sommes maintenant prêts à créer notre premier composant. Créez un dossier nommé app dans notre dossier front.

ligne de commande:

mkdir app
cd app

Créons les fichiers suivants nommés main.ts, app.module.ts, app.component.ts

main.ts :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module.ts :

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from "@angular/http";

import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ 
    BrowserModule,
    HttpModule    
  ],
  declarations: [ 
    AppComponent
  ],
  providers:[ ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {}

app.component.ts :

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'my-app',
  template: 'Hello World!',
  providers: []
})
export class AppComponent { 
  constructor(private http: Http){
    //http get example
    this.http.get('/test')
     .subscribe((res)=>{
       console.log(res);
     });
  }
}

Après cela, compilez les fichiers dactylographiés en fichiers javascript. Montez de 2 niveaux à partir du répertoire actuel (dans le dossier Angular2-express) et exécutez la commande ci-dessous.

ligne de commande:

cd ..
cd ..
tsc -p front

Notre structure de dossiers devrait ressembler à :

Angular2-express
├── app.js
├── node_modules
├── package.json
├── front
│   ├── package.json
│   ├── index.html
│   ├── node_modules
│   ├── systemjs.config.js
│   ├── tsconfig.json
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.component.js.map
│   │   ├── app.component.js
│   │   ├── app.module.ts
│   │   ├── app.module.js.map
│   │   ├── app.module.js
│   │   ├── main.ts
│   │   ├── main.js.map
│   │   ├── main.js

Enfin, dans le dossier Angular2-express, exécutez la commande node app.js dans la ligne de commande. Ouvrez votre navigateur préféré et cochez localhost:9999 pour voir votre application.

Passer à travers ce satané proxy d’entreprise

Si vous essayez d’exécuter un site Angular2 sur votre ordinateur de travail Windows chez XYZ MegaCorp, il est probable que vous rencontriez des problèmes pour passer par le proxy de l’entreprise.

Il y a (au moins) deux gestionnaires de packages qui doivent passer par le proxy :

  1. MNP
  2. Dactylographie

Pour NPM, vous devez ajouter les lignes suivantes au fichier .npmrc :

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/

Pour Typings, vous devez ajouter les lignes suivantes au fichier .typingsrc :

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
rejectUnauthorized=false

Ces fichiers n’existent probablement pas encore, vous pouvez donc les créer sous forme de fichiers texte vierges. Ils peuvent être ajoutés à la racine du projet (au même endroit que package.json ou vous pouvez les mettre dans %HOMEPATH% et ils seront disponibles pour tous vos projets.

Le bit qui n’est pas évident et qui est la principale raison pour laquelle les gens pensent que les paramètres de proxy ne fonctionnent pas est le % 5C qui est l’encodage URL du \ pour séparer le domaine et les noms d’utilisateur. Merci à Steve Roberts pour celui-là : http://stackoverflow.com/questions/25660936/using-npm-behind-corporate-proxy-pac

Garder Visual Studios synchronisé avec les mises à jour NPM et NODE

Étape 1 : Localisez votre téléchargement de Node.js, généralement il est installé sous C:/program files/nodejs

Étape 2 : Ouvrez Visual Studios et accédez à « Outils > Options »

Étape 3 : Dans la fenêtre des options, accédez à “Projets et solutions>Outils Web externes”

Étape 4 : Ajoutez une nouvelle entrée avec votre emplacement de fichier Node.js (C:/program files/nodejs), IMPORTANT, utilisez les boutons fléchés du menu pour déplacer votre référence en haut de la liste.

[![entrez la description de l’image ici][1]][1]

Étape 5 : Redémarrez Visual Studios et exécutez une installation npm, sur votre projet, à partir de la fenêtre de commande npm

[1] : http://i.stack.imgur.com/trZa7.png

Plongeons dans Angular 4 !

Angulaire 4 est maintenant disponible ! En fait, Angular utilise semver depuis Angular 2, ce qui nécessite que le nombre majeur soit augmenté lors de l’introduction de changements de rupture. L’équipe Angular a reporté les fonctionnalités qui provoquent des changements avec rupture, qui seront publiées avec Angular 4. Angular 3 a été ignoré pour pouvoir aligner les numéros de version des modules principaux, car le routeur avait déjà la version 3.

Selon l’équipe Angular, les applications Angular 4 vont consommer moins d’espace et être plus rapides qu’auparavant. Ils ont séparé le package d’animation du package @angular/core. Si quelqu’un n’utilise pas le package d’animation, l’espace de code supplémentaire ne se retrouvera pas dans la production. La syntaxe de liaison de modèle prend désormais en charge la syntaxe de style if/else. Angular 4 est désormais compatible avec les versions les plus récentes de Typescript 2.1 et 2.2. Donc, Angular 4 va être plus excitant.

Maintenant, je vais vous montrer comment configurer Angular 4 dans votre projet.

Commençons la configuration angulaire de trois manières différentes :

Vous pouvez utiliser Angular-CLI (Command Line Interface), il installera toutes les dépendances pour vous.

  • Vous pouvez migrer d’Angular 2 vers Angular 4.

  • Vous pouvez utiliser github et cloner le Angular4-boilerplate. (C’est le plus simple.😉 )

  • Configuration angulaire à l’aide d’Angular-CLI (interface de ligne de commande).

Avant de commencer à utiliser Angular-CLI, assurez-vous que le nœud est installé sur votre machine. Ici, j’utilise le nœud v7.8.0. Maintenant, ouvrez votre terminal et tapez la commande suivante pour Angular-CLI.

npm install -g @angular/cli

ou

yarn global add @angular/cli

selon le gestionnaire de paquets que vous utilisez.

Installons Angular 4 en utilisant Angular-CLI.

ng new Angular4-boilerplate

cd Angular4-boilerplate Nous sommes tous prêts pour Angular 4. C’est une méthode assez simple et directe.😌

Configuration angulaire en migrant de Angular 2 à Angular 4

Voyons maintenant la deuxième approche. Je vais vous montrer comment migrer Angular 2 vers Angular 4. Pour cela, vous devez cloner n’importe quel projet Angular 2 et mettre à jour les dépendances Angular 2 avec la dépendance Angular 4 dans votre package.json comme suit :

"dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "4.0.2",
    "@angular/compiler": "4.0.2",
    "@angular/core": "^4.0.1",
    "@angular/forms": "4.0.2",
    "@angular/http": "4.0.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "4.0.2",
    "@angular/platform-browser-dynamic": "4.0.2",
    "@angular/router": "4.0.2",
    "typescript": "2.2.2"
   }

Ce sont les principales dépendances pour Angular 4. Maintenant, vous pouvez installer npm, puis npm commencer à exécuter l’application. Pour référence mon package.json.

Configuration angulaire du projet github

Avant de commencer cette étape, assurez-vous que git est installé sur votre machine. Ouvrez votre terminal et clonez le angular4-boilerplate en utilisant la commande ci-dessous :

[email protected]:CypherTree/angular4-boilerplate.git

Ensuite, installez toutes les dépendances et exécutez-le.

npm install

npm start

Et vous avez terminé avec la configuration Angular 4. Toutes les étapes sont très simples, vous pouvez donc choisir l’une d’entre elles.

Structure de répertoire de l’angular4-boilerplate

Angular4-boilerplate
-karma
-node_modules
-src
   -mocks
   -models
      -loginform.ts
      -index.ts
   -modules
      -app
        -app.component.ts
     -app.component.html
      -login
    -login.component.ts
    -login.component.html
    -login.component.css
      -widget
     -widget.component.ts
     -widget.component.html
     -widget.component.css
    ........    
   -services
       -login.service.ts
    -rest.service.ts
   -app.routing.module.ts
   -app.module.ts
   -bootstrap.ts
   -index.html
   -vendor.ts
-typings
-webpack
-package.json
-tsconfig.json
-tslint.json
-typings.json 

Compréhension de base de la structure du répertoire :

Tout le code réside dans le dossier src.

Le dossier mocks est destiné aux données fictives utilisées à des fins de test.

Le dossier modèle contient la classe et l’interface utilisées dans le composant.

Le dossier des modules contient la liste des composants tels que l’application, la connexion, le widget, etc. Tous les composants contiennent des fichiers dactylographiés, html et css. index.ts sert à exporter toute la classe.

Le dossier services contient la liste des services utilisés dans l’application. J’ai séparé le service de repos et le service de composants différents. Le service de repos contient différentes méthodes http. Le service de connexion fonctionne comme médiateur entre le composant de connexion et le service de repos.

Le fichier app.routing.ts décrit toutes les routes possibles pour l’application.

app.module.ts décrit le module d’application en tant que composant racine.

bootstrap.ts exécutera toute l’application.

Le dossier webpack contient le fichier de configuration webpack.

Le fichier package.json est pour toutes les listes de dépendances.

karma contient la configuration du karma pour le test unitaire.

node_modules contient la liste des ensembles de packages.

Commençons par le composant Login. Dans login.component.html

<form>Dreamfactory - Addressbook 2.0 
 <label>Email</label> <input id="email" form="" name="email" type="email" /> 
 <label>Password</label> <input id="password" form="" name="password" 
 type="password" /> 
 <button form="">Login</button>
</form>

Dans login.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Form, FormGroup } from '@angular/forms';
import { LoginForm } from '../../models';
import { LoginService } from '../../services/login.service';

@Component({
    selector: 'login',
    template: require('./login.component.html'),
    styles: [require('./login.component.css')]
})
export class LoginComponent {

    constructor(private loginService: LoginService, private router: Router, form: LoginForm) { }

    getLogin(form: LoginForm): void {
      let username = form.email;
      let password = form.password;
      this.loginService.getAuthenticate(form).subscribe(() => {
          this.router.navigate(['/calender']);
      });
    }
}

Nous devons exporter ce composant dans index.ts.

export * from './login/login.component';

nous devons définir des routes pour la connexion dans app.routes.ts

const appRoutes: Routes = [
   {
       path: 'login',
       component: LoginComponent
   },
   ........
   {
       path: '',
       pathMatch: 'full',
       redirectTo: '/login'
   }
];

Dans le composant racine, le fichier app.module.ts, il vous suffit d’importer ce composant.

.....
import { LoginComponent } from './modules';
......
@NgModule({
    bootstrap: [AppComponent],
    declarations: [
       LoginComponent
       .....
       .....
       ]
      ..... 
  })
  export class AppModule { }

et après cela, installez npm et démarrez npm. Voici! Vous pouvez vérifier l’écran de connexion dans votre localhost. En cas de difficulté, Vous pouvez vous référer à l’angular4-boilerplate.

Fondamentalement, je peux sentir moins de paquet de construction et une réponse plus rapide avec l’application Angular 4 et bien que j’aie trouvé exactement similaire à Angular 2 dans le codage.