Angular 2 学习笔记

Posted 2020-06-26

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular 2 学习笔记相关的知识，希望对你有一定的参考价值。

Angular 2 学习笔记（一）

First Application

建立自定义组件（Components）
从表单（Form）接受用户输入（input）
渲染对象列表并用视图战事
监听（Intercepting）用户点击事件并执行操作

Getting started

TypeScript

建议使用 TypeScript 开始 Angular 2 的编程。 Angular 2 有 ES5 API ，但是 Angular 2 是用 TypeScript 写的并且大部分人都在使用 TypeScript 。使用 TypeScript 编写 Angular 2 会更美观和简便。

// 安装 nodejs
// 安装 TypeScript
$ npm install typescript -g

// Windows 用户建议安装 Cygwin

Angular‘s Dependencies

Angular 2 本身就是一个 javascript 文件，并且需要很多依赖来运行它。为了使用 Angular 2 ，你并不需要完全深入地理解每一个依赖，但是你必须引入它们。
Angular 2 主要依赖一下4个库：

es6-shim-(for older browsers)
angular2-polyfills
SystemJS
RxJS

<script src="node_modules/es6-shim/es6-shim.js></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js></script>
<script src="node_modules/systemjs/dist/system.src.js></script>
<script src="node_modules/rxjs/bundles/Rx.js></script>
<script src="node_modules/angular2/bundles/angular2.dev.js></script>

# ES6 Shim

# Angular 2 Polyfills

# SystemJS

# RxJS

First Project

建立 app.ts 。然后浏览器并不知道该如何运行 .ts 文件，所以我们需要将 .ts 文件编译成 .js 文件。

///<reference path="node_modules/angular2/ts/typings/node/node.d.ts"/>
///<reference path="node_modules/angular2/typings/browser.d.ts"/>
import { bootstrap } from "angular2/platform/browser";
import { Component } from "angular2/core";

@Component({
    selector: ‘hello-world‘,
    template: `
        <div>
            Hello World
        </div>
    `
})
class HelloWorld {
}
    
bootstrap(HelloWorld);

TypeScript 是 javascript 的一种类型。为了能够在我们的浏览器中使用Angular ，我们需要告诉 TypeScript 编译器需要从哪里找 typing files 。 reference 标签里面声明了 typing files 的路径（以 .d.ts 结尾）。

import 标签定义了我们在我们的代码中所使用到的模块（modules）。这里我们引入了两个模块： Component 和 bootstrap 。

我们从 "angular2/core" 引入 Conponent 。"angular2/core" 模块告诉程序需要的依赖的所在地。同样我们从 "angular2/platform/browser" 引入 bootstrap 。

注意 import 语法的结构是 import { things } from wherever 。

Making a Component

Angular 2 的核心概念之一就是组件（Components）。

在 Angular 应用中我们使用 html 标记语言来构建应用的交互，但是浏览器只识别一些标签，比如像 <select> ， <form> ， <video> 这些由浏览器创建者定义的功能性标签。但是万一我们想要教给浏览器一些新的标签呢？万一我们想要有一个名叫 <weather> 的标签去显示天气呢？或者我们需要一个 <login> 标签来创建登陆面板呢？

这就是组件（Components）背后的理念：我们教给浏览器使用具有新功能的新标签。

我们创建的第一个组件，当我们在 HTML 文档中使用我们的组件的时候：

<hello-world></hello-world>

所以我们事实上是如何定义一个新组件的呢？一个基本的组件包括两部分：

A Component annotation
A compontent definition class

Adding a template

Booting Our Application

bootstrap(HelloWorld); 将会启动应用。第一点隐藏的含义是：我们的应用的 main 组件是 HelloWorld 组件。

一旦应用被加载（bootstrapped），在 index.html 文件里的 <hello-world></hello-world> 片段将由 HelloWorld 组件渲染。

Loading our Application

要运行我们的应用，我们需要做两件事：

we need to tell our HTML document to import our app file
we need to use our component

在 <body> 中添加：

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

Running The App

Compiling the TypeScript Code to .js

Serving The App

Adding Data to the Component

未完待续...

以上是关于Angular 2 学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

学习笔记：python3，代码片段（2017）

typescript Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming/angular-2/

Angular 2 学习笔记

typescript Angular最终版本的Angular 2测试片段。代码库https://developers.livechatinc.com/blog/category/programming