Une brève introduction à l'utilisation d'angular2_AngularJS

Commençons de zéro et créons une application AngularJs 2 super simple à l'aide de Typescript.

Lancez d'abord une DÉMO

Exécutez cette DEMOTout d'abord, découvrons l'application AngularJS2.

Ce qui suit est la structure des fichiers de cette application

angular2-app
|_ app
| |_ app.component.ts
| |_ main.ts
|_ index.html
|_ license.md

En résumé, il s'agit d'un fichier index.html et de deux fichiers Typescript sous le fichier app On peut tenir !

Ci-dessous, nous allons construire un tel programme étape par étape :

1. Configurer notre environnement de développement
2. Écrire le composant d'initialisation angulaire
3. Dirigez-le pour contrôler notre page principale index.html
4. Écrire la page index.html

Configuration de l'environnement de développement

Créer un dossier

mkdir angular2-app
cd  angular2-app

Configurer TYPESCRIPT

Certains paramètres spéciaux sont nécessaires pour guider Typesript dans la compilation.
Créez un nouveau fichier tsconfig.json, placez-le dans le répertoire racine du projet et entrez la configuration

{
 "compilerOptions": {
  "target": "es5",
  "module": "system",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
 },
 "exclude": [
  "node_modules",
  "typings/main",
  "typings/main.d.ts"
 ]
}

Nous expliquerons ce tsconfig.json en détail plus tard dans l'annexe

TYPAGES TYPESCRIPT

Il existe de nombreuses bibliothèques Javascript qui héritent de certaines variables d'environnement et de la syntaxe Javascript, mais le compilateur Typescript ne peut pas les prendre en charge de manière native. Nous utilisons donc des fichiers de définition de type Typescript – des fichiers d.ts (c'est-à-dire typings.json) pour résoudre ces problèmes de compatibilité.

Créez le fichier typings.json et placez-le dans le répertoire racine du projet

{
 "ambientDependencies": {
  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
 }
}

De même, il y aura une explication plus détaillée en annexe

Ajoutez les bibliothèques dont nous avons besoin

Nous vous recommandons d'utiliser npm pour gérer nos bibliothèques dépendantes.
Créez un fichier package.json dans le répertoire racine du projet

{
 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
  "start": "concurrent /"npm run tsc:w/" /"npm run lite/" ",  
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "lite": "lite-server",
  "typings": "typings",
  "postinstall": "typings install" 
 },
 "license": "ISC",
 "dependencies": {
  "angular2": "2.0.0-beta.7",
  "systemjs": "0.19.22",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.33.3",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.5.15"
 },
 "devDependencies": {
  "concurrently": "^2.0.0",
  "lite-server": "^2.1.0",
  "typescript": "^1.7.5",
  "typings":"^0.6.8"
 }
}

En annexe, il y aura une explication plus détaillée

Pour installer ces packages de dépendances, exécutez simplement

npm install

Nous avons ainsi terminé la configuration de notre environnement de développement.

Le premier composant ANGULAIRE

Le composant est le concept le plus basique d'Angular. Un composant contient une vue – la page que nous utilisons pour afficher des informations ou compléter l’interaction de l’utilisateur. Techniquement parlant, un composant est une classe qui contrôle une vue modèle. De nombreux composants seront écrits dans des applications en développement. Il s'agit de notre première tentative d'écriture d'un composant, nous avons donc veillé à le garder aussi simple que possible.

Créer un sous-répertoire du code source de l'application

Nous avons l'habitude de placer nos programmes dans le sous-répertoire app du répertoire racine du projet, alors créez d'abord un dossier app

mkdir app
cd  app

Créer un fichier de composant

Créez un fichier app.component.ts sous le dossier app et saisissez le contenu suivant

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

Regardons ce fichier en détail. Dans la dernière ligne du fichier, nous définissons une classe.

Classe de composants

