Angular CLI 使用教程指南参考小结
安装
要安装Angular CLI你需要先安装node和npm，然后运行以下命令来安装最新的Angular CLI：
注意：Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。
npm install -g angular-cli
在 Mac 或 Linux 平台上，你可能需要添加sudo前缀提权进行全局安装：
sudo npm install -g angular-cli
基本用法
你可以通过 Angular CLI 的 help 命令来获取相关的命令信息.
ng help
Angular CLI的命令关键字为 ng
ng new
| 命令 | 描述 |
|---|---|
| ng new <project-name> [options] | 创建一个新的 Angular 项目,默认在当前所在目录下 |
| 参数 | 描述 |
|---|---|
| --dry-run -d | 只输出要创建的文件和执行的操作，实际上并没有创建项目 |
| --verbose -v | 输出详细信息 |
| --skip-npm | 在项目第一次创建时不执行任何npm命令 |
| --name | 指定创建项目的名称 |
ng serve
ng new PROJECT_NAME cd PROJECT_NAME ng serve
将会自动在浏览器中打开默认地址 http://localhost:4200/. 运行之后如果你修改了程序源代码.应用将会自动重载.
你也可以自定义配置 IP, 端口和实时重载端口号
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
ng init
| 命令 | 描述 |
|---|---|
| ng init <project-name> [options] | 在当前所在目录下初始化一个新的 Angular 项目 |
| 参数 | 描述 |
|---|---|
| --dry-run -d | 只输出要创建的文件和执行的操作，实际上并没有创建项目 |
| --verbose -v | 输出详细信息 |
| --skip-npm | 在项目第一次创建时不执行任何npm命令 |
| --name | 指定创建项目的名称 |
ng completion
| 命令 | 描述 |
|---|---|
| ng completion | 将自动完成功能添加到ng命令的shell中 |
ng doc
| 命令 | 描述 |
|---|---|
| ng doc <keyword> | 在浏览器中打开Angular文档并搜索当前关键字 |
ng e2e
| 命令 | 描述 |
|---|---|
| ng e2e | 使用protractor在当前应用中运行e2e测试 |
ng format
| 命令 | 描述 |
|---|---|
| ng format | 使用clang-format格式化当前项目代码 |
ng generate
| 命令 | 描述 |
|---|---|
| ng generate <type> [options] | 在项目中构建新代码 |
| ng g <type> [options] | 简写 |
| 支持的类型 | 用法 |
|---|---|
| Component | ng g component my-new-component |
| Directive | ng g directive my-new-directive |
| Pipe | ng g pipe my-new-pipe |
| Service | ng g service my-new-service |
| Class | ng g class my-new-class |
| Interface | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
| Module | ng g module my-module |
| Route | ng g route my-route当前已禁用 |
构建的组件都会使用自用目录,除非 --flat 单独指定.
| 参数 | 描述 |
|---|---|
| --flat | 不在自用目录内创建代码 |
| --route=<route> | 指定父路由.仅用于生成组件和路由.默认为指定的路径. |
| --skip-router-generation | 跳过生成父路由配置。只能用于路由命令。 |
| --default | 指定路由应为默认路由。 |
| --lazy | 指定路由是延迟的。 默认为true。 |
ng get
| 命令 | 描述 |
|---|---|
| ng get <path1, path2, ...pathN> [options] | 从Angular CLI配置获取值 |
pathN是一个有效的JavaScript参数路径，例如“users[1].userName”。 如果未设置该值，将显示“undefined”。 此命令默认情况下仅在项目目录中工作。
| 参数 | 描述 |
|---|---|
| --global | 返回全局配置值，而不是本地配置值（如果都设置）. 此选项还可以使命令在项目目录外工作 |
ng set
| 命令 | 描述 |
|---|---|
| ng get <path1=value1, path2=value2, ...pathN=valueN> [options] | 在Angular CLI配置中设置值 |
默认情况下，如果在项目内部运行，则设置项目配置中的值，如果不在项目内部，则失败。 pathN参数是一个有效的JavaScript路径，如“users [1] .userName”。 该值将被强制转换为正确的类型，或者如果类型无法强制，则会抛出错误。
| 参数 | 描述 |
|---|---|
| --global | 设置全局配置值，而不是本地配置值。 这也使ng set可以在项目之外工作。 |
ng build
构建工件将存储在/dist目录中。
ng build可以指定构建目标（--target = production或--target = development）和要与该构建一起使用的环境文件（--environment = dev或--environment = prod）。 默认情况下，使用开发构建目标和环境。
# 这是生产构建 ng build --target=production --environment=prod ng build --prod --env=prod ng build --prod # 这是开发构建 ng build --target=development --environment=dev ng build --dev --e=dev ng build --dev ng build
ng github-pages:deploy
| 命令 | 描述 |
|---|---|
| ng github-pages:deploy [options] | 构建生产应用程序，设置GitHub存储库，然后发布应用程序。 |
| 参数 | 描述 |
|---|---|
| --message=<message> | 构建并提交信息.默认为 "new gh-pages version" |
| --environment=<env> | angular 环境构建。 默认为“production” |
| --branch=<branch-name> | 推送页面的git分支。 默认为“gh-branch” |
| --skip-build | 在发布之前跳过构建项目 |
| --gh-token=<token> | 用于部署的API令牌,必须. |
| --gh-username=<username> | 使用的Github用户名,必须. |
ng lint
| 命令 | 描述 |
|---|---|
| ng lint | 在项目上运行codelyzer linter |
ng test
| 命令 | 描述 |
|---|---|
| ng test [options] | 使用 karma 运行单元测试 |
| 参数 | 描述 |
|---|---|
| --watch | 继续运行测试. 默认为true |
| --browsers, --colors, --reporters, --port, --log-level | 这些参数直接传递给karma |
ng version
| 命令 | 描述 |
|---|---|
| ng version | 输出cli版本, node 版本和操作系统信息 |
| 参数 | 描述 |
|---|---|
| --watch | 继续运行测试. 默认为true |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Angular 开发学习之Angular CLI的安装使用
前面我们已经准备好开发环境,现在可以正式开发了.正如前面提到的,Angular 提供了一个命令行工具,可以简化我们的程序开发.我们今后的开发也会使用这一工具,因此我们需要首先安装这个名为 Angular CLI 的开发工具. 安装 CLI 的过程很简单,与安装其它工具.甚至是安装一个普通开发包没什么区别.我们前面已经配置好 NPM Registry.安装成功 yarn,那么就使用 yarn 来安装这个工具.具体的命令是: yarn global add @angular/cli 参数 globa
-
Angular CLI 安装和使用教程
背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程,比如:ionic cli.vue cli等:它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布. 安装Angular CLI 1.首先确认安装了node.js和npm // 显示当前node和npm版本 $ node -
-
使用Angular CLI进行Build(构建)和Serve详解
第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/article/136621.htm 第二篇文章是: "使用angular cli从蓝本生成代码" :http://www.jb51.net/article/137031.htm 第三篇文章是: "使用Angular CLI生成路由" :http://www.jb51.net/article/137033.htm Build. Bui
-
Angular4学习之Angular CLI的安装与使用教程
简介 关于"Angular"版本,"Angular"官方已经统一命名Angular 1.x同一为Angular JS,Angular 2.x及以上统称"Angular". "CLI"是"Command Line Interface"的简写,是一种命令行接口,实现自动化开发流程. 比如:ionic-cli.vue-cli等:它可以创建项目.添加文件(组件,服务等)以及执行一大堆开发任务,比如测试.打包和发布
-
Angular2使用Angular CLI快速搭建工程（一）
前言: 本文适合Angular2的初学者阅读: 时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React.国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加.Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性:(3)配置太多,复杂,工程架构搭建上手难度大.本文为了解决项目搭建的问题,详细的一步步
-
使用Angular CLI从蓝本生成代码详解
第一篇文章是: "使用angular cli生成angular5项目" :http://www.jb51.net/article/136621.htm 这篇文章主要是讲生成 Components, Directive, Service, class, interface, enum等等. ng generate <蓝本名> 命令. 该命令的格式是 ng generate <蓝本名> <参数>. 也可以使用--dry-run参数来列出要生成的文件, 而
-
Angular CLI在Angular项目中如何使用scss详解
前言 SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能.也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件.另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法. 由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作.也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何
-
Angular CLI 使用教程指南参考小结
安装 要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI: 注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持. npm install -g angular-cli 在 Mac 或 Linux 平台上,你可能需要添加sudo前缀提权进行全局安装: sudo npm install -g angular-cli 基本用法 你可以通过 Angular CLI 的 help 命令来获取相关的命令信息. ng
-
使用Angular CLI生成 Angular 5项目教程详解
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网:https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本的nodejs. 今天主要通过以下几个方面介绍Angular CLI: 生成项目 参数介绍 配置和自定义CLI 检查和修复代码 生成新项目: ng new my-app 这个命
-
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布,这里的快速开始就是基于这个命令. 开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 一:用命令行新建一个项目 ng new newApp --skip-install cd newApp cnpm install ng serve --open 执行上面的命令就会自动新建一个Angualr项目,并启动
-
.Net Core+Angular Cli/Angular4开发环境搭建教程
一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul
-
详解Angular CLI + Electron 开发环境搭建
本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el
-
如何利用@angular/cli V6.0直接开发PWA应用详解
什么是PWA PWA(Progressive Web App)利用TLS,webapp manifests和service workers使应用程序能够安装并离线使用. 换句话说,PWA就像手机上的原生应用程序,但它是使用诸如HTML5,JavaScript和CSS3之类的网络技术构建的. 如果构建正确,PWA与原生应用程序无法区分. PWA 的主要特点包括下面三点: 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的
-
Angular 4环境准备与Angular cli创建项目详解
本文介绍的是为Angular4.0准备环境和学会使用Angular cli来创建项目的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍: 1.环境准备: 1)在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装Node.js和npm,请安装他们 (这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了) npm install -g cnpm --registry=https://registry.npm.taobao.org 然后我们可