Angular随记：Angular CLI安装及使用

鸡肋佐

已于 2022-12-30 13:31:23 修改

阅读量1.2k

点赞数 1

分类专栏： Angular随记文章标签： python pandas 人工智能

于 2022-12-30 12:14:28 首次发布

本文链接：https://blog.csdn.net/weixin_38201372/article/details/128493235

版权

Angular随记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、安装 Angular CLI

执行如下安装命令：

npm install -g @angular/cli

执行成功后就可以执行 CLI 命令了。

二、Angular CLI 使用

1.命令总览

首先，执行 ng help，我们看下都有哪些命令。

aaaaa@xxxMacBook-Pro my-app % ng help
ng <command>

Commands:
  ng add <collection>            Adds support for an external library to your
                                 project.
  ng analytics                   Configures the gathering of Angular CLI usage
                                 metrics.
  ng build [project]             Compiles an Angular application or library into an
                                 output directory named dist/ at the given output
                                 path.                                 [aliases: b]
  ng cache                       Configure persistent disk cache and retrieve cache
                                 statistics.
  ng completion                  Set up Angular CLI autocompletion for your
                                 terminal.
  ng config [json-path] [value]  Retrieves or sets Angular configuration values in
                                 the angular.json file for the workspace.
  ng deploy [project]            Invokes the deploy builder for a specified project
                                 or for the default project in the workspace.
  ng doc <keyword>               Opens the official Angular documentation
                                 (angular.io) in a browser, and searches for a
                                 given keyword.                        [aliases: d]
  ng e2e [project]               Builds and serves an Angular application, then
                                 runs end-to-end tests.                [aliases: e]
  ng extract-i18n [project]      Extracts i18n messages from source code.
  ng generate                    Generates and/or modifies files based on a
                                 schematic.                            [aliases: g]
  ng lint [project]              Runs linting tools on Angular application code in
                                 a given project folder.
  ng new [name]                  Creates a new Angular workspace.      [aliases: n]
  ng run <target>                Runs an Architect target with an optional custom
                                 builder configuration defined in your project.
  ng serve [project]             Builds and serves your application, rebuilding on
                                 file changes.                         [aliases: s]
  ng test [project]              Runs unit tests in a project.         [aliases: t]
  ng update [packages..]         Updates your workspace and its dependencies. See
                                 https://update.angular.io/.
  ng version                     Outputs Angular CLI version.

2.创建应用

ng new [name]

创建应用详见：

Angular随记：创建一个Angular项目_鸡肋佐的博客-CSDN博客

3.启动运行项目

cd到项目目录下，执行如下命令，执行ng serve或者npm run serve命令启动应用。

ng serve --open

4.创建指定的功能文件

ng generate [功能类型]

ng g <schematic>              Run the provided schematic.               [default]
  ng g app-shell                Generates an application shell for running a
                                server-side version of an app.
  ng g application [name]       Generates a new basic application definition in the
                                "projects" subfolder of the workspace.
                                                                     [aliases: app]
  ng g class [name]             Creates a new, generic class definition in the
                                given or default project.             [aliases: cl]
  ng g component [name]         Creates a new, generic component definition in the
                                given or default project.              [aliases: c]
  ng g directive [name]         Creates a new, generic directive definition in the
                                given or default project.              [aliases: d]
  ng g enum [name]              Generates a new, generic enum definition for the
                                given or default project.              [aliases: e]
  ng g guard [name]             Generates a new, generic route guard definition in
                                the given or default project.          [aliases: g]
  ng g interceptor [name]       Creates a new, generic interceptor definition in
                                the given or default project.
  ng g interface [name] [type]  Creates a new, generic interface definition in the
                                given or default project.              [aliases: i]
  ng g library [name]           Creates a new, generic library project in the
                                current workspace.                   [aliases: lib]
  ng g module [name]            Creates a new, generic NgModule definition in the
                                given or default project.              [aliases: m]
  ng g pipe [name]              Creates a new, generic pipe definition in the given
                                or default project.                    [aliases: p]
  ng g resolver [name]          Generates a new, generic resolver definition in the
                                given or default project.              [aliases: r]
  ng g service [name]           Creates a new, generic service definition in the
                                given or default project.              [aliases: s]
  ng g service-worker           Pass this schematic to the "run" command to create
                                a service worker
  ng g web-worker [name]        Creates a new, generic web worker definition in the
                                given or default project.