AngularJS学习之一：AngularJS的QUICKSTART

来源：互联网发布：linux能用sqlserver吗编辑：程序博客网时间：2024/06/05 22:31

注：为了使翻译更加原汁原味，翻译的思路基本是直译，所以很多时候语句看上去是倒装的，因为外国人说话往往是限定词、定语在后面，先说关键的内容，为了语法的通顺和合理，加入了一些连接词、语气助词。

Angular应用程序是由组件组成。一个组件是一个组合：由一个HTML模板和一个组件类（控制一部分屏幕）组成。这是一个组件的例子，用于显示一个简单字符串：

app/app.component.ts

import { Component } from '@angular/core';@Component({  selector: 'my-app',  template: `<h1>Hello {{name}}</h1>`})export class AppComponent { name = 'Angular'; }

在Plunker（注：一个在线编写、测试的平台）尝试这个QuickStart的例子 QuickStart example on Plunker ，不需要安装任何东西。也可以使用 QuickStart seed （github上的一套用于学习的Demo代码，完成它的配置即搭建了一套本地的AngularJS的开发环境）在本地去尝试它，这样同时为真正的Angular应用程序的开发做了准备。

无需安装任何东西就可以在Pluanker的QuickStart例子尝试这个。可以用QucikStart seed在本地去尝试它，并且为Angular应用程序的开发做一下准备。

每个组件都始于一个@Component decorator 函数，这个函数采用了一个元数据对象（作为参数）。这个元数据对象描述了HTML模板和组件类是如何一起工作的。

这个 selector属性告诉了Angular去显示这个组件，在一个自定义的<my-app> 标签里，在 index.html 里面。

index.html (inside <body>)

<my-app>Loading AppComponent content here ...</my-app>

该template属性定义了一个消息，在一个<h1> header（注：HTML标签，这个都不会的话，就不用往下看了）。该消息开始于“Hello”而结束于{{name}}，这是一个Angular interpolation binding （插值绑定）表达式。在运行时，Angular用这个组件的name属性的值替换{{name}}。Interpolation binding（插值绑定）是你在这个系列文档中发现的Angular众多功能之一。

（问题：这里使用的是documentation，而不是document，这里说的应该不是仅仅指本文档，而是本系列文档）

在这个例子中，改变这个组件类的 name 属性，从 'Angular' 修改为 'World'，然后看看发生了什么。

一言关于TypeScript

这个例子是用 TypeScript 写的，一个JavaScript的超集。Angular使用了TypeScript，因为它的类型使得采用工具支撑开发者的生产力变得容易。你你也可以使用JavaScript去编写Angular代码; this guide 解释了如何去做。

以下是原文，地址是：https://angular.io/docs/ts/latest/quickstart.html。

Angular applications are made up of components. A component is the combination of an HTML template and a component class that controls a portion of the screen. Here is an example of a component that displays a simple string:

app/app.component.tsimport { Component } from '@angular/core';@Component({  selector: 'my-app',  template: `<h1>Hello {{name}}</h1>`})export class AppComponent { name = 'Angular'; }

Try this QuickStart example on Plunker without installing anything. Try it locally with the QuickStart seed and prepare for development of a real Angular application.

Every component begins with an @Component decorator function that takes a metadata object. The metadata object describes how the HTML template and component class work together.

The selector property tells Angular to display the component inside a custom <my-app> tag in the index.html.

index.html (inside <body>)<my-app>Loading AppComponent content here ...</my-app>

The template property defines a message inside an <h1> header. The message starts with "Hello" and ends with {{name}}, which is an Angular interpolation binding expression. At runtime, Angular replaces {{name}} with the value of the component's name property. Interpolation binding is one of many Angular features you'll discover in this documentation.

In the example, change the component class's name property from 'Angular' to 'World' and see what happens.

A WORD ABOUT TYPESCRIPT

This example is written in TypeScript, a superset of JavaScript. Angular uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; this guide explains how.

0 0