角cli y章纸

Tavish Aggarwal.

 

T

他的角队团队带来了一个非常方便的工具来引导角度应用程序,并为应用程序添加新功能。该工具被称为Angular-CLI。

 

要将Angular-CLI安装到系统,我们需要安装NodeJS。我们安装了一个我们需要安装NPM依赖项 棱角-cli. 在全球范围内。 o安装它打开终端/命令提示符并运行命令:

npm install -g @angular/cli

这将全局安装Angular-CLI包,现在我们可以创建一个新的应用程序。要创建新的应用程序,我们需要键入命令:

ng new <Project name>

我们有一个项目准备好,转到项目目录并提供服务:

cd <Project name>
ng serve

这将在4200端口提供申请。而已。

下面是可以帮助您快速引用和运行命令的作战文件。如果您在角度CLI命令上需要更多的时间点,请参阅 文档.

角cli y章纸

ng new <project name>  # To create a new project

ng serve  # To host the project on 4200 port

ng serve --port <port no> --host <host name> # To host application specific host/port

我们也可以使用简短的别名:

ng s --p <port no> --h <hostname>

一些其他有用的命令

ng lint # To lint and look for JavaScript errors

ng lint --format stylish # Linting and formatting the output

ng lint --fix # Lint and attempt to fix all the problems

ng build # to build a project in the dist folder

ng build ---target <target name> # Target for which we want to build

ng build --prod # To build in production mode

ng test # To run spec files

ng e2e # To run e2e test cases

ng doc # To look for angular documentation

ng help # To get help on angular cli commands

更改.Angular-CLI.JSON配置

ng set # to change properties

# For e.g. ng set default.styleExt scss
# ng set default.styleExt scss -g -- To set in global angular-cli file

成分

ng generate component <component name> # To generate new component
ng g c <component name> # Short notation to generate component

ng g c <component name> --flat # Want to generate folder name as well?

ng g c <component name> --inline-template # Want to generate HTML file?
ng g c <component name> -it # Short notation

ng g c <component name> --inline-style # Want to generate css file?
ng g c <component name> -is # Short notation

ng g c <component name> --spec # Want to generate spec file?

ng g c <component name> --view-encapsulation # View encapsulation stratergy
ng g c <component name> -ve # Short notation

ng g c <component name> --change-detection # Change detection strategy
ng g c <component name> -cd # Short notation

ng g c <component name> --dry-run # To only report files and don't write them
ng g c <component name> -d # Short notation


ng g c <component name> -m <module name> -d 
# Name of module where we need to add component as dependency

指令和服务

ng generate directive <directive-name> # To generate directive
ng g d <directive-name> # short notation

ng g d <directive-name> -d # To only report files and don't write them

ng generate service <service-name> # To generate service
ng g s <service-name> # short notation

ng g s <service-name> -d # To only report files and don't write them

ng g s <service-name> -m <module name> 
# Name of module where we need to add service as dependency

类,接口,管道和枚举

ng generate class <class name> # To generate class
ng g cl <class name> # short notation

ng generate interface <interface name> # To generate interface
ng g i <interface name> # short notation

ng generate pipe <pipe name> # To generate pipe
ng g p <pipe name> # short notation

ng generate enum <enum name> # To generate enum
ng g e <enum name> # short notation

模块和路由

ng generate module <module name> # To generate module
ng g m <module name> # To short notation

ng g m <module name> --spec true -d # To generate spec file for the module

ng g m <module name> --routing # To generate module with routing file

ng g guard <guard name> # To generate guard to route

奖金主题

来源地图资源管理器

源地图资源管理器是一个用于查看Treemap可视化以知道代码(从哪个文件或模块)来自的工具。我们可以通过使用它更好地了解它。要下载工具运行命令,如下所示:

npm install -g source-map-explorer

现在我们有源地图资源管理器全局安装。首先要查看可视化,我们需要构建我们的角度应用,然后查看可视化。请参阅下面显示的命令:

ng build # To build the solution
source-map-explorer dist/main.bundle.js # Open a treemap visualization

在这篇文章中,我试图涵盖所有可能的ng命令。如果我错过了任何命令,请在评论部分中告诉我。

作者信息

Tavish Aggarwal.

网站: http://tavishaggarwal.com

Tavish Aggarwal.是一个数据科学家 在一个海德拉巴工作,具有广泛的经验,在跨电子商务,财务,医疗保健等等不同领域解决现实世界的业务问题。 他对技术充满热情,喜欢在团队中工作。

类别