首頁 > 文章 > web前端 > angular2使用簡單介紹_AngularJS

angular2使用簡單介紹_AngularJS

WBOY原創: 2016-05-16 15:12:421179瀏覽

讓我們從零開始，使用Typescript建立一個超級簡單的 AngularJs 2應用程式。

先跑一個DEMO

運行這個 DEMO先來感受一下 AngularJS2 的應用。

以下是這個應用的檔案結構

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

總結來說就是一個 index.html 文件和兩個在 app 文件下的 Typescript 文件，我們可以hold住！

下面我們將一步一步的建構這樣的一個程式：

設定我們的開發環境
寫 Angular 初始化元件
引導它控制我們主要的 index.html 頁面
寫index.html 頁面

開發環境搭建

建立資料夾

mkdir angular2-app
cd  angular2-app

配置TYPESCRIPT

需要透過一些特殊的設定來指導Typesript進行編譯。
新建一個 tsconfig.json 文件，放於專案根目錄下，輸入設定

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

我們稍後在附錄中會詳細解說這個 tsconfig.json

TYPESCRIPT TYPINGS

有很多Javascript的函式庫，繼承了一些 Javascript的環境變數以及語法， Typescript編譯器並不能原生的支援這些。所以我們使用 Typescript 類型定義檔 – d.ts 檔案（即 typings.json）來解決這些相容性問題。

建立 typings.json 文件，放於專案根目錄下

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

同樣的，在附錄中會有更詳細點的解釋

加入我們需要的函式庫

我們推薦使用npm來管理我們的依賴函式庫。
在專案根目錄下建立package.json檔案

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

在附錄中，會有更詳細的解釋

安裝這些依賴套件只需要運作

npm install

這樣我們就完成了我們的開發環境的建造。

第一個ANGULAR 組件

組件是Angular中最基本的一個概念。一個元件包含一個視圖 – 我們用來展示資訊或完成使用者互動的頁面。技術上來講，一個元件就是一個控制模板試圖的類，在開發應用中會寫很多元件。這是我們第一次嘗試寫一個組件，所以我們保證他盡可能的簡單。

建立一個應用程式原始碼的子目錄

我們習慣上將我們的程式放在專案根目錄下的 app 子目錄下，所以先建立一個 app 資料夾

mkdir app
cd  app

建立元件檔案

在 app 資料夾下建立一個 app.component.ts 文件，然後輸入以下內容

import {Component} from 'angular2/core';

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

讓我們來詳細的看一下這個文件，在文件的最後一行，我們定義了一個類別。

組件類別

在這個檔案地步，我們建立了一個啥都不做的空元件類別 AppComponent。當我們真正開發應用的時候，我們可以擴展這個類別，例如添加一些屬性和方法邏輯。這個 AppComponent 類別之所以為空是因為我們在入門程式中他不用做任何事。

模組

Angular應用是模組化的。他們包含許多完成某項功能的模組檔案。
大多數程式檔案會 export出一個東西例如一個元件。我們的 app.component.ts 檔案 exports出了 AppComponent

export class AppComponent { }
exports使一個檔案轉變成一個模組。檔案名稱（不包含副檔名）通常就是這個模組的名稱。所以， app.component 就是我們的第一個模組的名稱。

一些較複雜的應用程式會有繼承於 AppComponent 的子元件，而且會有很多檔案和模組。但是我們的快速入門程式不需要這麼多，一個元件就夠了。

如果一個元件依賴其他的元件，在Typescript應用中，當我們需要引入其他模組的時候，直接import進來就可以使用。例如：

import {AppComponent} from './app.component'
Angular 同樣是一個模組，他是一系列模組的集合。所以當我們需要angular的一些功能時，同樣的把Angular引入進來。

組件註解

當我們給一個類別加上註解的時候，一個類別就變成了 Angular的元件。 Angular 需要透過註解來搞清楚怎麼去建構視圖，還有元件是怎麼與應用程式的其他部分整合的。

我們用 Componet 方法定義一個元件的註解，這個方法需要引入 angular2/core 才可以使用。

import {Component} from 'angular2/core';

在Typescript中，我們在類別上加上註解，註解的方式很簡單，使用 @ 作為前綴來註解。

@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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery自訂右鍵選單、全選、不連續選擇_jquery下一篇：jquery自訂右鍵選單、全選、不連續選擇_jquery

看更多

angular2使用簡單介紹_AngularJS

相關文章