AngularAngular入门


备注

Angular (通常称为“ Angular 2+ ”或“ Angular 2 ”)是一个基于TypeScript的开源前端Web框架,由Google的Angular团队以及个人和公司社区领导,以解决所有问题。构建复杂Web应用程序时开发人员工作流程的一部分。 Angular是来自构建AngularJS的同一团队的完全重写。 ¹

该框架由几个库组成,其中一些是核心的(例如@ angular / core )和一些可选的( @ angular / animations )。

您可以通过使用Angularized标记编写HTML 模板 ,编写组件类来管理这些模板,在服务中添加应用程序逻辑以及在模块中装箱组件和服务来编写Angular应用程序。

然后通过引导 根模块启动应用程序 。 Angular接管,在浏览器中显示您的应用程序内容,并根据您提供的说明响应用户交互。

可以说,开发Angular应用程序的最基本部分是组件 。组件是HTML模板和控制屏幕一部分的组件类的组合。以下是显示简单字符串的组件示例:

SRC /应用程序/ app.component.ts

import { Component } from '@angular/core';

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

每个组件都以@Component装饰器函数开头,该函数接受元数据对象。元数据对象描述了HTML模板和组件类如何协同工作。

selector属性告诉Angular在index.html文件中的自定义<my-app>标记内显示该组件。

index.html(在body标签内)

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

template属性定义<h1>标头内的消息。消息以“Hello”开头,以{{name}} ,这是一个Angular 插值绑定表达式。在运行时,Angular将{{name}}替换为组件name属性的值。插值绑定是您将在本文档中发现的众多Angular功能之一。在示例中,将组件类的name属性从'Angular'更改为'World'然后查看会发生什么。

这个例子是用TypeScript编写的,它是JavaScript的超集。 Angular使用TypeScript,因为它的类型可以通过工具轻松支持开发人员的工作效率。此外, 几乎所有支持都适用于TypeScript ,因此使用纯JavaScript编写应用程序将很困难 。但是,在JavaScript中编写Angular代码是可能的; 本指南解释了如何。

有关Angular 体系结构的更多信息,请访问此处

版本

发布日期
5.0.0-beta.1(最新) 2017年7月27日
4.3.2 2017年7月26日
5.0.0-beta.0 2017年7月19日
4.3.1 2017年7月19日
4.3.0 2017年7月14日
4.2.6 2017年7月8日
4.2.5 2017年6月9日
4.2.4 2017年6月21日
4.2.3 2017年6月16日
4.2.2 2017年6月12日
4.2.1 2017年6月9日
4.2.0 2017年6月8日
4.2.0-rc.2 2017年6月1日
4.2.0-RC.1 2017年5月26日
4.2.0-rc.0 2017年5月19日
4.1.3 2017年5月17日
4.1.2 2017年5月10日
4.1.1 2017年5月4日
4.1.0 2017年4月26日
4.1.0-rc.0 2017年4月21日
4.0.3 2017年4月21日
4.0.2 2017年4月11日
4.0.1 2017年3月29日
4.0.0 2017年3月23日
4.0.0-rc.6 2017年3月23日
4.0.0-rc.5 2017年3月17日
4.0.0-rc.4 2017年3月17日
2.4.10 2017年3月17日
4.0.0-rc.3 2017年3月10日
2.4.9 2017年3月2日
4.0.0-rc.2 2017年3月2日
4.0.0-RC.1 2017年2月24日
2.4.8 2017年2月18日
2.4.7 2017年2月9日
2.4.6 2017年2月3日
2.4.5 2017年1月25日
2.4.4 2017年1月19日
2.4.3 2017年1月11日
2.4.2 2017年1月6日
2.4.1 2016年12月21日
2.4.0 2016年12月20日
2.3.1 二〇一六年十二月十五日
2.3.0 2016年12月7日
2.3.0-rc.0 二零一六年十一月三十零日
2.2.4 二零一六年十一月三十零日
2.2.3 2016年11月23日
2.2.2 2016年11月22日
2.2.1 2016年11月17日
2.2.0 2016年11月14日
2.2.0-rc.0 2016年11月2日
2.1.2 2016年10月27日
2.1.1 二○一六年十月二十○日
2.1.0 二零一六年十月一十二日
2.1.0-rc.0 2016年10月5日
2.0.2 2016年10月5日
2.0.1 2016年9月23日
2.0.0 2016年9月14日
2.0.0 rc.7 2016年9月13日
2.0.0 rc.6 2016年8月31日
2.0.0 rc.5 2016年8月9日
2.0.0 rc.4 2016年6月30日
2.0.0 rc.3 2016年6月21日
2.0.0 rc.2 2016年6月15日
2.0.0 RC.1 2016年5月3日
2.0.0 rc.0 2016年5月2日

