阅读5分钟快速入门时的备忘录
这是我阅读 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文件中有三个值得注意的部分。
-
- JavaScript库
-
- 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/的示例。