Angular 2 学习笔记（一）

最新推荐文章于 2023-12-14 10:38:18 发布

weixin_30739595

最新推荐文章于 2023-12-14 10:38:18 发布

阅读量95

点赞数

原文链接：http://www.cnblogs.com/violet-qqy/p/5302690.html

版权

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

Package Definition and Configuration Files

package.json // 列出应用的依赖，定义脚本
tsconfig.json // TypeScript 的编译器配置文件
typings.json // 指定 TypeScript 编译文件
systemjs.config.js // SystemJS 配置文件 [Config-API](https://github.com/systemjs/systemjs/blob/master/docs/config-api.md)

$ npm install

Angular's Dependencies

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

es6-shim(for older browsers)
zone.js
reflect-metadata
SystemJS

<!-- 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>

# ES6 Shim

“ES6 provides shims so that legacy JavaScript engines behave as closely as possible to ECMAScript 6. This shim isn’t strictly needed for newer versions of Safari, Chrome, etc. but it is required for older versions of IE.”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

# Zones

“Zone.js is an advanced topic that we don’t need to worry about much here. For know, just know that it is a library used by Angular, primarily for detecting changes to data. (If you’re coming from Angular 1, you can think of zones as an automatic version of $digest. If you’re not coming from Angular 1, you can ignore it for now.)”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

# Reflect Metadata

“Angular itself was written in Typescript, and Typescript provides annotations for adding metadata to code. Roughly speaking, the reflect-metadata package is a polyfill that lets us use this metadata.”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

# SystemJS

“SystemJS is a module loader. That is, it helps us create modules and resolve dependencies. Module loading in browser-side javascript is surprisingly complicated and SystemJS makes the process much easier.”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

First Project

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

import { bootstrap } from "@angular/platform-browser-dynamic";
import { Component } from "@angular/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

我们在 @Component 中添加 template 。 template 定义在符号（`...`）中。这是 ES6 的新特性，可以允许输入多行的 string 值。

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 src="systemjs.config.js"></script>
<script>
      System.import('app')
            .then(null, console.error.bind(console));
</script>

    <hello-world></hello-world>

这里我们加入了两个 script 标签来配置模块的加载和System.js：

引入 system.config.js ——这个文件告诉 System.js 如何去加载依赖和文件。
引入应用包。 // 告诉 System.js 我们的应用的主入口。

Running The App

Compiling the TypeScript Code to .js
Serving The App

$ npm start

Compiling the TypeScript Code to .js

“Since our application is written in TypeScript, we used a file called app.ts. The next step is to compile it to JavaScript, so that the browser can understand it.”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

tsc

Serving The App

“We have one more step to test our application: we need to run a local webserver to serve our app.”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

Adding Data to the Component

之前我们的组件只渲染了静态文本，那还不够有趣。让我们给我们的组建引入一个新的变量 name 。这样我们就可以根据不同的输入复用我们的组件。

@Component({
    selector: 'hello-world',
    template: `<div>Hello {{ name }}</div>`
})
class HelloWorld {
    name: string;

    constructor() {
        this.name = 'Felipe';
    }
}

name Property

“On the HelloWorld class we added a property. Notice that the syntax is new relative to ES5 Javascript. When we write name: string; it means name is the name of the attribute we want to set and string is the type.

The typing is provided by TypeScript! This sets up a name property on instances of our HelloWorld class and the compiler ensures that name is a string.”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

A Constuctor

“On the HelloWorld class we define a constructor, i.e. function that is called when we create new instances of this class.

In our constructor we can assign our name property by using this.name”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

“When we write:

1 constructor() {

2 this.name = 'Felipe';

3 }

We’re saying that whenever a new HelloWorld is created, set the name to 'Felipe'.”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

Template Variable

“On the template notice that we added a new syntax: {{ name }}. The brackets are called “template-tags” (or “mustache tags”). Whatever is between the template tags will be expanded as an expression. Here, because the template is bound to our Component, the name will expand to the value of this.name i.e. 'Felipe'.”

摘录来自: Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda. “ng-book 2”。 iBooks.

Working with arrays

NgFor Directive

*ngFor 的三种写法

`<li *ngFor="#item of items; #i = index">...</li>`

`<li template="ngFor #item of items; #i = index">...</li>`

`<template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>`

数组的排序：

sortedArticles(): Article[] {
    return this.articles.sort((a: Article, b: Article) => b.votes - a.votes);
}

转载于:https://www.cnblogs.com/violet-qqy/p/5302690.html

weixin_30739595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