AngularJS学习之一：AngularJS的QUICKSTART

发布时间：2020-12-17 09:43:11 所属栏目：安全来源：网络整理

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

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

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

app/app.component.ts

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

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

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

每个组件都始于一个@Componentdecorator函数，这个函数采用了一个元数据对象（作为参数）。这个元数据对象描述了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}}，这是一个Angularinterpolation 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 ofcomponents. Acomponentis 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.ts

Every component begins with andecoratorfunctionthattakes ametadataobject. The metadata objectdescribes how the HTML template and component class work together.

 
 Theselectorproperty tells Angular to display the component inside a custom<my-app>tag in theindex.html.

 
  index.html (inside <body>)