65.9K
CodeProject 正在变化。 阅读更多。
Home

开始使用 Angular2 - 第 2 部分

Afreen F
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.10/5 (5投票s)

2017年2月28日

CPOL

6分钟阅读

viewsIcon

18138

背景

这是对文章《Angular2 入门 - 第一部分》的延续。在第一部分中，我们学习了如何为 Angular2 应用程序做好环境准备。在本文中，我们将开始编写一个简单的“Hello World”应用程序，并在接下来的文章中尝试添加更多功能。 

入门

现在，让我们开始构建我们的“Hello World”应用程序。首先，我们将在项目文件夹中创建一个 HTML 文件，例如 index.html，并在其中添加应用程序所需的脚本和 CSS 引用，并编写我们的自定义 Angular 指令。

是的，你没有看错，“自定义 Angular 指令”。对于刚接触这项技术的新程序员来说，心中可能有一个问题：“这个指令是什么意思？”

那么，让我们来理解一下这里的“指令”是什么意思。简单来说，我们知道很多 HTML 元素或标签，比如 <p>、<h1> 等。所有这些标签都有一些预定义的。功能。例如，如果浏览器遇到 <h1> 标签，它会将其理解为具有特定字体大小的标题元素，并相应地在浏览器中显示。同样，如果我们想创建具有某种定义的自定义元素并在我们的应用程序中重用该自定义元素，该怎么办？

这个自定义元素称为指令。Angular JS 1.x 和 Angular2 在创建指令方面有不同的方式，在本文中我们将专注于 Angular2。我们将在 index.html 文件中使用 Angular 指令。

现在回到我们的 index.html 文件。 让我们添加一些旧浏览器所需的 polyfill。我还添加了 bootstrap.css 以获得更好的 UI。

<html>
  <head>
    <title>Angular 2 Sample</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <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/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
  </head>
  <!-- 3. Display the application -->

  <body>
       <my-app>Loading...</my-app>
  </body>
</html>

请注意，我在 <body> 标签下添加了自定义的 Angular 指令<my-app>。该标签的定义将在组件中编写，并放置在 TypeScript 文件中（即扩展名为 .ts 的文件）。

目前，该标签的内容是“Loading…”，它将在实际定义加载之前显示在浏览器中。

那么，让我们在下面的步骤中创建我们的第一个组件。

步骤 1：- 创建一个合适的文件夹结构

在项目文件夹 ‘Angular2-Sample’ 中创建一个名为 ‘app’ 的文件夹。在此文件夹中，我们将放置包含逻辑的 TypeScript 文件。 

在直接进入代码之前，让我们先了解一下 ‘app’ 文件夹名称的意义。

为此，如果我们查看 systemjs.config 文件，对于 ‘app’ 关键字（参见下面从 systemjs.config 文件中提取的内容），该文件夹被映射到 ‘app’ 文件夹。

var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

如果我们想重命名我们的 ‘app’（参见下面从 systemjs.config 文件中提取的内容），那么我们也需要修改 systemjs.config 文件。默认映射名称为 ‘app’。

接下来，在我们的代码中，当我们引用路径为 ‘@angular/core’ 时，它会将路径映射到 ‘node_modules/@angular/core’。

步骤 2 - 定义组件

现在，让我们创建我们的第一个组件，并将文件保存为扩展名为.ts的文件。对于包含组件的文件，标准的命名约定是 someName.component.ts。让我们将文件命名为 ‘app.component.ts’，并将其放置在 ‘app’ 文件夹下。

我们将类命名为 AppComponent。

export class AppComponent{

}

在此类中，我们编写了我们的视图或 HTML 页面所需的属性和方法。关键字 ‘export’ 使组件模块化，或者说我们可以通过导入此类名来在其他文件中使用此类。应用程序的第一个组件也称为根组件。

接下来，我们在 AppComponent 类上方编写组件的元数据，如下所示：

@Component({
           selector: ’my-app’,
           template:’<h1>Hello World, Welcome to Angular2</h1>’
})

