标签：框架   rom   css   script   hang   configure   efault   edit   启动   

Angular CLI：入门指南 (一)

Angular CLI是一个功能强大的工具，可轻松构建高质量的Angular应用程序。 
借助Angular CLI，我们只需很少的工作即可构建，开发，测试
构建和部署Angular应用程序。
对于初学者来说，需要了解Angular CLI的一些命令，
可以帮助他们快速启动新的Angular项目.
例如: `ng new`, `ng generate`, `ng serve`等等。
但是对于angular或者前端的专家而言，Angular CLI不仅仅是一个脚手架工具,
它是一组可以提高开发团队的工作效率，Angular应用程序的质量和性能的工具。

什么是 Angular CLI?

Angular CLI是Angular生态系统中使用的官方命令行界面。 它的目标是使构建高质量Angular应用程序变得容易。

Angular CLI是用于Angular开发的完整工具包，它为您提供了一种方法，可以通过ng new快速构建新项目，通过ng从预定义的蓝图生成代码，通过ng update更新现有代码，以及通过ng add为Angular添加一些框架支持。

它还负责项目的构建过程（ng build），并为您提供了开箱即用的方法：

• 通过lint进行TSLint集成.
• 通过测试提供单元测试支持
• 通过e2e提供端到端测试支持
• 通过服务开发服务器
• 还有更多

如何安装 ?

安装前提

要使用Angular CLI，我们必须在计算机中安装Node.js的最新活动LTS版本。

要验证是否安装了Node.js，请在终端窗口中运行node -v并检查显示的版本是否大于10.9。

安装Angular CLI

安装完node.js后npm(软件包管理器)会一起安装，我们将使用npm安装 Angular CLI 打开一个窗口并在窗口中运行如下命令:

npm install -g @angular/cli

成功安装Angular CLI后，我们就可以在命令行上将其作为ng可执行文件使用。

要验证是否已正确安装CLI，请在终端上运行以下命令：

ng version

这将输出您已安装的Angular CLI的版本以及其他一些信息，例如您正在使用的Node.js的版本以及当前的操作系统。

jasondayee-MBP:~ Home$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.14
Node: 12.13.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.14
@angular-devkit/core         8.3.14
@angular-devkit/schematics   8.3.14
@schematics/angular          8.3.14
@schematics/update           0.803.14
rxjs                         6.5.3

现在，我们准备继续探索Angular CLI。

Hello Angular!

像我们学习其他开发语言的第一步hello word一样，我们创建第一个项目 Hello Angular

要创建一个新的Angular项目，我们使用ng new命令：

ng new my-app  

回答以下问题后，此命令将为您创建一个新的Angular项目：

• “Do you want routing?”您很可能需要在Angular应用程序中进行路由，但是现在让我们通过按ENTER使用默认值（No）。
• “Which stylesheet format do you want?”再次按Enter，CLI将使用CSS（默认样式表格式）。

示例输出：

CREATE my-app/README.md (1027 bytes)
CREATE my-app/.editorconfig (246 bytes)
CREATE my-app/.gitignore (631 bytes)
CREATE my-app/angular.json (3593 bytes)
CREATE my-app/package.json (1290 bytes)
CREATE my-app/tsconfig.json (543 bytes)
CREATE my-app/tslint.json (1988 bytes)
CREATE my-app/browserslist (429 bytes)
CREATE my-app/karma.conf.js (1018 bytes)
CREATE my-app/tsconfig.app.json (270 bytes)
CREATE my-app/tsconfig.spec.json (270 bytes)
CREATE my-app/src/favicon.ico (948 bytes)
CREATE my-app/src/index.html (291 bytes)
CREATE my-app/src/main.ts (372 bytes)
CREATE my-app/src/polyfills.ts (2838 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/test.ts (642 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
CREATE my-app/src/environments/environment.prod.ts (51 bytes)
CREATE my-app/src/environments/environment.ts (662 bytes)
CREATE my-app/src/app/app.module.ts (314 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/src/app/app.component.html (24263 bytes)
CREATE my-app/src/app/app.component.spec.ts (981 bytes)
CREATE my-app/src/app/app.component.ts (210 bytes)
CREATE my-app/e2e/protractor.conf.js (810 bytes)
    Successfully initialized git.

ng new命令为新的Angular项目提供了所有必需的文件，并安装了Angular开发所需的所有依赖项。

现在，您可以运行以下命令，进入my-app目录并在浏览器中启动新生成的项目：

cd my-app
ng serve

打开浏览器访问localhost:4200 应该看到以下内容:

恭喜你！ 您已经成功开发了第一个Angular应用程序。 这就是开始使用Angular CLI所需的全部：两个命令??。

从CLI获取帮助

在开始之前，我想指出一下，你可以将一些选项传递给大多数Angular CLI命令。 最重要的选项是--help，以获得有关CLI的帮助。

The --help option

ng help

 ng -help
Available Commands:
  add Adds support for an external library to your project.
  analytics Configures the gathering of Angular CLI usage metrics. See https://v8.angular.io/cli/usage-analytics-gathering.
  build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
  deploy (d) Invokes the deploy builder for a specified project or for the default project in the workspace.
  config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
  doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
  e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.
  generate (g) Generates and/or modifies files based on a schematic.
  help Lists available commands and their short descriptions.
  lint (l) Runs linting tools on Angular app code in a given project folder.
  new (n) Creates a new workspace and an initial Angular app.
  run Runs an Architect target with an optional custom builder configuration defined in your project.
  serve (s) Builds and serves your app, rebuilding on file changes.
  test (t) Runs unit tests in a project.
  update Updates your application and its dependencies. See https://update.angular.io/
  version (v) Outputs Angular CLI version.
  xi18n Extracts i18n messages from source code.

For more detailed help run "ng [command name] --help"

如你所见，有很多命令。 他们中的许多人接受相似的论据和选择，因为他们完成相似的任务。 因此，记住所有内容并不重要。 相反，专注于Angular CLI的思维模型，您将掌握最重要的命令和选项。 这将帮助您了解为什么某些Angular CLI命令以这种方式工作。

Angular CLI：入门指南 (一)

标签：框架   rom   css   script   hang   configure   efault   edit   启动   

原文地址：https://www.cnblogs.com/jasondayee/p/12160580.html