Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Angular 2 - Démarrer un projet Cheat Sheet by

Etapes pour démarrer un projet Angular 2

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.
 

Metadata

  • Languages:
  • Published: 13th January, 2016
  • Last Updated: 13th May, 2016
  • Rated: 4 stars based on 1 ratings

Favourited By

catchatpas

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