A ce niveau de fichier, nous créons une classe de composant vide AppComponent qui ne fait rien. Lorsque nous développons réellement l'application, nous pouvons étendre cette classe, par exemple en ajoutant des propriétés et une logique de méthode. La raison pour laquelle cette classe AppComponent est vide est que nous n'avons rien à faire avec elle dans le programme de démarrage.

Module

Les applications angulaires sont modulaires. Ils contiennent de nombreux fichiers de modules qui remplissent une certaine fonction.
La plupart des fichiers programme exportent quelque chose comme un composant. Notre fichier app.component.ts exporte AppComponent

classe d'exportation AppComponent { }
les exportations convertissent un fichier en module. Le nom du fichier (sans extension) est généralement le nom du module. Ainsi, app.component est le nom de notre premier module.

Certaines applications plus complexes auront des sous-composants qui héritent d'AppComponent et comporteront de nombreux fichiers et modules. Mais notre programme de démarrage rapide n'en a pas besoin d'autant, un seul composant suffit.

Si un composant dépend d'autres composants, dans les applications Typescript, lorsque l'on a besoin d'introduire d'autres modules, on peut les importer directement. Par exemple :

importer {AppComponent} depuis './app.component'
Angular est également un module, qui est une collection de modules. Ainsi, lorsque nous avons besoin de certaines fonctions angulaires, nous introduisons également Angular.

Annotations des composants

Lorsque nous ajoutons des annotations à une classe, une classe devient un composant angulaire. Angular utilise des annotations pour comprendre comment créer des vues et comment les composants s'intègrent au reste de l'application.

Nous utilisons la méthode Component pour définir des annotations pour un composant. Cette méthode nécessite l'introduction d'angular2/core avant de pouvoir être utilisée.

import {Component} from 'angular2/core';

Dans Typescript, nous ajoutons des annotations aux classes. La méthode d'annotation est très simple. Utilisez @ comme préfixe pour annoter.

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

@Component 告诉Angular这个类是一个组件。 里面的参数有两个, selector 和 template.

selector参数是一个 css 选择器， 这里表示选择 html 标签为 my-app的元素。 Angular 将会在这个元素里面展示AppComponent 组件。

记住这个 my-app 元素，我们会在 index.html 中用到

template控制这个组件的视图， 告诉Angular怎么去渲染这个视图。 现在我们需要让 Angular去加载这个组件

初始化引导

在 app 文件夹下创建 main.ts

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

bootstrap(AppComponent);
我们需要做两个东西来启动这个应用

Angular自带的 bootstrap 方法

我们刚刚写好的启动组件

把这个两个统统 import进来，然后将组件传递给 bootstrap 方法。

附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法，还有为什么会创建一个main.ts文件

现在万事俱备，只差东风啦！

添加 INDEX.HTML 文件

首先回到项目的根目录，在根目录中创建index.html

<html>
 <head>
  <title>Angular 2 QuickStart</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

  <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/main')
      .then(null, console.error.bind(console));
  </script>

 </head>

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

</html>

HMTL中三个部分需要说明一下：

加载我们需要的 javascript库， 附录中会有详细的介绍

配置了 System 并让他import 引入 main 文件

添加 my-app 这个HTML元素，这里才是加载我们Angular实例的地方！

我们需要一些东西来加载应用的模块，这里我们使用 SystemJs。 这里有很多选择，SystemJS不一定是最好的选择，但是这个挺好用。

SystemJs的具体使用不在我们的快速入门教程里，在附录中会有一个剪短的说明。

当Angular调用main.ts文件中的 bootstrap方法， 它读取 AppComponent 的注解，找到 my-app 这个HTML元素， 并将template 渲染进去。

编译然后运行

只需要在终端中输入

npm start

程序将会将Typescript编译成 Javascript ，同事启动一个 lite-server， 加载我们编写的index.html。 显示 My First Angular 2 App.

最终的结构

|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules …
|_ typings …
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json