开始使用Angular 2

Download angular2 eBook

备注

本节概述了如何安装和配置Angular2 +以在各种环境中使用,以及IDE使用社区开发的angular-cli等工具。

以前版本的Angular是AngularJS或者也叫Angular 1.请参见文档

版本

发布日期
4.3.3 2017年8月2日
4.3.2 2017年7月26日
4.3.1 2017年7月19日
4.3.0 2017年7月14日
4.2.0 2017年6月8日
4.1.0 2017年4月26日
4.0.0 2017年3月23日
2.3.0 2016年12月8日
2.2.0 2016年11月14日
2.1.0 2016年10月13日
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日

使用node.js / expressjs后端开始使用Angular 2(包括http示例)

我们将创建一个简单的“Hello World!”应用Angular2 2.4.1( @NgModule 更改)与node.js(expressjs)后端。

先决条件

然后运行npm install -g typescriptyarn global add typescript 来全局安装typescript

路线图

步骤1

为我们的应用程序创建一个新文件夹(以及我们后端的根目录)。我们称之为Angular2-express

命令行

mkdir Angular2-express
cd Angular2-express
 

第2步

为我们的node.js 应用程序创建package.json (用于依赖项)和app.js (用于bootstrapping)。

的package.json:

mkdir Angular2-express
cd Angular2-express
 

app.js:

mkdir Angular2-express
cd Angular2-express
 

然后运行npm installyarn 来安装依赖项。

现在我们的后端结构已经完成。让我们继续前进。

第三步:

我们的前端应该位于Angular2-express 文件夹中名为front 文件夹中。

命令行:

mkdir Angular2-express
cd Angular2-express
 

就像我们对后端一样,我们的前端也需要依赖文件。让我们继续创建以下文件: package.jsonsystemjs.config.jstsconfig.json

package.json

mkdir Angular2-express
cd Angular2-express
 

systemjs.config.js:

mkdir Angular2-express
cd Angular2-express
 

tsconfig.json:

mkdir Angular2-express
cd Angular2-express
 

然后运行npm installyarn 来安装依赖项。

现在我们的依赖文件已经完成了。让我们继续我们的index.html

index.html的:

mkdir Angular2-express
cd Angular2-express
 

现在我们准备创建我们的第一个组件。在我们的front 文件夹中创建名为app 文件夹。

命令行:

mkdir Angular2-express
cd Angular2-express
 

让我们将以下文件命名为main.tsapp.module.tsapp.component.ts

main.ts:

mkdir Angular2-express
cd Angular2-express
 

app.module.ts:

mkdir Angular2-express
cd Angular2-express
 

app.component.ts:

mkdir Angular2-express
cd Angular2-express
 

在此之后,将打字稿文件编译为javascript文件。从当前目录(Angular2-express文件夹内)向上移动2级并运行以下命令。

命令行:

mkdir Angular2-express
cd Angular2-express
 

我们的文件夹结构应如下所示:

mkdir Angular2-express
cd Angular2-express
 

最后,在Angular2-express文件夹中,在命令行中运行node app.js 命令。打开您最喜欢的浏览器并查看localhost:9999 以查看您的应用。

没有angular-cli的Angular 2入门。

Angular 2.0.0-rc.4

在这个例子中,我们将创建一个“Hello World!”为简单起见,只有一个根组件( AppComponent )的应用程序。

先决条件:

  • Node.js v5或更高版本
  • npm v3或更高版本

注意:您可以通过在控制台/终端中运行node -vnpm -v 来检查版本。

步骤1

为项目创建并输入新文件夹。我们称之为angular2-example

mkdir angular2-example
cd angular2-example
 

第2步

在我们开始编写应用程序代码之前,我们将添加下面提供的4个文件: package.jsontsconfig.jsontypings.jsonsystemjs.config.js

免责声明:相同的文件可以在官方5分钟快速入门中找到

package.json - 允许我们使用npm下载所有依赖项,并提供简单的脚本执行,使简单项目的生活更轻松。 (你应该考虑将来使用像Gulp这样的东西来自动执行任务)。

mkdir angular2-example
cd angular2-example
 

tsconfig.json - 配置TypeScript转换器。

mkdir angular2-example
cd angular2-example
 

typings.json - 使TypeScript识别我们正在使用的库。

mkdir angular2-example
cd angular2-example
 

systemjs.config.js - 配置SystemJS (您也可以使用webpack )。

