适用于初学者的 Angular 入门指南:(1) 环境设置及初次项目创建

首先

为了确保易懂性,本文打算采用教程形式进行。
我们将从准备开发所需环境开始,介绍Angular的(简单)结构,并逐步介绍完成一个简单应用程序的步骤。

這篇文章的目標讀者是

    • HTML・Javascript・CSS について簡単な知識はあるけども本格的なアプリケーションを作成した事のない方

 

    • jQuery を使った簡単なアプリケーションからステップアップしたい方

 

    SPA を作成した事のない方

Angular是什么

Angular 是由 Google 提供的用于 Web 应用程序的框架(组件集、模板集)。
使用 Angular 可以几乎创建 Web 应用程序所需的大部分功能,但由于存在独特的编写方式和规则,
我们将逐步介绍这些内容。

准备开发环境

安装Visual Studio Code

我们会准备一个带有编写Angular代码所需功能的编辑器(IDE:集成开发环境)。在这里我们将使用微软提供的编辑器Visual Studio Code。

请点击以下网址,根据您的操作系统下载安装程序。

[Visual Studio Code]

https://code.visualstudio.com/

【Visual Studio Code】

https://code.visualstudio.com/

安装Node.js

为了运行 Angular,需要安装 Nodejs。本文将省略有关 Nodejs 的详细介绍。

[NodeJS]
https://nodejs.org/
请注意,自Angular 6起,Node的版本必须为8及以上,因此请下载相应版本。

安装 Angular CLI

通过使用 Angular CLI 工具,可以轻松地创建和运行 Angular 项目。此外,您可以使用 npm 命令来安装 Angular CLI,请打开 Visual Studio Code 并运行以下命令。

 npm install -g @angular/cli

创建第一个Angular项目

当安装完成Angular CLI后,我们将开始创建Angular应用程序。
请打开Visual Studio Code,并在底部的终端中运行以下命令。该命令将自动开始安装Angular项目所需的库。

ng new myApp

在使用Angular CLI时,ng命令需要位于命令的开头。
之后需要用半角空格隔开,并接着是 new {项目名称},但是关于项目创建的其他用法,将根据需要进行解释说明。

当执行命令时,会有一些问题要回答,请分别回答”是”并继续创建项目。

image.png

顺便说一句,第一个问题”Would you like to add Angular routing? (y/N)”是在询问是否需要添加用于页面转换的模块,
第二个问题”Which stylesheet format would you like to use? (Use arrow keys)”是在询问要使用哪种样式表的格式。
如果没有特别偏好的话,我们可以选择CSS。

等待一段时间,我认为将会出现一个名为 myApp 的文件夹。
这样项目的创建就完成了。
由于在这里创建的项目只是一个模板,所以我们将从这个基础上开始创建应用程序。

image.png

e2e和node_modules等文件夹是自动生成的,但在创建应用程序时,我们实际上需要涉及的是src文件夹中的内容。
现在先不要担心它们。

下一次的

我想要在下一次谈到样品页面的内容。

广告
将在 10 秒后关闭
bannerAds