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

潘青青

2023-12-01

我们将以社交应用为例，来开始我们的Angular 2.0 Meteor 之旅。

在这一章当中，我们将：

安装Meteor，并且创建一个可以正常运行的应用；
熟悉一下应用的结构；
将 Angular 2 作为我们应用的前端部分；
将应用展示在浏览器里。

Meteor的安装

第一步 — 让我们来安装Meteor！

打开你的命令行，然后张贴这行代码

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

如果你是用Windows作为系统，那么点这里去找一个Meteor的安装包再安装。

现在，让我们创建我们的app — 运行下面这行代码：

$ meteor create --example angular2-boilerplate socially

作为替代，你也可以去用你的浏览器去访问下面这条链接：

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

然后下载这个应用的例子，解压里面的文件，重命名文件夹为"socially"，然后把这个文件夹放到你的工作路径下。

（译者注：前提是你安装了git = = ，不然也可以点击github上的Download按钮）

现在让我们看看我们得到了什么。进入到这个新的文件夹中：

$ cd socially

现在，我们安装一下npm的依赖包：

（译者注：前提是你先安装了node和npm）

$ meteor npm install

(备注：关于NPM packages的更多注释在文章的底部可以看到)

然后运行app，就像下面这样：

（译者注：第一次运行可能会慢一点，需要下载一些基础资源，耐心等待一会，如果还是不行，尝试切换一下npm的源，译者一直使用的是淘宝镜像源，安装是成功的）

$ meteor

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

现在，你可以打开 http://localhost:3000/ 看一下这个神奇的应用已经跑在了你的电脑上了！

我们现在有了一个完全可以使用的app了，这个app并且兼顾了前端和后台（以及db数据库）。

在我们的教程里，我们想要添加自己的文件。所以，让我们从删除下面文件夹中所有的内容开始（注意，不是删文件夹，只是删里面的东西）：

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

现在，我们可以开始构建我们的app了。

在client的文件夹中，我们创建一个新的index.html，然后写上下面这些代码，尝试再运行一下这个app。

0.3 Create index.html client/index.html »

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

Meteor的构建工具会自动刷新我们的app，然后在浏览器中显示出来。

要注意这里没有 <html> 标签，也没有 <head> 里面原本要填的众多标签。

这是主要是由于Meteor的工程结构内部为客户端的文件们提供了服务。

Meteor会浏览应用中所有的HTML文件，并且将他们联合在一起，来让我们更加方便地使用。

联合意味着把这些HTML的文件的内容中所有的HTML, HEAD and BODY标签都融合在一起（原文为merge，这个不好翻译，就用融合这个词吧，实际上就是HTML求并集的一种）

因此在我们的例子中，Meteor发现了我们的index.html这个文件，并将其识别为这个文件只会在客户端中使用（因为这个文件在client文件夹内），然后会将BODY标签里面发现的内容取出来，然后添加在主要生成的文件里。

（在Chrome浏览器中，右键点击-查看源码，就可以看到这些页面上生成并服务于客户端的标签内容）

Typescript

无论是客户端还是服务端，一个Angular 2 Meteor app是可以用普通的JavaScript写（ES5），最新的JavaScript（ES2015或者说ES6），以及Typescript等来进行编程。

TypeScript是被Aangular团队推荐的语言，所以我们教程中会使用TypeScript。

不用太担心你并不熟悉TypeScript，无论是ES5或是ES6，TypeScript都有很好的支持，并且我们会在教程中去解释那些我们见识到的新的概念。

如果你想要去深入了解一下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知道我们所有的依赖库中的类型（译者注：有一部分是为了智能提示）。

为了做到这个，我们需要在这个框架中加上完整的类型检查支持 — 我们会使用特殊的工具来完成这个编译检查的安装和管理 — 这个工具叫做typings，你可以通过点击这里查询到相关的更多信息。

