阅读5分钟快速入门时的备忘录

2 年 ago
雅, 悟
3 minutes

这是我阅读 https://angular.io/docs/ts/latest/quickstart.html 的文档时所做的一些笔记，只阅读了我感兴趣的部分，并不一定完全准确，请注意…。

学习

听起来下一步可以制作应用程序。

    • 開発環境を整える

 

    • AngularのRoot componentを作成する

 

    • Root componentを表示するためにmain.tsを作成する

 

    ホストとなるWeb page(index.html)を作成する

开发环境

為了建立開發環境，需要以下的步驟。

    • nodeとnpmをインストールする

 

    • TypeScriptコンパイラのために、tsconfig.jsonを追加する

 

    • 不足しているTypeScriptの定義ファイルを同定するためにtypings.jsonを追加する

 

    • package.jsonを追加する

 

    npmパッケージとtypingsファイルをインストールする

安装node和npm。

从此处下载Node.js并进行安装。

另外，也要创建一个项目文件夹。

mkdir angular2-quickstart
cd    angular2-quickstart

添加 tsconfig.json、typings.json 和 package.json。

在项目文件夹中创建一个名为tsconfig.json的文件，并进行复制黏贴。该文件用来指示TypeScript编译器的编译步骤。

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

同样地，添加 typings.json。


{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
  }
}

许多JavaScript库使用了TypeScript编译器无法识别的扩展。为了让TypeScript编译器识别这些扩展，需要准备一个文件，即d.ts文件，并为此创建typings.json文件。

另外，添加package.json文件。

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "systemjs": "0.19.26",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.10"
  },
    "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.7.12"
  }
}

在scripts部分写下了非常有用的命令。例如，运行npm run tsc会执行一次TypeScript的编译，而运行npm run tsc:w会监视文件，并等待文件更新后执行TypeScript的编译。

只需要运行npm install即可。

我们第一个的Angular组件

暂时先制作一个超级简单的应用程序。离开根目录，创建一个名为app的子文件夹，并将其设为当前目录。

mkdir app
cd app

接下来，添加组件文件。

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

AppComponent是应用程序的根节点。

在任何Angular应用程序中，都需要至少一个根组件。根据经验，将其命名为AppComponent是一个很好的选择。

组件是Angular应用程序的基本构建单元。组件用于控制并与视图（与模板相关联）的某个部分进行交互。

在Quickstart中，只有一个组件。然而，这个组件却具备其他任何组件都必不可少的要素。

    • 1または2以上のimport文

@Component宣言。これはAngularにどのテンプレートを使うか、またどのようにコンポーネントを生成するかを伝えるものである
Comonent class。これはテンプレートのふるまいを規定する。

进口

Angular应用由多个模块组成，根据不同的目的而设立。Angular本身也是一个模块，是我们应用程序开发所使用的库的集合。

如果需要某个模块，只需导入该模块即可。因此，我们想要创建组件，所以决定加载组件库模块。

import {Component} from 'angular2/core';

@Component声明

Component是一个装饰器（装饰器函数），可以指定元数据。这些元数据告诉Angular如何生成和使用该组件。

我们可以通过执行带有@符号的函数，将包含元数据的函数应用于组件。

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

在这里，selector是指定用于表示组件的HTML元素的代理，而template则指示与组件相关联的模板。

组件类

在Quickstart中，由于没有特别的操作，暂且将其定义为名为AppComponent的空类，不进行任何操作。

export class AppComponent { }

用main.ts来展示它

这是告诉Angular应该加载的根组件。

app/main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

为了启动应用程序，必须导入两个东西。一个是bootstrap函数，另一个是根组件AppComponent。

此外，要提的是，bootstrap是从angular2/platform/browser引入的，而不是从angular2/core引入的。这是因为bootstrap只是一种启动应用程序的方式，而不是Angular2的核心功能。

添加index.html

在项目的根文件夹（app文件夹）中创建一个index.html文件。index.html文件中有三个值得注意的部分。

    1. JavaScript库

 

    1. SystemJS的设置

 

    body标签内的my-app标签

JavaScript – JavaScript

首先，通过在IE浏览器中导入polyfills来运行ES2015库（polyfills在旧版浏览器中提供现代浏览器功能）。然后，再导入Angular2的polyfills，并导入SystemJS和RxJS库。

在快速入门中不使用RxJS，但在大多数应用程序中会使用，所以先添加上去。

然后，最后引入Angular2。

SystemJS 系统

在快速启动中，使用SystemJS来加载应用程序和库模块（SystemJS可能是最佳的加载器选择）。

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

其中，packages节点是用来告诉SystemJS在从app文件夹请求某个模块时应该做什么的。

通过调用 System.import 方法，告诉 SystemJS 导入 main.js 文件。

当Angular调用main.ts中的bootstrap函数时，它会从AppComponent的元数据中找到my-app元素，并将组件加载到那里。

增添一些风格

在styles.css中编写样式可能是个不错的选择。

编译并运行！

在终端上执行以下命令以编译TypeScript文件并运行服务器以加载index.html。

npm start

如果稍等一下，浏览器就会启动，并显示“我的第一个Angular 2应用”。

最终结构

最终，项目文件夹可能会变成这个样子。

angular2-quickstart
   [app]
      app.component.ts
      main.ts
   [node_modules]
   [typings]
   index.html
   package.json
   styles.css
   tsconfig.json
   typings.json

总结

原本的应用程序只是一个Angular2版本的简单的“Hello, world”。为了进行下一步，让我们继续前进到英雄之旅应用程序的教程。

虽然我认为…。

由于Tour of Heroes是一个相当大的应用程序，所以最好先观察一下https://angular.io/上的示例源代码。

我想先在这里停下来，然后去看一下https://angular.io/的示例。

✖
广告
将在 10 秒后关闭
bannerAds