10 天学会 Angular – 第 2 天

Marla Sukesh

4.91/5 (17投票s)

2017年8月3日

CPOL

20分钟阅读

42184

486

开始使用 Angular 的步骤。

下载源代码 - 7.2 KB

所以您终于完成了TypeScript基础知识，并准备好学习Angular。

今天，我们将学习如何开始使用Angular。我们将详细讨论每一个步骤。

完整系列

第 1 天 – 第 1 部分
第 1 天 – 第 2 部分
第 2 天
第 3 天
第 4 天 – 第 1 部分
第4天 - 执行技巧
第 4 天 – 第 2 部分
第 4 天 – 第 3 部分
第 5 天（即将推出）
第 6 天（即将推出）
第 7 天（即将推出）
第 8 天（即将推出）
第 9 天（即将推出）
第 10 天（即将推出）

什么是Angular？

在第1天，我们看到了Angular的基本定义。它如下：

"它是一个用于构建基于HTML的动态应用程序的JavaScript框架"。

我将在本系列结束时解释为什么它被称为框架。

Angular架构

一个Angular应用程序由以下部分组成：

组件

正如我之前所说，Angular允许我们以**面向组件的风格**开发UI应用程序。

**面向组件的风格**是HTML5中提出的一种新的UI设计技术。除了Angular，许多其他主要技术，如React、Polymer也采用了这种方法。

根据这种方法，UI应该被视为可组合和可重用的Web组件的组合。

与其将UI视为一大块HTML，不如将其分解为多个小的逻辑Web组件。每个组件代表我们UI的一小部分。创建组件就像创建新的HTML元素一样。

它将拥有自己独立的生命周期，并且不会影响其他Web组件。

每个组件将是三件事的组合：HTML、一些动态逻辑和样式。

每个组件都将以其逻辑和样式不会影响任何其他组件的逻辑或样式的方式设计。

例如，假设我们要设计以下UI。

在通常的方法中，它是一个简单的HTML文件，但在面向组件的风格中，它是许多组件的组合。让我们找出这些组件。

正如您所看到的，多个组件组合在一起构成了最终的UI。一个名为`RootComponent`的组件将其他组件封装在一起。

如果您对“组件”这个词不是100%清楚，请不要担心，一旦我们开始演示，您会更有信心。

服务

服务是Angular应用程序中可注入的应用程序逻辑。我们将在本系列后面详细探讨它。

管道

管道代表Angular应用程序中的显示值转换逻辑。我们将在本系列后面探讨它。

指令

当我们想要修改DOM元素的默认行为时，将使用指令。我们将在本系列后面探讨它。

Angular模块

组件、指令、服务和管道都封装在Angular模块（又称NgModules）中。它是相关Angular构造的逻辑容器。

一个Angular应用程序可以定义多个Angular模块，其中一个将在开始时进行引导。

注意

总的来说，我们讨论了三种类型的模块。

TypeScript模块、JavaScript模块和Angular模块。它们都是不同的概念，有不同的含义。让我们复习一下它们。

**JavaScript模块**允许我们将JavaScript代码分组到一个逻辑单元中。这将通过模块加载器和模块格式化器完成。
**TypeScript模块**是在Typescript世界中做同样事情的一种方式。当TypeScript模块编译时，我们将得到JavaScript模块作为最终产品。
**Angular模块**是一个Angular概念。Angular模块是所有其他Angular构造（组件、指令、管道和服务）的逻辑父级。我们可以称Angular模块为逻辑封装，而JavaScript模块是物理封装。

创建Angular项目

它有三个步骤

设置项目。
创建根组件。
使用该组件。

设置项目

只需在您的机器上任何地方创建一个新文件夹“AngularProject”。

1. 创建根文件夹

2. 下载Angular框架

为了开始我们的Angular项目，首先我们需要下载框架，它以JavaScript库集合的形式提供。
以下是这些库的列表。

@angular/common
@angular/compiler
@angular/core
@angular/forms
@angular/http
@angular/platform-browser
@angular/platform-browser-dynamic
@angular/router

我们可以使用“`npm`”下载这些文件。它涉及简单的两个步骤。