角度“Hello World”计划

先决条件:

建立开发环境

在我们开始之前,我们必须设置我们的环境。

  • 如果它们不在您的计算机上,请安装Node.js和npm

    通过在终端/控制台窗口中运行node -v和npm -v,验证您是否至少运行节点6.9.x和npm 3.xx。较旧的版本会产生错误,但较新的版本会很好。

  • 使用npm install -g @angular/cli 全局安装Angular CLI


第1步:创建一个新项目

打开终端窗口(或Windows中的Node.js命令提示符)。

我们使用以下命令创建一个新项目和框架应用程序:

ng new my-app
 

这里的ng 是针对Angular的。我们得到一个像这样的文件结构。

文件结构_1

文件结构_2

有很多文件。我们现在不必担心所有这些问题。

第2步:提供应用程序

我们使用以下命令启动应用程序:

ng serve
 

我们可以使用一个标志-open (或简单的-o ),它会在http://localhost:4200/ 上自动打开我们的浏览器

ng serve --open
 

将浏览器导航到地址http://localhost:4200/ 。它看起来像这样:

欢迎来到App

第3步:编辑我们的第一个Angular组件

CLI为我们创建了默认的Angular组件。这是根组件,它名为app-root 。你可以在./src/app/app.component.ts 找到它。

打开组件文件并将标题属性从Welcome to app!! 更改Welcome to app!! 来到Hello World 。浏览器会自动使用修订后的标题重新加载。

原始代码:注意title = 'app';

原始代码

修改后的代码: title 值已更改。

修改代码

同样,。/ ./src/app/app.component.html 也有变化。

原始HTML

在此处输入图像描述

修改过的HTML

在此处输入图像描述

请注意,将显示./src/app/app.component.tstitle 值。完成更改后,浏览器会自动重新加载。它看起来像这样。

你好,世界

为了找到更多的话题,请访问此链接这里

使用angular-cli安装角度

此示例是Angular的快速设置以及如何生成快速示例项目。

先决条件:

打开终端并逐个运行命令:

npm install -g typingsyarn global add typings

npm install -g @angular/cliyarn global add @angular/cli

所述第一命令安装分型库全局(并增加了typings 可执行以PATH)。第二个在全局安装@ angular / cli ,将可执行文件ng 添加到PATH。

设置新项目

使用终端导航到要设置新项目的文件夹。

运行命令:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
 

就是这样,你现在有了一个用Angular制作的简单示例项目。您现在可以导航到终端中显示的链接,并查看它正在运行的内容。

添加到现有项目

导航到当前项目的根目录。

运行命令:

ng init
 

这将为您的项目添加必要的脚手架。这些文件将在当前目录中创建,因此请务必在空目录中运行。

在本地运行项目

为了在应用程序在浏览器中运行时查看应用程序并与之交互,您必须启动一个托管项目文件的本地开发服务器。

ng serve
 

如果服务器成功启动,它应显示服务器正在运行的地址。通常是这样的:

http://localhost:4200
 

开箱即用的本地开发服务器与热模块重新加载相连,因此对html,typescript或css的任何更改都将触发浏览器自动重新加载(但如果需要可以禁用)。

生成组件,指令,管道和服务

ng generate <scaffold-type> <name> (或简称ng g <scaffold-type> <name> )命令允许您自动生成Angular组件:

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false
 

有几种可能类型的支架angular-cli可以产生:

脚手架类型用法
ng g module my-new-module
零件 ng g component my-new-component
指示 ng g directive my-new-directive
ng g pipe my-new-pipe
服务 ng g service my-new-service
ng g class my-new-class
接口 ng g interface my-new-interface
枚举 ng g enum my-new-enum

您也可以用第一个字母替换类型名称。例如:

ng gm my-new-module 用于生成新模块或ng gc my-new-component 以创建组件。

建筑/捆绑

当您完成Angular Web应用程序的构建并且希望将其安装在Apache Tomcat等Web服务器上时,您需要做的就是运行build命令,无论是否设置了生产标志。生产将减少代码并优化生产设置。

ng build
 

要么

ng build --prod
 

然后在项目根目录中查找/dist 文件夹,其中包含构建。

如果您想要更小的生产包的好处,您还可以使用Ahead-of-Time模板编译,从最终构建中删除模板编译器:

ng build --prod --aot
 

单元测试

Angular提供内置单元测试,angular-cli创建的每个项目都会生成一个可以花费的基本单元测试。单元测试使用jasmine编写,并通过Karma执行。要开始测试,请执行以下命令:

ng test
 

此命令将执行项目中的所有测试,并在每次源文件更改时重新执行它们,无论是测试还是来自应用程序的代码。

有关更多信息,请访问: angular-cli github页面