适用于初学者的 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 {项目名称},但是关于项目创建的其他用法,将根据需要进行解释说明。
当执行命令时,会有一些问题要回答,请分别回答”是”并继续创建项目。
顺便说一句,第一个问题”Would you like to add Angular routing? (y/N)”是在询问是否需要添加用于页面转换的模块,
第二个问题”Which stylesheet format would you like to use? (Use arrow keys)”是在询问要使用哪种样式表的格式。
如果没有特别偏好的话,我们可以选择CSS。
等待一段时间,我认为将会出现一个名为 myApp 的文件夹。
这样项目的创建就完成了。
由于在这里创建的项目只是一个模板,所以我们将从这个基础上开始创建应用程序。
e2e和node_modules等文件夹是自动生成的,但在创建应用程序时,我们实际上需要涉及的是src文件夹中的内容。
现在先不要担心它们。
下一次的
我想要在下一次谈到样品页面的内容。