Angular命令行界面


动机

Angular与其命令行界面(CLI)密切相关。 CLI简化了Angular文件系统的生成。它处理幕后的大多数配置,因此开发人员可以开始编码。 CLI也有一个低学习曲线,值得推荐给任何想要直接进入的新手。哎呀,即使是经验丰富的Angular开发人员也依赖于CLI!

安装

Angular CLI需要Node.js和Node Packet Manager(NPM) 。您可以使用terminal命令检查这些程序: node -v; npm -v 。安装完成后,打开终端并使用以下命令安装Angular CLI: npm install -g @angular/cli 。这可以在系统的任何位置执行。 CLI配置为使用-g标志进行全局使用。

使用以下命令验证CLI是否存在: ng -v 。这输出了几行信息。其中一行说明了已安装CLI的版本。

认识到ng是CLI的基本构建块。您的所有命令都将以ng开头。是时候看看以ng为前缀的四个最常见的命令了。

关键命令

  • 新的

  • 服务

  • ng生成

  • 建立

  • ng更新

ng new

ng new创建了一个新的 Angular文件系统。这是一个超现实的过程。请导航到_新_应用程序生成所需的文件位置。键入以下命令,将[name-of-app]替换[name-of-app]您想要的任何内容: ng new [name-of-app]

应显示[name-of-app]文件夹下的文件系统。随意探索内在的东西。尽量不做任何改动。运行第一个Angular应用程序所需的所有内容都将在此生成的文件系统中打包在一起。

ng serve

要使应用程序运行, ng serve命令必须在[name-of-app]文件夹中执行。文件夹中的任何位置都可以。 Angular CLI必须认识到它位于使用ng new生成的环境中。它将在这一条件下运行。继续尝试: ng serve

默认情况下,应用程序在端口4200上运行。您可以通过在任何Web浏览器中导航到localhost:4200来查看Angular应用程序。 Angular适用于所有浏览器。除非您使用旧版本的Internet Explorer,否则将弹出应用程序。它显示官方的Angular徽标以及一系列有用的链接。

好的,应用程序运行。它有希望发挥作用,但你需要知道幕后发生了什么。请参阅[name-of-app]文件系统。导航[name-of-app] -> src -> app 。其中的文件负责您在localhost:4200上看到的内容。

ng生成

.component文件定义Angular组件,包括其逻辑( .ts ),样式( .css ),布局( .html )和测试( .spec.ts )。 app.module.ts特别突出。这两组文件一起作为componentmodule一起工作。 componentmodule都是Angular原理图的两个独立示例。原理图分类代码_能发生_与不同目的导向块ng generate

为了本文的目的,请了解module向底层组件树导入和导入资产。 component关注用户界面的一个部分。该单元的逻辑,样式,布局和测试仍然封装在各种.component文件中。

对于ng generate ,此命令可以为每个可用的Angular原理图生成骨架。导航到[name-of-app -> src -> app] 。尝试通过执行以下命令ng generate component [name-of-component]componentng generate component [name-of-component] 。用你想要的任何东西替换[name-of-component] 。将弹出一个新文件[name-of-component]及其必要的component文件。

您可以看到ng generate加速了Angular的样板代码 。 ng generate也可以解决问题。在Angular文件系统的上下文中创建的Schematics与系统的根模块连接。在这种情况下,这将是[name-of-app -> src -> app] app.module.ts文件。

建立

Angular是一个前端工具。 CLI代表前端执行其操作。 ng serve负责后端服务器设置。这使开发完全集中在前端。也就是说,也必须将您自己的后端连接到Angular应用程序。

ng build满足了这个需求。在文件系统内部尝试之前。导航到[name-of-app] -> angular.json 。寻找这一行代码: "outputPath": "dist/my-app"

这一行配置确定ng build转储其结果的位置。结果是将整个Angular应用程序编译成一个文件夹dist/my-app 。在该文件夹内,存在index.html 。整个Angular应用程序可以使用index.html运行。从这里开始不需要ng serve 。使用此文件,您可以轻松连接后端。

试一试: ng build 。同样,这必须在Angular文件系统中执行。基于angular.json“outputPath:”angular.json 。将生成一个文件,其中原始应用程序已完全编译。如果保持“outputPath:”相同,则编译的应用程序将位于: [name-of-app] -> dist -> [name-of-app]

ng更新

在角度更新中,对所有角度和npm包进行自动更新以获得最新版本。

以下是可以与ng update一起使用的语法和选项。

ng update [package]

选项

  • 干运行 --dry-run (alias: -d)

    无需进行任何更改即可运行。

  • --force

    如果为false,如果安装的软件包与更新不兼容,则会出错。

  • 所有 --all

    是否更新package.json中的所有包。

  • 下一个 --next

    使用最大的版本,包括beta和RC。

  • 迁移,只 --migrate-only

    仅执行迁移,不更新已安装的版本。

  • --from

    要从中迁移的版本。仅在更新单个程序包时可用,且仅在仅迁移时才可用。

  • --to

    要应用迁移的版本。仅适用于正在更新的单个程序包,且仅适用于仅迁移。需要指定。默认为检测到的已安装版本。

  • 注册处 --registry

    要使用的NPM注册表。

结论

这些命令实现了基础知识。 Angular的CLI是一种令人难以置信的便利,可加速应用程序生成,配置和扩展。它在保持灵活性的同时完成所有这些,允许开发人员进行必要的更改。

如果您还没有,请查看localhost:4200上的链接。在打开之前不要忘记运行ng serve 。通过更好地理解CLI,您现在可以了解有关其最基本命令生成的内容的更多信息。

更多Angular教程

学习更多Angular教程