写点什么

Angular CLI 帮助开发者快速创建 Angular 2 项目和组件

  • 2016-05-19
  • 本文字数:892 字

    阅读完需:约 3 分钟

在 ng-conf 2016 的一场演讲中,Mike Brocchi 向开发者详细展示了 Angular CLI (全称 Command Line Interface)及其功能。他说,在自己采访过的开发者中,有 26% 的人称 Angular 2 环境设置是一大入门门槛,有 22% 的人说环境设置太过复杂。Angular CLI 的诞生,正是为了解决这个问题。

为了降低创建项目所需的时间,Angular CLI 提供了许多特性让开发者“快速上手”:

  • ng new project-name - 创建一个新项目,置为默认设置
  • ng build - 构建 / 编译应用
  • ng test - 运行单元测试
  • ng e2e - 运行端到端(end-to-end)测试
  • ng serve - 启动一个小型 web 服务器,用于托管应用
  • ng deploy - 即开即用,部署到 Github Pages 或者 Firebase

执行这些步骤所需要的全部设置,都由 CLI 工具来完成。

除了设置一个新应用之外,该工具还支持开发者运行命令,构建应用的组成部分,如组件(Component)和路由(Route)。

ng generate component my-comp - 生成一个新组件,同时生成其测试规格和相应的 HTML/CSS 文件

  • ng generate directive my-directive - 生成一个新指令
  • ng generate pipe my-pipe - 生成一个新管道
  • ng generate service my-service - 生成一个新服务
  • ng generate route my-route - 生成一个新路由
  • ng generate class my-class - 生成一个简易的模型类

对于每个生成命令,所产生的文件会根据官方 Angular 样式指南的规定,放置在正确的位置。

可惜的是,这个工具只适用于 Angular 2,不适用于 1.x 版本。该工具现在处于 Beta 阶段,开发团队希望将来添加离线模板编译、延迟加载路由和可扩展性。

这个工具背后的创意并不新。在 Angular 的世界,Platypi 框架使用一个叫做 PlatypusCLI 的命令行工具,来创建应用组件,如模型和服务。非 Angular 的项目 Ember 也有着自己的 Ember CLI ,协助开发者完成诸如运行测试、编译资源等任务。

Brocchi 演讲的完整视频可在YouTube 上观看。

查看英文原文 Angular CLI Helps Spin Up Angular 2 Projects and Components


感谢张龙对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

2016-05-19 19:007492

评论

发布
暂无评论
发现更多内容

vue动画效果的使用

张三丰无极

6 月 优质更文活动

揭秘:云南白药如何激活组织活力!

用友BIP

人力资源 数智人力

Vue中组件的几个重要点

我搬去水星了

6 月 优质更文活动

【6.02-6.09】写作社区优秀技术博文一览

InfoQ写作社区官方

热门活动 优质创作周报

Vue-消息订阅与发布(pub/sub)

我搬去水星了

6 月 优质更文活动

Vue-组件自定义事件(绑定和解绑)

我搬去水星了

6 月 优质更文活动

Vue-全局事件总线(GlobalEventBus)

我搬去水星了

6 月 优质更文活动

Vue- mixin(混入)

我搬去水星了

6 月 优质更文活动

DHR数智人力:智能学习加速人才培养与创新

用友BIP

人力资源 人才 数智人力

Vue-组件的嵌套

我搬去水星了

6 月 优质更文活动

Vue- ref属性

我搬去水星了

6 月 优质更文活动

Vue单文件组件

我搬去水星了

6 月 优质更文活动

vuex-getters配置项

张三丰无极

6 月 优质更文活动

Vue-搭建Vuex开发环境

张三丰无极

6 月 优质更文活动

Vue-插槽(slot)的使用

张三丰无极

6 月 优质更文活动

充分结合AI后的数智平台能做什么?

用友BIP

数智平台

Vue-插件(plugin)

我搬去水星了

6 月 优质更文活动

Vue-props配置

我搬去水星了

6 月 优质更文活动

Vue组件-非单文本组件

我搬去水星了

6 月 优质更文活动

Vue自定义指令

我搬去水星了

6 月 优质更文活动

禅道软件14年原创研发荣膺SAFe平台合作伙伴,国际权威机构认可专业实力

禅道项目管理

敏捷开发 safe 禅道 禅道项目管理

NFTScan 与 Realy 达成合作伙伴,双方在元宇宙 NFT 数据方面进行深度合作!

NFT Research

NFT Metaverse

Excelize 荣获 2022 年中国开源创新大赛一等奖

xuri

开源 编程 开发者 创新 Excelize

Vuex的基本使用

张三丰无极

6 月 优质更文活动

Vue-scoped(局部)样式

我搬去水星了

6 月 优质更文活动

Vue基本的内置指令

我搬去水星了

6 月 优质更文活动

vue-基本操作-收集表单元素绑定的数据

我搬去水星了

6 月 优质更文活动

Meetup 报名|06.17 StarRocks & Friends 与你相约上海

StarRocks

数据库 大数据 OLAP Meetup 线下活动

浏览器存储(webStorage)

我搬去水星了

6 月 优质更文活动

创建Vue脚手架(Vue CLI)并分析项目结构

我搬去水星了

6 月 优质更文活动

vue-表单元素进阶收集操作

我搬去水星了

6 月 优质更文活动

Angular CLI 帮助开发者快速创建Angular 2项目和组件_JavaScript_David Iffland_InfoQ精选文章