mkdir angular2-example
cd angular2-example
 

第3步

让我们通过输入来安装依赖项

mkdir angular2-example
cd angular2-example
 

在控制台/终端。

第4步

angular2-example 文件夹中创建index.html

mkdir angular2-example
cd angular2-example
 

您的应用程序将在my-app 标签之间呈现。

但是,Angular仍然不知道要渲染什么 。要告诉它,我们将定义AppComponent

第5步

创建一个名为app 的子文件夹,我们可以在其中定义构成我们应用程序的组件和服务 。 (在这种情况下,它只包含AppComponent 代码和main.ts

mkdir angular2-example
cd angular2-example
 

第6步

创建文件app/app.component.ts

mkdir angular2-example
cd angular2-example
 

发生了什么?首先,我们要导入@Component 装饰器,我们使用它来为Angular提供该组件的HTML标签和模板。然后,我们使用titlemessages 变量创建类AppComponent ,我们可以在模板中使用它们。

现在让我们看看那个模板:

mkdir angular2-example
cd angular2-example
 

我们在h1 标签中显示title 变量,然后使用*ngFor 指令制作一个列表,显示messages 数组的每个元素。对于数组中的每个元素, *ngFor 创建一个我们在li 元素中使用的message 变量。结果将是:

mkdir angular2-example
cd angular2-example
 

第7步

现在我们创建一个main.ts 文件,它将是Angular看到的第一个文件。

创建文件app/main.ts

mkdir angular2-example
cd angular2-example
 

我们正在导入bootstrap 函数和AppComponent 类,然后使用bootstrap 告诉Angular将哪个组件用作root。

第8步

是时候启动你的第一个应用程序了。类型

mkdir angular2-example
cd angular2-example
 

在你的控制台/终端。这将从package.json 运行一个准备好的脚本,它启动lite-server,在浏览器窗口中打开你的应用程序,并在监视模式下运行TypeScript转换器(因此.ts 文件将被转换,浏览器将在保存更改时刷新) 。

现在怎么办?

查看官方的Angular 2指南StackOverflow文档中的其他主题。

您还可以编辑AppComponent 以使用外部模板,样式或添加/编辑组件变量。保存文件后,您应立即看到更改。

通过那个讨厌的公司代理

如果您试图在XYZ MegaCorp的Windows工作计算机上运行Angular2站点,则可能是您在通过公司代理时遇到问题。

有(至少)两个包管理器需要通过代理:

  1. NPM
  2. 分型

对于NPM,您需要.npmrc 添加到.npmrc 文件中:

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
 

对于Typings,您需要将以下行添加到.typingsrc 文件中:

proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
https-proxy=http://[DOMAIN]%5C[USER]:[PASS]@[PROXY]:[PROXYPORT]/
 

这些文件可能尚不存在,因此您可以将它们创建为空白文本文件。它们可以添加到项目根目录(与package.json 相同的位置,或者您可以将它们放在%HOMEPATH% ,它们将可用于您的所有项目。

不明显的位是人们认为代理设置不起作用的主要原因是%5C\ 的URL编码,用于分隔域名和用户名。感谢Steve Roberts的那个: 在公司代理.pac后面使用npm

使用angular-cli安装angular2

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

先决条件:

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

npm install -g @angular/cli
 

要么

npm install -g @angular/cli
 

取决于您选择的包管理器。

上一个命令全局安装@ angular / cli ,将可执行文件ng 添加到PATH。

设置新项目

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

运行命令:

npm install -g @angular/cli
 

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

添加到现有项目

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

运行命令:

npm install -g @angular/cli
 

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

在本地运行项目

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

npm install -g @angular/cli
 

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

npm install -g @angular/cli
 

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

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

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

npm install -g @angular/cli
 

有几种可能类型的支架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 2 Web应用程序的构建并希望将其安装在Apache Tomcat等Web服务器上时,您需要做的就是运行build命令,无论是否设置了生产标志。生产将减少代码并优化生产设置。

npm install -g @angular/cli
 

要么

npm install -g @angular/cli
 

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

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

npm install -g @angular/cli
 

单元测试

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

npm install -g @angular/cli
 

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

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

保持Visual Studios与NPM和NODE更新同步

步骤1:找到Node.js的下载,通常它安装在C:/ program files / nodejs下

第2步:打开Visual Studios并导航到“工具>选项”

第3步:在选项窗口中,导航到“项目和解决方案>外部Web工具”

步骤4:使用Node.js文件位置添加新条目(C:/ program files / nodejs),重要使用菜单上的箭头按钮将引用移动到列表顶部。

在此处输入图像描述

步骤5:从npm命令窗口重新启动Visual Studios并针对您的项目运行npm安装

让我们深入了解Angular 4!

Angular 4现已推出!实际上Angular使用自Angular 2之后的semver,这需要在引入破坏更改时增加主要数字。 Angular团队推迟了导致重大变化的功能,这些功能将随Angular 4发布.Angular 3被跳过以便能够对齐核心模块的版本号,因为路由器已经有版本3。

根据Angular团队的说法,Angular 4应用程序将比以前更少占用空间并且更快。他们将动画包与@ angular / core包分开。如果有人没有使用动画包,那么额外的代码空间将不会在生产中结束。模板绑定语法现在支持if / else样式语法。 Angular 4现在与最新版本的Typescript 2.1和2.2兼容。因此,Angular 4将更加令人兴奋。

现在我将向您展示如何在项目中设置Angular 4。

让我们用三种不同的方式开始Angular设置:

您可以使用Angular-CLI(命令行界面),它将为您安装所有依赖项。

  • 您可以从Angular 2迁移到Angular 4。

  • 您可以使用github并克隆Angular4样板。 (这是最简单的一个.😉)

  • 使用Angular-CLI进行角度设置(命令行界面)。

在开始使用Angular-CLI之前,请确保您的计算机中已安装节点。在这里,我使用的是节点v7.8.0。现在,打开终端并为Angular-CLI键入以下命令。

npm install -g @angular/cli
 

要么

npm install -g @angular/cli
 

取决于您使用的包管理器。

我们使用Angular-CLI安装Angular 4。

npm install -g @angular/cli
 

cd Angular4-boilerplate我们都为Angular 4设置了它。它非常简单直接的方法

通过从Angular 2迁移到Angular 4进行角度设置

现在让我们看看第二种方法。我将向您展示如何将Angular 2迁移到Angular 4.为此您需要克隆任何Angular 2项目并使用package.json中的Angular 4 Dependency更新Angular 2依赖项,如下所示:

npm install -g @angular/cli
 

这些是Angular 4的主要依赖项。现在你可以npm install然后npm开始运行应用程序。作为参考我的package.json。

来自github项目的角度设置

在开始此步骤之前,请确保已在计算机中安装了git。打开终端并使用以下命令克隆angular4-boilerplate:

npm install -g @angular/cli
 

然后安装所有依赖项并运行它。

npm install -g @angular/cli
 

你完成了Angular 4的设置。所有步骤都非常简单,因此您可以选择其中任何一个。

angular4-boilerplate的目录结构

npm install -g @angular/cli
 

对目录结构的基本了解:

所有代码都驻留在src文件夹中。

mocks文件夹用于测试目的中使用的模拟数据。

model文件夹包含组件中使用的类和接口。

modules文件夹包含组件列表,如app,login,widget等。所有组件都包含typescript,html和css文件。 index.ts用于导出所有类。

services文件夹包含应用程序中使用的服务列表。我已经分开了休息服务和不同的组件服务。在休息服务中包含不同的http方法。登录服务用作登录组件和休息服务之间的中介。

app.routing.ts文件描述了应用程序的所有可能路由。

app.module.ts将app模块描述为根组件。

bootstrap.ts将运行整个应用程序。

webpack文件夹包含webpack配置文件。

package.json文件适用于所有依赖项列表。

业力包含单元测试的业力配置。

node_modules包含包捆绑包的列表。

让我们从Login组件开始。在login.component.html中

npm install -g @angular/cli
 

在login.component.ts中

npm install -g @angular/cli
 

我们需要将此组件导出到index.ts中。

npm install -g @angular/cli
 

我们需要在app.routes.ts中设置登录路由

npm install -g @angular/cli
 

在根组件app.module.ts文件中,您只需要导入该组件。

npm install -g @angular/cli
 

然后在那个npm install和npm start之后。干得好!您可以在本地主机中查看登录屏幕。如有任何困难,您可以参考angular4-boilerplate。

基本上我可以使用Angular 4应用程序感觉更少的构建包和更快的响应,虽然我在编码中发现与Angular 2完全相似。

Stats

5071 Contributors: 38
Friday, August 4, 2017
许可下: CC-BY-SA

不隶属于 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下载电子书