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

简介:

在 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,协助开发者完成诸如运行测试、编译资源等任务。

本文转自d1net(转载)

相关文章
|
9天前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
6月前
|
缓存 JSON 前端开发
Angular 应用启用 PWA 特性的 Angular CLI 命令行
Angular 应用启用 PWA 特性的 Angular CLI 命令行
35 0
|
9天前
设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
|
4月前
|
JavaScript
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
|
3月前
|
前端开发 JavaScript
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子
Angular 组件模版代码里使用 ngIf 进行条件渲染的例子
21 0
|
3月前
|
存储 搜索推荐 API
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
36 0
|
4月前
|
应用服务中间件 nginx
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./
|
4月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
|
4月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
5月前
|
资源调度 JavaScript 前端开发
关于指定 Angular CLI 使用的包管理器
关于指定 Angular CLI 使用的包管理器
24 0

热门文章

最新文章