如果你仔细观察typings的文件夹，你会发现这里的一个定义文件命名为index.d.ts

这相当于是所有定义文件的主入口，连接着其他定义的文件，并通过 typings来安装运行。

注意，在一些情况下，你的IDE可能会认为你的代码是"error"或者"warning"的，因为他们没有 Typings - 这并不会阻止你运行你的app，只是它会高亮提示你要解决这些错误。

另外为了能够正常使用 typings，建议要安装合适版本的node.js

根组件

Angular 2 的代码基本是以一个组件树作为结构框架的。

每一个组件都是一个视图外加一个绑定的控制器。

（译者注：Angular 1 不是这个概念，但是如果使用过React的话，相信对组件的理解会比较深刻，建议可以先去玩一下 Angular 1 和 React 再来看这个教程也不迟）

既然这是一个树，自然有相应的根组件以及从该组件出发的分支组件。所以让我们试着去创建这个根组件吧。

在 client 的文件夹下，创建一个新的 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 中的一个组件@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空间的一个模块，但是你可能会问，"我们从这个模块中获得了什么？"答案很简单，一个字符串（string）。angular2-compilers会转化html文件里面的内容为字符串（string）

一个组件在没有它的模板时就不能存在，因此我们推荐你以这种字符串的方式使用一个模板，而不是异步的方式来做（templateUrl — 模板链接）

在我们看来，这是创建组件的最好方式。

最后，我们可以 bootstrap 我们的组件，因此，将其视为我们的根组件。

第一件要做的事情就是添加<app/> 到我们的<body/>中：

0.7 添加App组件到index.html中 client/index.html »

<head>

<base href="/">

</head>

<body>

<app>Loading...</app>

</body>

太棒了！不过我们依然需要告诉 Angular 2 这个框架哪个组件需要去被加载：

0.8 Create client-side entry point client/main.ts »

import { bootstrap } from 'angular2-meteor-auto-bootstrap';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

正如你所见，我们使用了angular2-meteor-auto-bootstrap这个包。

这主要是为了让Angular能读懂Meteor，angular2-meteor 引入了这些支持。

添加这些支持给每一个组件是比较麻烦的事情，所以我们使用了一个新的bootstrap，这个bootstrap实际是被angular2-meteor-auto-bootstrap重定义的一个方法，覆盖了原来最基础的来自于@angular/platform-browser-dynamic这个包的bootstrap方法，并且给app添加了一些其他的支持。

好了，让我们来运行这个app：

$ meteor

如果这个模板没有改变，可能是由于你的浏览器缓存了原始的模板。如果想要了解如何禁用开发环境下的Chrome中的缓存，可以点击这里

然后，我们顺利搭建了我们的第一个 Angular 2.0 Meteor app！

让我们再回顾下我们直到现在使用过的一些技术吧：

npm

NPM 也就是 Node Packages Manager，是用来管理你的依赖和额外的包。

Meteor 支持 NPM packages （从1.3版本开始），并且当我们创建一个项目的时候 — 一个名为package.json的文件也被创建出来了，这个文件就包含了这个项目的npm依赖，和一些其他的基础数据。

为了安装这个现有项目的依赖，我们可以在命令行中输入npm install。

我们也同样使用Meteor packages （meteor add ...），Meteor packages有一些npm packages所没有的特性，所以我们使用一些依赖包的时候，也会用这个工具。

ES6模块化 and CommonJS

Meteor在一定程度上支持ES6模块化。

这个特性提供了使用 import / export 的声明的能力，并且给了你对模块加载和依赖的全面控制。

你可以阅读更多资料（例如说 Meteor文档）来了解模块是怎么工作的，以及这个是如何基于CommonJS的。

总结

让我们在 step 1 中继续添加更多的内容到我们的APP里吧。

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

Meteor的安装

Typescript

TypeScript Typings

根组件

npm

ES6模块化 and CommonJS

总结

相关阅读

相关文章

相关问答

相关文档