您当前位置：首页 > php框架 > 框架设计 > angular2-meteor 中文文档 Step 0 - 序章

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

来源：程序员人生发布时间：2016-12-15 09:52:22 阅读次数：5523次

我们将以社交利用为例，来开始我们的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）