1. 创建package.json

在“AngularProject”文件夹中创建一个名为“package.json”的新文件，内容如下

{
  "name": "myfistproject",
  "version": "1.0.0"
}

如果您不想手动创建上述文件，请打开命令提示符，导航到“AngularProject”文件夹，然后执行以下命令

NPM init

（请注意，是“`NPM`”而不是“`npm`”。）

它会要求一些命令行输入。

提供包名“`myfirstangularproject`”，然后跳过其他所有内容。

（只需按**Enter**直到它显示“**Is this ok? (yes)**”。）

只需输入“**yes**”并按**Enter**。

它将创建一个名为“*package.json*”的新文件。您可能会注意到文件中除了“`name`”和“`version`”之外还有一些额外的条目。忽略它们即可。

2. 下载文件

在命令提示符中输入以下命令。

npm install @angular/common @angular/core @angular/compiler
@angular/forms @angular/http @angular/platform-browser 
@angular/platform-browser-dynamic
@angular/router --save

它会创建一个名为“*node_modules*”的新文件夹，并将所有文件一次性下载到其中。

注意

所有Angular库都是模块化的。它们都以“UMD”模块格式编写。“UMD”代表通用模块定义，它是一种模块格式化器，兼容“AMD”和“CommonJS”格式。它使“CommonJs”和“AMD”代码都可以与Angular一起使用。

您可能已经注意到随“`npm`”命令传递的额外“`--save`”标志。

它将在“*package.json*”中创建一个名为“`dependencies`”的新条目，如下所示

{
  "name": "myfistproject",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common": "^4.3.1",
    "@angular/compiler": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/forms": "^4.3.1",
    "@angular/http": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/router": "^4.3.1"
  }
}

此文件使将来的重新安装变得非常容易。

下次，只需执行以下命令即可

npm install

它将读取“*package.json*”文件，并根据依赖项部分下载所有内容。

为什么要重新安装？

通常，在部署时，会跳过*node_modules*文件夹以减少设置大小。在服务器机器（安装应用程序的地方）上，只需使用上述命令，所有文件将再次下载。
升级也会更容易。只需更改文件中的版本并执行“`npm install`”命令。

3. 下载其他Angular依赖项

Angular依赖于一些第三方库。它们是Zone.js、Core-js和rxjs。

为了开始使用Angular，您不需要对这些库有详细的了解。

这三个库都由Angular文件内部使用。

**Core-js**：Angular JavaScript文件包含大量ES2015标准代码。将此库包含在我们的项目中，使ES2015代码可以在ES5兼容的浏览器中工作。
**Zone.js**：用于为我们的代码创建执行环境。
**RxJS：**它代表响应式扩展。请不要混淆RxJS和ReactJS。ReactJS是Facebook的UI设计库，而RxJS是用于响应式编程的库。Angular在内部使用此库。我们将在本系列后面看到其中一些的实际应用。

注意

您不需要了解响应式编程或RxJS即可使用Angular构建最复杂的应用程序。

要下载这些文件，请在命令提示符中输入以下命令。

npm install zone.js rxjs core-js --save

4. 安装TypeScript

我们将用TypeScript编写代码。因此我们需要TypeScript编译器。

我们已经在本系列的第1天安装了TypeScript编译器。如果您错过了，可以使用以下命令进行安装

npm install typescript -g

5. 配置TypeScript

在“AngularProject”文件夹中创建一个名为“`TypeScriptFiles`”的新文件夹。

此文件夹将成为我们所有未来TypeScript文件的根文件夹。

现在在此文件夹中创建TypeScript配置文件“tsconfig.json”，内容如下

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

我们已经在第1天讨论了上述每个`CompilerOptions`。

在第1天，我们还讨论了“类型定义文件”，它是一种教TypeScript如何识别外部JavaScript文件的方式。考虑到这一点，我们的下一步将是下载Angular的“类型定义文件”。

好消息是，无需手动下载“类型定义文件”。Angular文件通过“npm”作为包下载，幸运的是，这个包同时包含JavaScript文件和相应的“类型定义文件”。

