Angular CLI安装

作者 : 慕源网 本文共2111个字,预计阅读时间需要6分钟 发布时间: 2022-04-28 共247人阅读

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

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录