Chargement...

ANGULAR-TUTO.COM

Premier Example

Demarrage Example 1

Dans ce Tutoriel on va installer l’environnement de travail et démarrer notre première application hello world. On va se limiter sur des outils et des framework open source seulement. Donc pas besoin d’acheter des licences ou cracker des outils.

TypeScript

Comme on a vu dans le tutorial précédent: il est nécessaire d’installer TypeScript avant de commencer le codage. Car TypeScript a besoin d’un compilateur installé. Le lien de télechargement de TypeScript est:
www.typescriptlang.org

Visual Studio Code

Pour travailler avec Angular2 il est possible de travailler sur plusieurs IDE (Comme Visual studio 2015 ou autre), mais dans notre cas on va travailler avec Visual Studio Code qui est à son tour un environnement de développement open source et gratuit. Oui c’est un produit Microsoft mais Open Source : La plus grande surprise que c’est un produit qui travaille sur Windows, Linux et MacOS. Lien de télechargement
code.visualstudio.com/download

NodeJS

Selon Wikipedia Node.js est une plateforme logicielle libre et événementielle en JavaScript. Tout simplement, en l’utilise pour créer un serveur web côté serveur qui permet d'exécuter du Code TypeScript. Il est utilisé pour créer des applications web I/O Intensives comme les sites de Streaming et SinglePage Sites. Donc on a pas besoin d’un langage serveur comme C# ou Java. Il suffit du code TypeScript qui va être compilé et exécuté par NodeJS. Vous pouvez télécharger et installer NodeJS à partir de ce lien:
nodejs.org
Pour vérifier que NodeJS est bien installé il suffit de lancer cette commande à partir de votre Terminal Command (cmd). NodeJS -V

NPM

NPM ou “Node Packaged Modules” est un outil qui permet d’installer les dépendances. c.a.d pour lancer une application angular 2 on a besoin de plusieurs modules qui font la conversion, la compilation ou autres actions. NPM a le rôle de trouver les packages nécessaires et il les installes dans le répertoire de l’application. Aussi il permet de lancer l’application. Donc si NodeJS est bien installé, il est moment d’installer NPM en suivant les étapes suivantes: Positionnez-vous sur le répertoire de travail exemple Bureau/MonProjet
> cd /.../Bureau/MonProjet
> npm install
NB. Il faut installer NPM sur le répertoire de l’application Dès que NPM est installé sur votre répertoire de travail, il va lancer l’application sur votre navigateur par défaut.

Etape 0: Structure du Projet.

Il faut avoir une structure du projet bien définie pour que l’application angular 2 tourne correctement. Cette structure est basée sur un ensemble des fichiers de configuration et du code. La structure finale des fichiers et des dossiers peut être comme suivant: structure angular2 avec (D1) et (D2) sont deux répertoire et le reste (F1 → F8) sont des fichiers à créer. Commençons, maintenant avec les fichiers de configuration:

Etape1: Fichiers de configuration

