Angular CLI | Angular项目部署详细指南 _click

Angular
是用于创建Web应用程序的前端框架。默认情况下, 它使用打字稿为类创建逻辑和方法, 但浏览器不知道打字稿。这里的webpack是图片, webpack用于将这些打字稿文件编译为JavaScript。此外, 有太多配置文件, 你需要在计算机上运行一个Angular 项目。
Angular CLI
是一个工具, 可以通过一些简单的命令为你完成所有这些操作。 Angular CLI使用后面的webpack来完成所有此过程。
注意：请确保已在系统中安装了node和npm。你可以使用以下命令检查节点版本和npm版本：

node --version npm --version

文章图片
使用angular CLI创建第一个应用程序的步骤：
步骤1：安装Angle CLI

npm install - g @angular/cli

文章图片
步骤2：通过此命令创建新项目
选择"是"作为路由选项, 然后选择" CSS"或" SCSS"。

ng new myNewApp

文章图片

文章图片
步骤3：转到你的项目目录

cd myNewApp

文章图片
步骤4：运行服务器并查看运行中的应用程序

ng serve -o --poll=2000

文章图片

文章图片
目录结构简介：

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

文章图片
其它文件：作为初学者, 你现在不需要这些文件, 不用担心。这些全部用于编辑器配置和编译时所需的信息。Angular CLI中的内置webpack可以为你管理一切。
里面的src文件夹：

index.html这是应用程序的入口, 应用根标签是该单页应用程序上应用程序的入口点, 在此页面上, angular将在DOM中添加或删除内容, 或将新内容添加到DOM。基础href ="https://www.lsbin.com/"对于路由目的很重要。 filter_none
编辑
关
play_arrow
链接
亮度_4
代码

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

chevron_right

filter_none

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

内部应用程序文件夹：

app.module.tsAngular 项目是由许多其他模块组成的, 为了创建应用程序, 你必须为层次结构中的应用程序创建根模块。这个app.module.ts文件就是那个。如果要在根级别添加更多模块, 则可以添加。
- 声明书它是存储其组件的数组的引用。应用程序组件是创建项目时生成的默认组件。你必须将所有组件的引用添加到该数组, 以使其在项目中可用。
- 进口如果要添加任何模块, 无论是Angular 模块, 还是必须将其添加到导入数组, 以使其在整个项目中可用。
- 提供者如果要为应用程序创建任何服务, 则将通过此提供程序数组将其注入到项目中。注入到模块的服务及其项目层次结构中的子模块均可用。
- Bootstrap这参考了创建的默认组件, 即AppComponent
app.component.html编辑此文件以更改页面。你可以将此文件编辑为HTML文件。直接与div或body标签内使用的任何其他标签一起使用, 这些是组件, 请勿添加HTML头部标签。 filter_none
编辑
关
play_arrow
链接
亮度_4
代码

< h1 > Hello world < / h1 > < div > < p > This is my First Angular app. < / p > < / div >
chevron_right

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