Angular 2 Tutoriel
Démarrer avec Angular 2

Remarques

Versions

Installez angular2 avec un angle angulaire

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

Conditions préalables:

• Node.js v4 ou supérieur.
• npm v3 ou plus ou fil .

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 paquets.

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

Pour configurer un nouveau projet

Naviguez avec le terminal dans un dossier où vous souhaitez configurer le nouveau projet.

Exécutez les commandes:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

C'est tout, vous avez maintenant un exemple de projet simple réalisé avec Angular 2. Vous pouvez maintenant naviguer jusqu'au lien affiché dans le terminal et voir ce qu'il est en train d'exécuter.

Ajouter à un projet existant

Accédez à la racine de votre projet en cours.

Exécutez la commande:

ng init

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

Lancer 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 sur laquelle le serveur est exécuté. Est habituellement ceci:

http://localhost:4200

Ce serveur de développement local est prêt à être utilisé avec Hot Module Reloading. Ainsi, toute modification apportée au code HTML, texte dactylographié ou CSS, déclenchera le rechargement automatique du navigateur (mais peut être désactivé si vous le souhaitez).

Composants, directives, tuyaux et services générateurs

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

# 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:

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

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

Bâtiment / groupement

Lorsque vous avez fini 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 génération avec ou sans l'indicateur de production. La production minimisera le code et optimisera pour un environnement de production.

ng build

ou

ng build --prod

Recherchez ensuite dans le répertoire racine des projets un dossier /dist contenant la version.

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

ng build --prod --aot

Test d'unité

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

ng test

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

Pour plus d'infos, visitez également: la page angular-cli github

Premiers pas avec Angular 2 sans clics angulaires.

Angulaire 2.0.0-rc.4

Dans cet exemple, nous allons créer un "Hello World!" application avec un seul composant racine ( AppComponent ) pour des raisons de simplicité.

Conditions préalables:

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

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 cela angular2-example .

mkdir angular2-example
cd angular2-example

Étape 2

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

Avertissement: Les mêmes fichiers peuvent être trouvés dans le Quickstart officiel de 5 minutes .

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 transpiler TypeScript.

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

typings.json - Rend TypeScript reconnaît 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 intérieur du 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 le dire, nous allons définir AppComponent .

Étape 5

Créez un sous-dossier appelé app où nous pouvons définir les composants et les services qui composent notre application. (Dans ce cas, il vous reste plus qu'à contenir le AppComponent code 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? Premièrement, nous importons le décorateur @Component que nous utilisons pour donner à Angular la balise HTML et le modèle pour ce composant. Ensuite, nous créons la classe AppComponent avec des AppComponent de title et de 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 faisons une liste affichant chaque élément du tableau de messages en utilisant la directive *ngFor . Pour chaque élément du tableau, *ngFor crée une variable de 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

Maintenant, nous créons un fichier main.ts , qui sera le premier fichier que Angular regarde.

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. Type

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 transpiler TypeScript en mode montre (les fichiers .ts seront transpilés et le navigateur s'actualisera lorsque vous enregistrez les modifications) .

Et maintenant?

Consultez le guide officiel Angular 2 et les autres rubriques de la documentation de StackOverflow .

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é des fichiers.

Garder Visual Studios en phase avec les mises à jour NPM et NODE

Etape 1: Recherchez votre téléchargement de Node.js, généralement 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 vers le haut de la liste.

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

Passer à travers ce proxy d'entreprise embêtant

Si vous tentez de faire fonctionner un site Angular2 sur votre ordinateur Windows au XYZ MegaCorp, il est probable que vous rencontriez des problèmes pour accéder au proxy de la société.

Il y a (au moins) deux gestionnaires de paquets 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 en tant que 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 la principale raison pour laquelle les gens pensent que les paramètres de proxy ne fonctionnent pas est le %5C qui est le code URL du \ pour séparer les noms de domaine et d'utilisateur. Merci à Steve Roberts pour celui-ci: Utiliser npm derrière le proxy d'entreprise .pac

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

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

Conditions préalables

• Node.js v4.xx ou supérieur
• npm v3.xx ou supérieur ou fil

Ensuite, exécutez npm install -g typescript ou yarn global add typescript pour installer les 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 cela 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 le bootstrap) 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 }); 
});

Ensuite, exécutez une npm install ou un yarn npm install pour installer les dépendances.

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

Étape 3

Notre Angular2-express 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 serveur frontal a également besoin des fichiers de dépendance. Allons de l'avant 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/*"
  ]
}

Ensuite, exécutez une npm install ou un yarn npm install 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

Faisons 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 typographiques en fichiers javascript. Allez à 2 niveaux 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 vérifiez localhost:9999 pour voir votre application.

Plongeons dans Angular 4!

Angular 4 est maintenant disponible! En fait, Angular utilise un demi-point depuis Angular 2, ce qui nécessite d'augmenter le nombre majeur lors de l'introduction des changements de rupture. L'équipe Angular a reporté les fonctionnalités qui provoquent des modifications brisées, 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 possédait 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 de package d'animation, l'espace supplémentaire du code 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 maintenant compatible avec la version la plus récente 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 l'installation angulaire de trois manières différentes:

Vous pouvez utiliser Angular-CLI (Interface de ligne de commande), cela installera toutes les dépendances pour vous.

• Vous pouvez migrer de Angular 2 à Angular 4.

• Vous pouvez utiliser github et cloner le code Angular4. (C'est le plus facile)

• Configuration angulaire à l'aide de la CLI angulaire (interface de ligne de commande).

Avant de commencer à utiliser Angular-CLI, assurez-vous que vous avez un nœud installé sur votre machine. Ici, j'utilise le noeud 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-ironplate Nous sommes tous prêts pour Angular 4. Sa méthode assez simple et facile.

Configuration angulaire en migrant de Angular 2 à Angular 4

Maintenant, voyons la deuxième approche. Je vais vous montrer comment migrer Angular 2 vers Angular 4. Pour cela, vous devez cloner un 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 pour lancer l'application. Pour référence mon package.json.

Configuration angulaire du projet github

Avant de commencer cette étape, assurez-vous d'avoir installé git sur votre machine. Ouvrez votre terminal et clonez la grille angulaire4 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'elles.

Structure du répertoire de la plaque angulaire4

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 pour la structure d'annuaire:

Tout le code réside dans le dossier src.

mocks folder est utilisé pour les données factices utilisées dans les tests.

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

Le dossier Modules contient la liste des composants tels que l'application, le login, 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. In rest service contient différentes méthodes http. Le service de connexion fonctionne en tant que 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 comme composant racine.

bootstrap.ts exécutera toute l'application.

Le dossier webpack contient le fichier de configuration webpack.

Le fichier package.json est destiné à toutes les dépendances.

Le karma contient la configuration du karma pour le test unitaire.

node_modules contient la liste des paquets groupés.

Commençons avec 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 itinéraires pour la connexion à 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 cette installation npm et npm commencent. Voici! Vous pouvez vérifier l'écran de connexion dans votre localhost. En cas de difficulté, vous pouvez vous référer à la grille angulaire4.

Fondamentalement, je peux sentir moins de construction de package et une réponse plus rapide avec l'application Angular 4 et bien que j'ai trouvé Exactement similaire à Angular 2 dans le codage.