angular4实战(1) angular-cli

时间:2022-06-24
本文章向大家介绍angular4实战(1) angular-cli,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78077403

angular-cli

脚手架大大方便了,项目的开发,使用也非常简单。 https://cli.angular.io/ 提供了搭建一个angular项目的简单介绍。 本文就angular-cli这块的指令属性,在做一些扩展介绍。

npm install -g @angular/cli
ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

通过这四条命令,可以快速创建一个angular项目。 本章主要关注,ng new 这条命令。在下载好angular-cli之后,通过在命令行输入ng help可以获得angular-cli的指令详细介绍。

如果新建一个项目仅仅用上述5条,显然是不满足开发需求的,在介绍5条属性。

—style 指定生成项目的css预编译语言,例如 ng new PROJECT-NAME –style less 则创建的项目,由less开发。

—prefix 默认是app,可以选择改成其他的,如果不设置,那么项目生成的组件选择对象就是app开头,即:

—routing angular生成的项目默认是不带路由的,而路由在但也应用基本上是必备模块,因此在生成项目时需添加此属性。

—inline-style,–inline-template这两个属性放在一起介绍,一个是将css放在ts文件中,一个是将html放在ts文件中一起编写。用过vue或者react的同学应该非常熟悉。我这边都是没有做inline设置的,个人不喜欢这种把其他东西柔在脚本里的方式。

组件生成

之前用angularjs的时候,有自己写生成组件的脚本,换到4之后,发现天生带这个功能,很喜欢。比如生成一个名为stones的组件,只需运行命令:

ng g component stones

就ok了,然后会依照之前在ng new项目时的配置在app目录下生成相应的组件,并自动加入到依赖中,非常方便。

本章对angular-cli的介绍到此为止,下章具体介绍路由。

项目地址:https://github.com/jiwenjiang/angular4-material2