前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular CLI 常用终端操作命令

Angular CLI 常用终端操作命令

作者头像
用户1437675
发布2018-08-20 11:07:12
2K0
发布2018-08-20 11:07:12
举报
文章被收录于专栏:Angular&服务Angular&服务

CLI常用命令


代码语言:javascript
复制
ng new project-name - 创建一个新项目,置为默认设置
ng build - 构建/编译应用
ng test - 运行单元测试
ng e2e - 运行端到端(end-to-end)测试
ng serve - 启动一个小型web服务器,用于托管应用
ng deploy - 即开即用,部署到Github Pages或者Firebase
代码语言:javascript
复制
    组件| 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配置端口


代码语言:javascript
复制
//   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文件名的路由模块

代码语言:javascript
复制
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> )和环境文件。默认情况下,使用开发构建目标和环境。

代码语言:javascript
复制
 --environment=dev--environment=prod 

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

代码语言:javascript
复制
//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>。

代码语言:javascript
复制
//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> 的文件夹。

代码语言:javascript
复制
//proxy.conf.json

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

然后我们需要配置命令符

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

代码语言:javascript
复制
//我们找到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

代码语言:javascript
复制
组件| 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>

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.05.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CLI常用命令
  • 关于CLI配置端口
  • 关于CLI生成路由
  • 关CLI构建编译项目
  • 关于 CLI 构建正式服务器打包文件和测试环境文件还有本地文件
  • 关于代理服务器
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档