让我们检查一个文件夹。打开“*node_modules/@angular/platform-browser-dynamic*”文件夹。

6. 设置Web服务器

我们还需要一个简单的Web服务器用于测试。在本系列的第1天，我们演示了“`http-server`”。这次，我们来看看“`lite-server`”。

使用“`npm`”按如下方式安装它

npm install lite-server -g

7. 下载模块加载器

在第1天，我们讨论了模块格式化器和模块加载器。

我们已经看到了两个演示

JavaScript模块与AMD + SystemJs演示
TypeScript模块演示

（如果您错过了其中任何一个，我强烈建议您在继续之前先了解一下。）

如果您还记得第二个演示，我们使用“`node`”命令在“`Node`”环境中执行了生成的JavaScript，令我们惊讶的是，该演示在没有任何模块加载器的情况下工作。原因很简单。“`Node`”内置支持“`CommonJS`”格式，这是TypeScript的默认模块格式化器。

我们的Angular项目将遵循“`CommonJS`”格式，但执行环境将是浏览器。因此，这次我们需要模块加载器。

在命令提示符中执行以下命令

npm install systemjs --save

至此，我们完成了设置过程

总结一下，您应该拥有以下内容

“*AngularProject*”文件夹
“*AngularProject*”文件夹内的“*TypeScriptFiles*”文件夹。

“*TypeScriptFiles*”文件夹内的“*tsconfig.json*”文件，内容如下

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

“*AngularProject*”文件夹内的“*package.json*”，内容如下

{
  "name": "myfistproject",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common": "^4.3.1",
    "@angular/compiler": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/forms": "^4.3.1",
    "@angular/http": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/router": "^4.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "systemjs": "^0.20.17",
    "zone.js": "^0.8.14"
  }
}

创建根组件

如果您还记得Angular架构，UI是由Angular组件树组成的——一个组件放置在另一个组件旁边，两者都可能被一个外部组件封装，依此类推。这种组件层次结构始于一个根组件。

以下是创建这种根组件的步骤。

创建Angular模块
创建Angular组件
将组件添加到模块
引导模块
引导组件

1. 创建Angular模块

正如我之前所说，Angular中的一切都属于某个Angular模块。同样的规则也适用于根组件。所以是时候创建我们的第一个Angular模块了。

这可以通过创建一个用“`NgModule`”装饰器装饰的TypeScript类来完成。

什么是NgModule？

“`NgModule`”是“`@angular/core`”库中定义的装饰器。为了使用它，我们首先需要像这样导入它

import {NgModule} from
"../../node_modules/@angular/core/core"

您还记得我们在第1天讨论过的“`moduleResolution`”选项吗？

（如果您错过了或者无法回忆起来，我强烈建议您再次仔细阅读。）

根据我们在第1天的解释，当“`moduleResolution`”设置为“`node`”时，我们可以将上述语句改写为以下形式

import {NgModule} from "@angular/core"

创建模块

首先，在“*TypeScriptFiles*”文件夹中创建一个名为“*AppModule*”的新文件夹。

然后创建一个名为“*app.module.ts*”的新TypeScript文件，内容如下

import {NgModule} from "@angular/core"
@NgModule()
class AppModule{

}

2. 创建Angular组件

最后，我们到了创建第一个Angular组件的时候。这可以通过创建一个用“`Component`”装饰器装饰的类来完成，该装饰器定义在“*@angular/core*”库中。

创建一个名为“*app.component.ts*”的新TypeScript文件，其中包含以下代码片段

import {Component} from "@angular/core"

@Component({
selector:'app-component',
template:`<h1>Welcome to Learn Angular in 10 days series</h1>
<i>Here is the Day 2</i>`
}
)
class AppComponent{

}

您可以看到传递给“`Component`”装饰器的两个参数。

`selector`——表示组件标签名称的简单文本
`template`——组件的UI部分

现在不需要担心这两个属性。您很快就会看到它们的作用。

3. 将组件添加到模块

这可以通过`NgModule`装饰器中的“`declarations`”选项来完成。

检查以下代码

import {NgModule} from "@angular/core"
@NgModule({
    declarations:[AppComponent] //New statement
})
class AppModule{

}