然后，由于关键字 ‘Component’ 定义在 @angular/core 模块中，我们将添加其引用，如下所示：

import {Component} from ‘@angular/core’;

因此，app.component.ts 中的代码如下所示：

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

@Component({
        selector:’my-app’,
        template:’<h1>Hello World, Welcome to Angular2</h1>’
})

export class AppComponent{               

}

还记得 index.html 页面中的 <my-app> 标签吗？当 Angular 编译器遇到这个标签时，它会将标签内容 ‘Loading…’ 替换为 ‘template’ 中的内容<h1>Hello World, Welcome to Angular2</h1>，浏览器会显示相同的内容作为输出。

如果我们回顾一下我们文章开头定义的组件的定义《Angular2 入门 - 第一部分》

组件 = 类 + 元数据 + 模板。

步骤 3 - 在 main.ts 文件中初始化组件

此时，我们已经创建了 index.html 和 app.component.ts 文件。Index.html 包含自定义标签，并在 app.component.ts 文件中定义了它。现在，让我们引导或初始化我们的根组件，即 AppComponent。

为此，在同一个 ‘app’ 文件夹下，在新文件 ‘main.ts’ 中，我们编写：

bootstrap(AppComponent)

由于 bootstrap 关键字定义在 @angular/platform-browser-dynamic 中，而 AppComponent 类定义在 ./app.component 中，我们将像下面这样导入这些文件，并将它们放在文件顶部。

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';

步骤 4 - 在 Index.html 文件中添加引用

所以，我们已经创建了文件：index.html、app.component.ts、main.ts。

由于 main.ts 文件包含初始化代码，我们将它的引用添加到 index.html 文件中，形如 System.import(‘app/main’)，

<script>
      System.import('app/main').catch(function(err){ console.error(err); });
</script>

由于 System.import 定义在 systemjs.config 文件中，我们将这个文件的引用添加到 index.html 文件中，如下所示：

<script src="systemjs.config.js"></script>

让我们来总结一下

  1. 我们在 index.html 中使用了指令  <my-app>Loading… </my-app>

  2. 在 app.component.ts 中定义了 <my-app> 标签的定义（在组件中）。

  3. 然后，为了初始化根组件，即 AppComponent，我们在 main.ts 文件中编写了 bootstrap(AppComponent)。

  4. 然后，在 index.html 中引用了 main.ts 文件，如 System.import(‘app/main’)。还在 index.html 中添加了 Systemjs.config 的引用路径。

在图中，您可以看到我们应用程序的文件夹结构，它被绿色边框突出显示。

Folder Structure

步骤 5 - 执行我们的应用程序

现在，让我们执行我们的应用程序。

从命令提示符，导航到我们的应用程序文件夹（index.html 所在的文件夹），或者如果您使用 ‘Visual Code’ 作为编辑器，则可以右键单击 index.html 文件，然后选择 ‘open with command prompt’ 选项直接导航到所需文件夹。

然后，在命令提示符中，执行命令 npm start

这将启动服务 tsc（TypeScript 编译器）并同时运行两个服务：以监视模式运行的 npm run ‘npm run tsc:w’ 和以精简模式运行的 npm run ‘npm run lite’。服务 tsc -w 将 TypeScript 代码编译成 JavaScript 并以监视模式运行，因此，如果对应用程序进行了任何更改并保存，它将自动检测更改并在浏览器上显示更新的输出（无需手动刷新浏览器）。

请查看截图以查看 npm 服务。如果代码没有错误，您将看到所需的结果，如果代码包含任何错误，错误消息将显示在命令提示符中，并将错误写入 npm 日志文件。

npm Services

输出

我们的代码已成功执行，您可以在浏览器中看到“Hello World”的输出。

Output

结论

到目前为止，我们已经了解了如何在 Angular2 中编写一个简单的 Hello World 应用程序。 在下一篇文章中，让我们向应用程序添加更多 Angular2 的概念，并在过程中学习更多新概念。

© . All rights reserved.