Pengenalan ringkas kepada penggunaan angular2_AngularJS

Mari kita mulakan dari awal dan bina aplikasi AngularJs 2 yang sangat mudah menggunakan Typescript.

Jalankan DEMO dahulu

Jalankan ini DEMOMula-mula, mari kita alami aplikasi AngularJS2.

Berikut ialah struktur fail aplikasi ini

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

Ringkasnya, ia adalah fail index.html dan dua fail Typescript di bawah fail aplikasi.

Di bawah ini kami akan membina program sedemikian langkah demi langkah:

1. Mengkonfigurasi persekitaran pembangunan kami
2. Tulis komponen permulaan sudut
3. Arahkan ia untuk mengawal halaman index.html utama kami
4. Tulis halaman index.html

Persediaan persekitaran pembangunan

Buat folder

mkdir angular2-app
cd  angular2-app

Konfigurasikan TYPESCRIPT

Beberapa tetapan khas diperlukan untuk membimbing Typesript menyusun.
Buat fail tsconfig.json baharu, letakkan dalam direktori akar projek, dan masukkan konfigurasi

{
 "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"
 ]
}

Kami akan menerangkan tsconfig.json ini secara terperinci kemudian dalam lampiran

PENTAIPAN JENIS

Terdapat banyak perpustakaan Javascript yang mewarisi beberapa pembolehubah persekitaran Javascript dan sintaks, tetapi pengkompil Typescript tidak boleh menyokongnya secara asli. Jadi kami menggunakan fail definisi jenis Typescript – fail d.ts (iaitu typings.json) untuk menyelesaikan isu keserasian ini.

Buat fail typings.json dan letakkan dalam direktori akar projek

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

Begitu juga, akan ada penjelasan yang lebih terperinci dalam lampiran

Tambahkan perpustakaan yang kami perlukan

Kami mengesyorkan menggunakan npm untuk mengurus perpustakaan bergantung kami.
Cipta fail package.json dalam direktori akar projek

{
 "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"
 }
}

Dalam lampiran, akan ada penerangan yang lebih terperinci

Untuk memasang pakej pergantungan ini, jalankan sahaja

npm install

Dengan cara ini kami telah menyelesaikan persediaan persekitaran pembangunan kami.

Komponen ANGULAR pertama

Komponen ialah konsep paling asas dalam Angular. Komponen mengandungi paparan – halaman yang kami gunakan untuk memaparkan maklumat atau melengkapkan interaksi pengguna. Secara teknikalnya, komponen ialah kelas yang mengawal paparan templat Banyak komponen akan ditulis dalam membangunkan aplikasi. Ini adalah percubaan pertama kami untuk menulis komponen, jadi kami memastikan untuk memastikannya semudah mungkin.

Buat subdirektori kod sumber aplikasi

Kami sudah biasa meletakkan program kami dalam subdirektori apl direktori akar projek, jadi buat folder apl dahulu

mkdir app
cd  app

Buat fail komponen

Buat fail app.component.ts di bawah folder aplikasi dan masukkan kandungan berikut

import {Component} from 'angular2/core';

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

Mari kita lihat fail ini secara terperinci Dalam baris terakhir fail, kami mentakrifkan kelas.

Kelas komponen

Pada tahap fail ini, kami mencipta kelas komponen kosong AppComponent yang tidak melakukan apa-apa. Apabila kita benar-benar membangunkan aplikasi, kita boleh melanjutkan kelas ini, seperti menambah beberapa sifat dan logik kaedah. Sebab kelas AppComponent ini kosong adalah kerana kita tidak perlu melakukan apa-apa dengannya dalam program permulaan.

Modul

Aplikasi sudut adalah modular. Ia mengandungi banyak fail modul yang melaksanakan fungsi tertentu.
Kebanyakan fail program mengeksport sesuatu seperti komponen. Fail app.component.ts kami mengeksport AppComponent

kelas eksport AppComponent { }
eksport menukar fail kepada modul. Nama fail (tanpa sambungan) biasanya nama modul. Jadi, app.component ialah nama modul pertama kami.

Sesetengah aplikasi yang lebih kompleks akan mempunyai subkomponen yang diwarisi daripada AppComponent, dan akan mempunyai banyak fail dan modul. Tetapi program permulaan pantas kami tidak memerlukan begitu banyak, satu komponen sudah memadai.

Jika komponen bergantung pada komponen lain, dalam aplikasi Typescript, apabila kita perlu memperkenalkan modul lain, kita boleh mengimportnya secara langsung. Contohnya:

import {AppComponent} daripada './app.component'
Angular juga merupakan modul, yang merupakan koleksi modul. Jadi apabila kita memerlukan beberapa fungsi sudut, kita juga memperkenalkan Angular.

Anotasi komponen

Apabila kami menambah anotasi pada kelas, kelas menjadi komponen Sudut. Angular menggunakan anotasi untuk memikirkan cara membina pandangan dan cara komponen disepadukan dengan seluruh aplikasi.

Kami menggunakan kaedah Komponen untuk menentukan anotasi untuk komponen. Kaedah ini memerlukan pengenalan sudut2/teras sebelum ia boleh digunakan.

import {Component} from 'angular2/core';

Dalam Typescript, kami menambah anotasi pada kelas Kaedah anotasi adalah sangat mudah.

@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