Show Menu

Angular 2 - Démarrer un projet Cheat Sheet by

Etapes pour démarrer un projet Angular 2
angular     angular2

Fichier packag­e.json

{
  "name": "bootstrap",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

Explic­ations packag­e.json

Ce fichier permet de charger les dépend­ances nécess­aires pour le projet. On trouve dans ce fichier :

Les scripts dispon­ibles :
* tsc : Compil­ation du code TypeScript
* tsc:w : Compil­ation du code TypeScript avec un watcher sur les change­ments
* lite : Démarrage d'un serveur http lite
* start : Démarrage de la compil­ation avec watcher et du serveur de manière concur­ren­tielle

Les dépend­ances :
* angular2
* systemjs : Permet le chargement dynamique de module
* es6-pr­omise : Promises
* es6-shim : Polyfills permettant d'émuler certaines foncti­onn­alités sur des naviga­teurs non compat­ibles
* reflec­t-m­etadata : Permet d'ajouter des décora­teurs
* rxjs : Reactive Progra­mming
* zone.js : Equivalent des threads locals en Java

Les dépend­ances de dévelo­ppement :
* concur­rently : Pour démarrer des scripts de manière concur­rente
* lite-s­erver
* typescript

Fichier tsconf­ig.json

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

Création d'un composant

import {Component} from "angular2/core";

@Component({
    selector: 'my-app',
    template: '<h1>My first Angular 2 App</h1>'
})
export class AppComponent {}
Les étapes sont :
* Imports
* Décora­teurs
* Classes

Fichier boot.ts

import {bootstrap} from "angular2/platform/browser";
import {AppComponent} from "./app.component";

bootstrap(AppComponent);
Ce fichier permet de booter notre applic­ation. On boote notre composant principal. Attention à bien utiliser angula­r2/­pla­tfo­rm/­bro­wser.

Fichier index.html

<html>

<head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>

</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>

</html>
* Chargement des librairies nécess­aires
* Chargement du module via SystemJS
* Affichage de notre composant

Récapi­tulatif

On créé un nouveau projet vide dans Webstorm.
On créé un fichier packag­e.json pour les dépend­ances.
On créé ensuite un tsconf­ig.json qui va permettre la compil­ation TypeScript en Javascript (Plus précis­ément la transp­ila­tion).
On créé notre composant angular.
On créé ensuite un fichier boot.ts pour gérer le bootstrap de notre applic­ation.
On termine par la création de notre page index.h­tml.

Download the Angular 2 - Démarrer un projet Cheat Sheet

3 Pages
//media.cheatography.com/storage/thumb/kelem_angular-2-demarrer-un-projet.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readability-Score.com is a collection of tools to make your writing better. More readabile content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          AngularJS Cheat Sheet
          AngularUI Router Cheat Sheet