Angular CLI安装-慕源网

Angular CLI安装，Angular是一个用于创建 Web 应用程序的前端框架。它默认使用 typescript 为类创建逻辑和方法，但浏览器不识别 typescript。webpack 作用用于将这些 typescript 文件编译为 JavaScript。此外，在计算机上运行 Angular 项目需要大量配置文件。

Angular CLI是一个工具，它可以通过一些简单的命令为您执行所有这些操作。Angular CLI使用webpack behind来完成所有这些过程。

注意：请确保您已在系统中安装了 node 和 npm。您可以使用以下命令检查您的node 版本和 npm 版本：

node --version
npm --version

使用 Angular CLI 创建您的第一个应用程序的步骤：

第 1 步：安装 Angular cli
```
npm install -g @angular/cli
```

步骤 2：通过此命令创建新项目
为路由选项选择是，CSS 或 SCSS。
```
ng new myNewApp
```

第三步：进入你的项目目录
```
cd myNewApp
```

第 4 步：运行服务器并查看您的应用程序的运行情况
```
ng serve -o --poll=2000
```

目录结构介绍：

e2e它包含与自动化测试目的相关的代码。例如，如果您在某个页面上调用 REST API，那么返回状态码应该是什么，是否可以接受等等。
node_modules它保存所有开发依赖项（仅在开发时使用）和依赖项（用于开发以及生产时需要），添加到项目中的任何新依赖项都会自动保存到此文件夹。
src这个目录包含我们所有与项目相关的工作，即创建组件、创建服务、将 CSS 添加到相应的页面等。
package.json此文件存储有关已安装指定版本的项目中添加和使用的库的信息。每当将新库添加到项目中时，它的名称和版本都会添加到 package.json 中的依赖项中。

其他文件：作为初学者，您目前不需要这些文件，请不要为此烦恼。这些都用于编辑器配置和编译时所需的信息。Angular CLI 中的内置 webpack 为您管理一切。

在 src 文件夹内：

index.html这是应用程序的入口点，app-root标签是应用程序在这个单页应用程序上的入口点，在这个页面上，angular 将添加或删除 DOM 中的内容或将新内容添加到 DOM . Base href=”/”对于路由目的很重要。

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>MyNewApp</title>
		<base href="/">
		
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" type="image/x-icon" href="favison.ico">
	</head>
	<body>
		<app-root></app-root>
	</body>
</html>

style.scss这个文件是全局样式表，你可以添加许多组件通用的 CSS 类或选择器，例如，你可以导入自定义字体，导入 bootstrap.css 等。
assets它包含你项目的 js 图片、字体、图标和许多其他文件。

在应用程序文件夹内：

app.module.ts一个 Angular 项目是由许多其他模块组成的，为了创建一个应用程序，您必须在层次结构中为您的应用程序创建一个根模块。这个 app.module.ts 文件就是这样。如果要在根级别添加更多模块，可以添加。
- declarations 它是存储其组件的数组的引用。app 组件是创建项目时生成的默认组件。您必须将所有组件的引用添加到该数组中，以使它们在项目中可用。
- imports 如果你想添加模块，无论是Angular 的还是你必须将它添加到导入数组以使它们在整个项目中可用。
- providers 如果您将为您的应用程序创建服务，那么您将通过此提供者数组将其注入您的项目中。注入到模块的服务可供它使用，它是项目层次结构中的子模块。
- bootstrap这引用了创建的默认组件，即 AppComponent
app.component.html编辑此文件以更改页面。您可以将此文件编辑为 HTML 文件。直接使用 div 或 body 标签内使用的任何其他标签，这些是组件，不添加html head body标签。

<h1>
	Hello world
</h1>

<div>
	<p>
		This is my First Angular app.
	</p>
</div>

app.component.spec.ts这些是自动生成的文件，其中包含源组件的单元测试。
app.component.ts可以在 .ts 文件中做 HTML 结构的处理。处理将包括连接数据库、与其他组件交互、路由、服务等活动。
app.component.scss在这里你可以为你的组件添加 CSS。您可以编写 scss，由转译器进一步编译为 CSS。

处理项目时需要的更多命令：

ng generate component component_name
ng generate service service_name
ng generate directive directive_name

Angular CLI安装

常见问题FAQ

慕源网普通

发表评论取消回复

常见问题FAQ

慕源网 普通

发表评论 取消回复

相关推荐

慕源网普通

发表评论取消回复