Angular CLI 常用终端操作命令

CLI常用命令


ng new project-name - 创建一个新项目,置为默认设置
ng build - 构建/编译应用
ng test - 运行单元测试
ng e2e - 运行端到端(end-to-end)测试
ng serve - 启动一个小型web服务器,用于托管应用
ng deploy - 即开即用,部署到Github Pages或者Firebase
    组件| ng g component home/component/my-new-component     
    //相对生成组件生成位置在项目的根目录的  src/app/home/component(指令其他等等都可以用该方式生成)

    指令| ng g directive my-new-directive 
    
    管道| ng g pipe my-new-pipe 
    
    服务| ng g service my-new-service 
    
      类| ng g class my-new-class 
    
    接口| ng g interface my-new-interface 
    
    枚举| ng g enum my-new-enum 
    
    模块|ng g module my-module

关于CLI配置端口


//   0.0.0.0代表 对外开放的ip接口地址, 4201代表访问的端口号    49153 代表的热重载的端口号
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

关于CLI生成路由


CLI以多种方式支持路由:

初始化创建项目时,自动添加了 <code> @angular/router </code> ,自动添加到package.json 文件中

生成模块路由的时候可以使用指令 <code> ng g module my-module --routing</code> ,在 <code> src/app/my-module/ </code> 目录下创建名叫 my-module文件名的路由模块

ng g module my-module --routing

该文件包括一个空Routes对象,您可以填充不同组件和/或模块的路由。

该--routing选项还会生成与模块名称相同的默认组件。

您可以在创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。

关CLI构建编译项目


输入命令 <code> ng build </code> 来编译项目,生成编译后的文件存放目录在 项目根目录下 <code> dist/ </code> 目录下面

关于 CLI 构建正式服务器打包文件和测试环境文件还有本地文件


<code> ng build </code> 可以同时指定要与该构建(或)一起使用的构建目标( <code> --target=production或--target=development </code> )和环境文件。默认情况下,使用开发构建目标和环境。

 --environment=dev--environment=prod 

可以在 <b> angular-cli.json </b> 该文件中配置映射编译环境路径

//angular-cli.json文件


"environments": {
    "loca": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
}

这些选项也适用于服务命令。如果你不传递一个值 <code> environment </code>,它将默认为 <b> dev </b> 或者 <b> development </b> 和 <b> prod </b> 或者 <b>production</b>。

//cmd命令

//编译 angular-cli.json 文件配置  传的参数来编译不同服务端的文件如执行下面命令编译的是json文件中 <b>  envuronments.loca  </b> 配置的文件路径

ng build --environment=loca 


ng build --environment=prod

关于代理服务器


在webpack的dev服务器中使用代理支持,我们可以高速缓存某些url并将其发送到后端服务器。我们通过传递一个文件来做到这一点 <code> --proxy-config </code>

比如说我们有一台服务器正在运行 <b>http://localhost:8080/api </b>,我们希望所有的请求都到 <b> http://localhost:4200/api </b> 这个个服务器上。

我们 在 <code> package.json </code> 的同级目录下面创建一个为 <code> proxy.conf.json </code> 的文件夹。

//proxy.conf.json

        {
            "/api": {                                           //所有  api  的访问请求全部进行代理
                "target": "http://192.168.1.52:8080/",
                "secure": false
            }
        }

然后我们需要配置命令符

修改 <b> package.json </b> 文件

//我们找到packag.json文件找到   "start"  属性然后修改为   ng serve --proxy-config loca.conf.json

    "scripts": {
        "start": "ng serve --proxy-config loca.conf.json",
    },

然后我们运行我们的项目 <code> npm start </code> 这样我们所有http://localhost:8080/api 下面的请求都可以通过 “ http://localhost:4200/api ”访问了。

更多angular-cli配置 https://github.com/angular/angular-cli/wiki

组件| ng g component my-new-component 
指令| ng g directive my-new-directive 
管道| ng g pipe my-new-pipe 
服务| ng g service my-new-service 
  类| ng g class my-new-class 
接口| ng g interface my-new-interface 
枚举| ng g enum my-new-enum 
模块|ng g module my-module
还有不全的望大家留言,大家互相学习。

<h6 align = "right">sivona</h6>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

一款lightbox图片幻灯片浏览插件

23660
来自专栏前端技术总结

TypeScript入门教程(一)

本文是TypeScript的入门文章,将分别从下面四点对TypeScript进行介绍:

3.2K550
来自专栏互联网杂技

js刷新页面

如何实现刷新当前页面呢?借助js你将无所不能。 1,reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGe...

1.2K50
来自专栏云加头条

腾讯云存储最佳实践系列一:使用对象存储COS托管静态网站

在此实践中,用户可以在腾讯云对象存储(以下简称 COS)上托管静态网站,访客可以通过自定义域名(例如 www.example.com )访问托管的静态网站。无论...

92300
来自专栏码农笔录

cordova打包vue2(webpack)android、ios app

44020
来自专栏运维技术迷

限制用户使用su切换身份

如果不想任何人都可以用su命令成为root或只让某些用户有权使用su命令,那么只需要修改/etc/pam.d/su文件中配置即可实现.建议尽量限制用户通过su命...

415100
来自专栏Porschev[钟慰]的专栏

Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs

前言   前面也学习了一些Node.js的基本入门知道,现在开始进入Web开发的部分;   Node.js提供了http模块,这个模块中提供了一些底层接口,可...

346100
来自专栏vue学习

5.vue-router之什么是编程式路由

首先我们来讲讲简单的,上面两个方法记住,等效的。 ① 还是在test.vue组件里面写个div并给它添加一个click跳转事件:

12830
来自专栏coding

windows下安装redis并在后台静默开启

16320
来自专栏Django中文社区

django 实现简单的搜索功能

搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用 django model 层提供的一些内置方法来完成。本文将结合 django 模型管理器的 fi...

1.2K50

扫码关注云+社区

领取腾讯云代金券