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

2021年3月18日16:27:27 发表评论 893 次浏览

Angular

是用于创建Web应用程序的前端框架。默认情况下, 它使用打字稿为类创建逻辑和方法, 但浏览器不知道打字稿。这里的webpack是图片, webpack用于将这些打字稿文件编译为JavaScript。此外, 有太多配置文件, 你需要在计算机上运行一个Angular 项目。

Angular CLI

是一个工具, 可以通过一些简单的命令为你完成所有这些操作。 Angular CLI使用后面的webpack来完成所有此过程。

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

node --version
npm --version
Angular CLI | Angular项目设置1

使用angular CLI创建第一个应用程序的步骤:

步骤1:安装Angle CLI

npm install - g @angular/cli
Angular CLI | Angular项目设置2

步骤2:通过此命令创建新项目

选择"是"作为路由选项, 然后选择" CSS"或" SCSS"。

ng new myNewApp
Angular CLI | Angular项目设置3
Angular CLI | Angular项目设置4

步骤3:转到你的项目目录

cd myNewApp
Angular CLI | Angular项目设置5

步骤4:运行服务器并查看运行中的应用程序

ng serve -o --poll=2000
Angular CLI | Angular项目设置6
Angular CLI | Angular项目设置7

目录结构简介:

Angular CLI | Angular项目设置8

e2e包含与自动化测试目的相关的代码。例如, 如果在某个页面上你正在调用REST API, 则返回状态代码应该是什么, 无论该代码是否可接受等。

node_modules它将保存所有dev依赖项(仅在开发时使用)和依赖项(用于开发以及生产时所需), 任何添加到项目中的新依赖项都将自动保存到此文件夹中。

src此目录包含我们与项目有关的所有工作, 即创建组件, 创建服务, 将CSS添加到相应页面等。

package.json

此文件存储有关在安装了指定版本的项目中添加和使用的库的信息。每当将新库添加到项目时, 它的名称和版本都会添加到package.json中的依赖项。

Angular CLI | Angular项目设置9

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

里面的src文件夹:

  • index.html这是应用程序的入口, 应用根标签是该单页应用程序上应用程序的入口点, 在此页面上, angular将在DOM中添加或删除内容, 或将新内容添加到DOM。基础href =" /"对于路由目的很重要。
    filter_none

    编辑

    play_arrow

    链接
    亮度_4
    代码

    <!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" typw = "image/x-icon" href = "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。

在项目上工作时需要的更多命令:

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

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: