您當前位置：首頁 > php框架 > 框架設計 > angular2-meteor 中文文檔 Step 0 - 序章

angular2-meteor 中文文檔 Step 0 - 序章

來源：程序員人生發布時間：2016-12-15 09:52:22 閱讀次數：6123次

我們將以社交利用為例，來開始我們的Angular 2.0 Meteor 之旅。

在這1章當中，我們將：

安裝Meteor，并且創建1個可以正常運行的利用；
熟習1下利用的結構；
將 Angular 2 作為我們利用的前端部份；
將利用展現在閱讀器里。

Meteor的安裝

第1步 — 讓我們來安裝Meteor！

打開你的命令行，然后張貼這行代碼

$ curl https://install.meteor.com/ | sh

如果你是用Windows作為系統，那末點這里去找1個Meteor的安裝包再安裝。

現在，讓我們創建我們的app — 運行下面這行代碼：

$ meteor create --example angular2-boilerplate socially

作為替換，你也能夠去用你的閱讀器去訪問下面這條鏈接：

https://github.com/bsliran/angular2-meteor-base

然后下載這個利用的例子，解壓里面的文件，重命名文件夾為"socially"，然后把這個文件夾放到你的工作路徑下。

（譯者注：條件是你安裝了git = = ，不然也能夠點擊github上的Download按鈕）

現在讓我們看看我們得到了甚么。進入到這個新的文件夾中：

$ cd socially

現在，我們安裝1下npm的依賴包：

（譯者注：條件是你先安裝了node和npm）

$ meteor npm install

(備注：關于NPM packages的更多注釋在文章的底部可以看到)

然后運行app，就像下面這樣：

（譯者注：第1次運行可能會慢1點，需要下載1些基礎資源，耐心等待1會，如果還是不行，嘗試切換1下npm的源，譯者1直使用的是淘寶鏡像源，安裝是成功的）

$ meteor

=> Started proxy
=> Started MongoDB.
=> Started your app.
>=> App running at: http://localhost:3000/

現在，你可以打開 http://localhost:3000/ 看1下這個奇異的利用已跑在了你的電腦上了！

我們現在有了1個完全可使用的app了，這個app并且統籌了前端和后臺（和db數據庫）。

在我們的教程里，我們想要添加自己的文件。所以，讓我們從刪除下面文件夾中所有的內容開始（注意，不是刪文件夾，只是刪里面的東西）：

- /client             (delete)
- /both               (delete)
- /server             (delete)

現在，我們可以開始構建我們的app了。

在client的文件夾中，我們創建1個新的index.html，然后寫上下面這些代碼，嘗試再運行1下這個app。

0.3 Create index.htmlclient/index.html ?

<head>
    <base href="/">
</head>
<body>
  Hello World!
</body>

Meteor的構建工具會自動刷新我們的app，然后在閱讀器中顯示出來。

要注意這里沒有 <html> 標簽，也沒有 <head> 里面本來要填的眾多標簽。

這是主要是由于Meteor的工程結構內部為客戶真個文件們提供了服務。

Meteor會閱讀利用中所有的HTML文件，并且將他們聯合在1起，來讓我們更加方便地使用。

聯合意味著把這些HTML的文件的內容中所有的HTML, HEAD and BODY標簽都融會在1起（原文為merge，這個不好翻譯，就用融會這個詞吧，實際上就是HTML求并集的1種）

因此在我們的例子中，Meteor發現了我們的index.html這個文件，并將其辨認為這個文件只會在客戶端中使用（由于這個文件在client文件夾內），然后會將BODY標簽里面發現的內容取出來，然后添加在主要生成的文件里。

（在Chrome閱讀器中，右鍵點擊-查看源碼，就能夠看到這些頁面上生成并服務于客戶真個標簽內容）

Typescript

不管是客戶端還是服務端，1個Angular 2 Meteor app是可以用普通的JavaScript寫（ES5），最新的JavaScript（ES2015或說ES6），和Typescript等來進行編程。

TypeScript是被Aangular團隊推薦的語言，所以我們教程中會使用TypeScript。

不用太擔心你其實不熟習TypeScript，不管是ES5或是ES6，TypeScript都有很好的支持，并且我們會在教程中去解釋那些我們見識到的新的概念。

如果你想要去深入了解1下TypeScript，我們推薦官網的教程。

另外在正式開始之前，我們確認下我們的 tsconfig.json 文件（在根目錄下）有最基本的配置，來確保 Angular 2 Meteor app的正常運行。

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

想要了解更多關于Typescript的編譯配置，點擊這里。

TypeScript Typings

我們需要讓Typescript知道我們所有的依賴庫中的類型（譯者注：有1部份是為了智能提示）。

為了做到這個，我們需要在這個框架中加上完全的類型檢查支持 — 我們會使用特殊的工具來完成這個編譯檢查的安裝和管理 — 這個工具叫做typings，你可以通過點擊這里查詢到相干的更多信息。

如果你仔細視察typings的文件夾，你會發現這里的1個定義文件命名為index.d.ts

這相當因而所有定義文件的主入口，連接著其他定義的文件，并通過 typings來安裝運行。

注意，在1些情況下，你的IDE可能會認為你的代碼是"error"或"warning"的，由于他們沒有 Typings - 這其實不會禁止你運行你的app，只是它會高亮提示你要解決這些毛病。

另外為了能夠正常使用 typings，建議要安裝適合版本的node.js

根組件

Angular 2 的代碼基本是以1個組件樹作為結構框架的。

每個組件都是1個視圖外加1個綁定的控制器。

（譯者注：Angular 1 不是這個概念，但是如果使用過React的話，相信對組件的理解會比較深入，建議可以先去玩1下 Angular 1 和 React 再來看這個教程也不遲）

既然這是1個樹，自然有相應的根組件和從該組件動身的分支組件。所以讓我們試著去創建這個根組件吧。

在 client 的文件夾下，創建1個新的 app.component.ts 文件

0.4 創建App的組件client/app.component.ts ?

import { Component } from '@angular/core'; @Component({ selector: 'app' }) export class AppComponent {}

首先我們從@angular/core這個包中導入我們需要的依賴，

注意，這個組件的選擇器會產生對應的<app>這個標簽，然后我們會把這個標簽提供給index.html中。并且這個視圖模板會創建相應的視圖。

AppComponent這個類，內置于Angular 2 中的1個組件@Component中。

我們已定義了這個組件，讓我們來創建這個組件的模板

0.5 為這個App的組件創建創建其模板client/app.component.html ?

Hello World!

現在，我們在這個組件中使用這個模板：

0.6 引入模板client/app.component.ts ?

import { Component } from '@angular/core';

import template from './app.component.html';

@Component({

selector: 'app',

template

})

export class AppComponent {}

有關模板

得力于angular2-compilers這個依賴包，我們可以引入所有的html文件來作為TypeScript空間的1個模塊，但是你可能會問，"我們從這個模塊中取得了甚么？"答案很簡單，1個字符串（string）。angular2-compilers會轉化html文件里面的內容為字符串（string）