Dans Angular2, nous avons plusieurs fichiers de configuration à savoir:

  • Package.json: C’est un fichier de configuration NPM. Il contient des configuration Angular 2. Ces configurations permettent d’installer les autres packages en relation, en utilisant NPM.
  • tsconfig.json: Tous les fichiers TypeScript (*.ts) seront compilés et convertis vers des fichiers JavaScript(*.js). Ce que permet, aux différents navigateurs, de lire ces fichiers. Pour assurer cette action on fait appel au fichier tsconfig.json.

    Etape2: Fichiers de l’application:

  • Styles.css: est un simple fichier css permettant de créer des styles pour notre application Angular 2.
  • Index.html: c’est notre page de démarrage. Elle contient les appels vers les components Angular 2. Notez bien que le nom par défaut de la page de démarrage est index.html ce nom peut être changé.
    Etape3: Dossier généré:

    Le dossier (D2) nommé “node_modules” est un dossier généré automatiquement. en fait après l'exécution de deux commandes dont
    on a parlé précédemment
    > cd /.../Bureau/MonProjet
    > npm install
    le dossier (D2) sera généré. Ainsi (D2) est un dossier qui contient un ensemble des fichiers des configurations qui sont utilisés par NPM pour gérer les dépendances nécessaires.

    Etape4: Dossier de l’application:

  • Le dossier (D1) peut être nommé comme vous voulez. Dans notre cas on a choisi de le nommé app. “app” aussi est le nom que nous l’avons choisi pour notre application.
  • app.component.ts: On commence par créer un fichier pour notre component. Il faut mettre en consideration que parmi les règles d’art dans Angular2 il faut créer chaque component dans un fichier séparé. Aussi chaque composant doit etre nommé comme suivant NomComponent.component.ts. Comme notre component est app donc il fallait créer un fichier app.component.ts
  • app.module.ts: Angular2 est modulaire. Tout est créé sous forme des modules. Chaque module est composé par un ensemble des components. Dans chaque module on déclare les components qui sont exposables. cette exposition se produit à l’aide de l’instruction declarations: [ app.AppComponent ],
  • main.ts : est le fichier de démarrage. Il permet de définir les modules avec l’application va démarrer. On les appelle les modules “Bootstrap”. L’instruction .bootstrapModule(app.AppModule); permet de dire que le module app.AppModule, qu’on a créé précédemment, est un module à charger (Bootstrap) au moment de démarrage de l’application.

    Etape5:Lancer votre application:

    Après la préparation de tous les fichiers nécessaires. Il est temps de faire appel à NPM pour lancer l’application. Donc il suffit, en utilisant l’invite des commande, de se positionner sur l’emplacement de l’application puis NPM start structure angular2

    Veuillez copier le code suivant:
  • app.component.ts
  •  
    import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: 'Bonjour Angular
    www.angular-tuto.com ' }) export class AppComponent { }
  • 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 { }
                              
  • main.ts
  •  
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';
    const platform = platformBrowserDynamic();
    platform.bootstrapModule(AppModule);
    
  • index.html
  •  
    <html>
      <head>
        <title>Angular QuickStart</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <!-- 1. Charger les bibliotheques --> 
        <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. Configurer SystemJS -->
        <script src="systemjs.config.js"></script>
        <script>
          System.import('app').catch(function(err){ console.error(err); });
        </script>
      </head>
      <!-- 3. Charger notre application nommée app -->
      <body>
        <my-app>Loading...</my-app>
      </body>
    </html>
    
  • package.json
  •  
    {
      "name": "angular-quickstart",
      "version": "1.0.0",
      "scripts": {
        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
        "lite": "lite-server",
        "tsc": "tsc",
        "tsc:w": "tsc -w"
      },
      "licenses": [
        {
          "type": "MIT",
          "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
        }
      ],
      "dependencies": {
        "@angular/common": "~2.2.0",
        "@angular/compiler": "~2.2.0",
        "@angular/core": "~2.2.0",
        "@angular/forms": "~2.2.0",
        "@angular/http": "~2.2.0",
        "@angular/platform-browser": "~2.2.0",
        "@angular/platform-browser-dynamic": "~2.2.0",
        "@angular/router": "~3.2.0",
        "@angular/upgrade": "~2.2.0",
        "angular-in-memory-web-api": "~0.1.15",
        "core-js": "^2.4.1",
        "reflect-metadata": "^0.1.8",
        "rxjs": "5.0.0-beta.12",
        "systemjs": "0.19.39",
        "zone.js": "^0.6.25"
      },
      "devDependencies": {
        "@types/core-js": "^0.9.34",
        "@types/node": "^6.0.45",
        "concurrently": "^3.0.0",
        "lite-server": "^2.2.2",
        "typescript": "^2.0.3"
      }
    }
    
  • systemjs.config.js
  •  
    /**
     * vous pouvez modifier selon vos besoins
     */
    (function (global) {
      System.config({
        paths: {
          // le lien vers le fichiers de configuration npm
          'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
          // notre applicaton est dans le dossier app
          app: 'app',
          // les module demandés par 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/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',
          
           'rxjs':                      'npm:rxjs',
          'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // packages configure le chargement si les fichiers n ont pas la bonne 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
      }
    }
        
    


    Dans le tutoriel, suivant, on va apprendre comment créer des nouveaux modules et components.