（检查上面代码的第4行，新增了一个“`declarations`”部分。）

我们是不是漏掉了什么？

我们是不是忘记了什么？在继续阅读下一行之前，请先思考一分钟。

我们忘记了TypeScript模块。`AppComponent`和`AppModule`都是在独立的TypeScript文件中编写的，因此它们都将被视为独立的TypeScript模块。我们必须在*app.component.ts*中导出`AppComponent`，并在“*app.module.ts*”中导入它。

所以这是最终的代码。

app.module.ts

import {NgModule} from "@angular/core"
import {AppComponent} from "./app.component"
@NgModule({
    declarations:[AppComponent]
})
class AppModule{

}

app.component.ts

import {Component} from "@angular/core"
@Component({
selector:'app-component',
template:`<h1>Welcome to Learn Angular in 10 days series</h1>
<i>Here is the Day 2</i>`
}
)
export class AppComponent{

}

4. 引导模块

正如我一开始所说，一个Angular应用程序可能定义了多个Angular模块，但只有其中一个会在开始时被引导。与AngularJS不同，这个引导过程必须借助“`@angular/platform-browser-dynamic`”库中定义的“`platformBrowserDynamic`”函数手动完成。

首先，将`export`关键字附加到`AppModule`类。它允许我们在另一个文件中导入它。

...
export class AppModule{
...

然后在“*TypeScriptFiles*”文件夹中创建一个名为“*Main.ts*”的新文件，内容如下

import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"
import {AppModule} from "./AppModule/app.module"
platformBrowserDynamic().bootstrapModule(AppModule);

Angular不仅限于在浏览器中工作。它可以使用Ionic或类似的框架来编写可在移动设备上执行的代码。这就是为什么我们需要告诉Angular我们希望它如何引导自身，在我们的例子中，我们在浏览器中运行，所以我们使用`platformBrowserDynamic`函数来引导我们的应用程序。

5. 引导组件

在本系列的后期，您将看到更多具有一个以上组件的新模块。对于这个初始演示，我们将坚持使用一个模块和一个组件。

现在的问题是，如果一个Angular模块将包含多个组件，Angular如何识别根组件。

这可以通过在“`NgModule`”装饰器中使用“`bootstrap`”选项来完成。

检查以下代码

...
import {AppComponent} from "./app.component"
@NgModule({
    declarations:[AppComponent],
    bootstrap:[AppComponent]
})
export class AppModule{
...

6. 编译

打开命令提示符，导航到“*TypeScriptFiles*”文件夹，然后执行“`tsc`”命令。

它应该能成功编译。

[如果在编译过程中遇到任何错误，我强烈建议您再次仔细检查上述步骤，阅读每一条语句，并在成功之后再继续。]

使用组件

现在终于到了在实际Web应用程序中使用上面创建的组件的时候了。

1. 创建HTML文件

我们的第一步将是创建启动HTML文件。在“*AngularProject*”文件夹中创建一个简单的HTML文件“*Index.html*”。

2. 包含非模块化脚本文件

在“*index.html*”中包含以下三个JS文件。

zone.js
shim.min.js（即`core-js`库）
system.src.js

最终的HTML如下所示

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
  </head>
  <body>
  </body>
</html>

3. 加载Main.js文件

在“*index.html*”中使用`SystemJs`加载器加载*Main.js*文件。请查看以下代码

...    
    <script>  
      SystemJS.import("/TypeScriptFiles/Main.js");
    </script>
</head>
<body>
...

无需包含任何其他JS文件。所有必要的文件将由我们的模块加载器 (SystemJs) 在运行时根据需要自动加载。

*Zone.js*、*shim.min.js*和*system.src.js*是手动包含的，因为它们不包含模块化代码（它们不遵循任何模块格式化器）。因此，模块加载器将无法在运行时加载它们。
*Main.js*是我们的启动文件。它是一个入口点。因此，它需要手动包含。

4. 使用根组件

在“*index.html*”中将根组件的选择器（“`app-component`”）用作标签，如下所示

    </script>
  </head>
  <body>
      <app-component>Component is Loading.....</app-component>
  </body>
</html>

5. 执行

打开命令提示符。导航到文件夹“*AngularProject*”。现在执行“`lite-server`”，如下所示

它将在本地机器（默认端口号3000）启动一个服务器，指向“*AngularProject*”文件夹。
启动浏览器（Internet Explorer），访问托管URL（https://:3000）。
（我建议您使用相同的URL打开Chrome。在JavaScript调试方面，Chrome会使我们的工作更轻松。）
默认情况下，lite-server会在根文件夹中执行“*index.html*”，所以我们需要在地址栏中输入文件名。

注意

我建议您使用两个不同的命令提示符。一个指向“*TypeScriptFiles*”文件夹，用于编译TypeScript文件。第二个用于“`lite-server`”。这会让您的生活更轻松，并且不会让您专注于学习。

6. 检查输出

不幸的是，第一次我们无法得到预期的输出。我们得到如下内容

Bug和解决方案

1. 识别Bug

为了找出未得到预期输出的原因，请打开浏览器中的开发人员工具，并检查是否有任何JavaScript错误。（在Chrome中，您可以按**F12**获取开发人员工具，然后检查控制台选项卡中的JavaScript错误。）

如您所见，有四个错误。让我们集中关注第一个错误。

错误与加载“`@angular/platform-browser-dynamic`”有关。

理解问题

在我们的例子中，SystemJs（模块加载器）负责在运行时加载其他文件。这意味着SystemJs无法找到“`@angular/platform-browser-dynamic`”。

有两件非常奇怪的事情发生了。

“*@angular*”是“*node_modules*”文件夹中的一个文件夹，其中有一个名为“*platform-browser-dynamic*”的子文件夹。这意味着SystemJs正在尝试加载文件夹。模块加载器旨在动态加载JS文件，在我们的案例中，它正在尝试加载文件夹。
其次，*@angular*文件夹存在于“*node_modules*”文件夹中，但SystemJs正在根文件夹中搜索它。（仔细检查错误，它显示“`Failed to load ‘:3000/@angular/platform-browser-dynamic’_`”）。

打开“*main.js*”文件。它包含以下代码

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
var app_module_1 = require("./AppModule/app.module");
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);

如果您还记得，我们在TypeScript文件中编写了以下语句。

import {NgModule} from ("@angular/platform-browser-dynamic"

因此，生成的JS文件包含以下语句

var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");

它应该如下所示

var platform_browser_dynamic_1 = 
require("/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js");

问题解决方案

解决方案是“教学”。您必须教SystemJs，加载“*@angular/platform-browser-dynamic*”意味着加载“*/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js*”。事实上，我们必须为每个Angular库都这样做。这可以通过创建SystemJs配置文件来完成。

2. 配置System JS

在“*AngularProject*”文件夹中创建一个新的JS文件，并将其命名为“*system.config.js*”。

现在将以下内容放入其中。

(function (global) {
  System.config({
    map: {
      '@angular/core': '/node_modules/@angular/core/bundles/core.umd.js',
      '@angular/common': '/node_modules/@angular/common/bundles/common.umd.js',
      '@angular/compiler': '/node_modules/@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 
      '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 
      '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': '/node_modules/@angular/http/bundles/http.umd.js',
      '@angular/router': '/node_modules/@angular/router/bundles/router.umd.js',
      '@angular/forms': '/node_modules/@angular/forms/bundles/forms.umd.js',
    }
  });
})(this);

在“*index.html*”中，在*system.src.js*之后、*main.js*之前包含上述文件，如下所示

    <script src="/node_modules/systemjs/dist/system.src.js"></script>
    <script src="system.config.js"></script>
    <script>  
      SystemJs.import("/TypeScriptFiles/Main.js");
    </script>

3. 重新检查输出

lite-server非常智能。它会监视“*TypeScriptFiles*”文件夹中的所有文件，并在任何文件发生更改时自动刷新浏览器。

在包含“*system.config.js*”文件后检查输出。

这次，您将得到以下错误

理解问题

花点时间，尝试思考一下这个错误的原因。

仔细检查错误。路径正确，文件名错误。它正在寻找一个名为“*app.module*”的文件，我们没有。我们有“*app.module.js*”。

此问题的解决方案

解决方案仍然是“教学”。我们必须教SystemJs为所有请求添加默认扩展名。

4. 重新配置System JS

为“*system.config.js*”添加更多设置，如下所示

(function (global) {
  System.config({
    map: {
      '@angular/core': '/node_modules/@angular/core/bundles/core.umd.js',
      '@angular/common': '/node_modules/@angular/common/bundles/common.umd.js',
      '@angular/compiler': '/node_modules/@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 
      '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 
      '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': '/node_modules/@angular/http/bundles/http.umd.js',
      '@angular/router': '/node_modules/@angular/router/bundles/router.umd.js',
      '@angular/forms': '/node_modules/@angular/forms/bundles/forms.umd.js',
    },
     packages: {
      'TypeScriptFiles': {
        defaultExtension: 'js'
      }
    }
  });
})(this);

检查上面的新包部分。

它包含一个条目，用于指示SystemJs为“*TypeScriptFiles*”文件夹中所有文件的请求添加“*js*”扩展名。

5. 重新检查输出

这次的错误如下

再次，就像之前一样，根文件夹被考虑了，而不是“`node_modules`”。

但这次。在SystemJs的映射部分添加一个条目并不能解决问题，因为“`rxjs`”是一个大型库。它包含大量的JavaScript文件。其中两个是“*Observable.js*”和“*Subject.js*”。

我们必须为这样一个JavaScript文件添加一个条目。例如，对于上述错误，我们在map部分有以下条目

"rxjs/Observable": "/node_modules/rxjs/Observable.js"

**注意**：不要将上述条目添加到“*system.config.js*”中。

6. 重新配置System JS

为每个文件添加一个条目工作量太大，所以我们用一种快捷方式。我们将同时使用“`map`”和“`packages`”来实现它。

(function (global) {
  System.config({
    map: {
      '@angular/core': '/node_modules/@angular/core/bundles/core.umd.js',
      '@angular/common': '/node_modules/@angular/common/bundles/common.umd.js',
      '@angular/compiler': '/node_modules/@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 
      '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 
      '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': '/node_modules/@angular/http/bundles/http.umd.js',
      '@angular/router': '/node_modules/@angular/router/bundles/router.umd.js',
      '@angular/forms': '/node_modules/@angular/forms/bundles/forms.umd.js',

      'rxjs':'/node_modules/rxjs',
    },
     packages: {
      'TypeScriptFiles': {
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

如您所见，现在“`map`”和“`packages`”部分都有了新的条目。

7. 重新检查输出

这次的错误将非常不同。

这次错误是关于一个叫做“`BrowserModule`”的东西。

“`BrowserModule`”是“`@angular/platform-browser`”库中定义的Angular模块，它包含启动浏览器应用程序所需的各种服务。

8. 加载BrowserModule

我们可以通过在“`NgModule`”装饰器中使用“`import`”选项，使“`BrowserModule`”在“`AppModule`”引导时加载。这是完整的`AppModule`重构代码。

9. 重新检查输出

这次，我们对TypeScript文件进行了更改，需要重新编译。

重新编译并检查输出。

最终，我们的第一个Angular输出就在这里了。

我请您一步一步尝试所有上述步骤。只有在正确理解错误之后才实施解决方案。只有在您对第1天和第2天感到自信之后，才能继续本系列。

重构步骤

以上步骤从学习角度来看非常重要。它将为您提供关于Angular项目内部结构的一个很好的概念，并使得根据需要自定义项目结构变得容易。

如果您有兴趣一次性完成，请遵循以下步骤。（在实际项目中首选的方式）

完整执行过程

步骤 1

浏览器渲染“*index.html*”文件中的内容。在这种情况下，“`app-component`”标签将是一个简单的HTML标签并按原样显示。在我们的例子中，它将显示“`Component is Loading.....`”消息。

步骤 2

“*zone.js*”、“*shim.min.js*”、“*system.src.js*”和“*system.config.js*”将被下载。

步骤 3

“*main.js*”文件将由SystemJs加载器加载。它反过来会动态加载其他必要的Angular和非Angular JavaScript文件。

步骤 4

“*main.js*”包含一个可执行语句，它将引导AppModule。

步骤 5

引导AppModule会导致`AppComponent`的引导。Angular将创建一个`AppComponent`类的新实例，并在“*index.html*”文件中搜索`AppComponent`的选择器（即“`app-component`”）。

如果“*index.html*”不包含`AppComponent`选择器，则会引发以下错误。

在我们的案例中，我们有它。所以组件的模板将简单地显示在“`app-component`”的位置。

开发Angular应用程序的其他方式

还有两种开发Angular应用程序的方法。

从以下链接下载快速启动项目
https://github.com/Angular/quickstart/archive/master.zip

它包含了几乎所有为您配置好的东西。
使用Angular CLI – Angular CLI是一个命令行界面，我们可以使用它快速轻松地创建Angular项目。
我们将在未来的文章中详细演示Angular CLI。

说到学习，我个人更喜欢手动方式。我遵循一个简单的哲学：“学习中遇到的错误越多，生产中遇到的错误就越少。”

需要考虑的重要事项

TypeScript编译器可以以监视模式启动。只需在命令提示符中执行“`tsc –w`”命令。它将编译所有现有的TypeScript文件，并监视文件夹及其所有子文件夹。任何时候，任何TypeScript文件发生更改，它都会立即重新编译。
对于我们的演示，我们使用了“`lite-server`”来创建Web服务器。您也可以选择任何其他服务器。这是您的选择。
现在最重要的一点——高效地利用您的编辑器和环境。尽量充分利用您的开发环境。
1. 许多现代编辑器，如Visual Studio和Visual Studio Code、WebStorm都支持TypeScript，因此它们为语法提供了丰富的智能感知支持。所以请明智地选择您的编辑器。对于本系列，我使用的是Visual Studio Code，可以从https://vscode.js.cn/下载。
2. 检查您的编辑器是否内置支持TypeScript编译。例如，Visual Studio支持。在这种情况下，您可以跳过整个TypeScript安装和TypeScript配置步骤。
3. 检查您的编辑器是否内置了用于测试的轻量级Web服务器。例如，Visual Studio提供了IIS Web Express。在这种情况下，您可以忽略“`lite-server`”或其他Node服务器。

注意

目前，为了保持同步，我建议您使用我正在使用的相同编辑器和工具。完成整个系列后，您可以在自己的编辑器和环境中尝试。

总结

所以，终于，我们的第2天完成了。

多次练习，不要急于跳到下一天。一旦您感到舒适并有信心，就可以进入第3天。

敬请期待！

历史

2017年8月3日：初始版本

10 天学会 Angular – 第 2 天

完整系列

目录

什么是Angular？

Angular架构

组件

服务

管道

指令

Angular模块

创建Angular项目

设置项目

2. 下载Angular框架

1. 创建package.json

2. 下载文件

为什么要重新安装？

3. 下载其他Angular依赖项

4. 安装TypeScript

5. 配置TypeScript

6. 设置Web服务器

7. 下载模块加载器

创建根组件

1. 创建Angular模块

什么是NgModule？

创建模块

2. 创建Angular组件

3. 将组件添加到模块

我们是不是漏掉了什么？

app.module.ts

app.component.ts

4. 引导模块

5. 引导组件

6. 编译

使用组件

1. 创建HTML文件

2. 包含非模块化脚本文件

3. 加载Main.js文件

4. 使用根组件

5. 执行

6. 检查输出

Bug和解决方案

1. 识别Bug

理解问题

问题解决方案

2. 配置System JS

3. 重新检查输出

理解问题

此问题的解决方案

4. 重新配置System JS

5. 重新检查输出

6. 重新配置System JS

7. 重新检查输出

8. 加载BrowserModule

9. 重新检查输出

重构步骤

完整执行过程

步骤 1

步骤 2

步骤 3

步骤 4

步骤 5

开发Angular应用程序的其他方式

需要考虑的重要事项

总结

历史