Angular CLI 安装和使用教程


Posted in Javascript onSeptember 13, 2017

背景介绍

关于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 -v
$ npm -v
// node 版本高于6.9.3 npm版本高于3.0.0

2.全局安装typescript(可选)

$ npm install -g typescript 
// 新建项目的时候会自动安装typescript(非全局)所以这里也可以不用安装。

3.安装Angular CLI

$ npm install -g @angular/cli

经过不算漫长的等待,你的Angular CLI就装好了。确认一下:

$ ng v

// 出现下面画面说明安装成功,如果不成功你可能需要uninstall一下,再重新来过
$ ng v
  _           _         ____ _   ___
  / \  _ __  __ _ _  _| | __ _ _ __   / ___| |  |_ _|
 / △ \ | '_ \ / _` | | | | |/ _` | '__|  | |  | |  | |
 / ___ \| | | | (_| | |_| | | (_| | |   | |___| |___ | |
/_/  \_\_| |_|\__, |\__,_|_|\__,_|_|    \____|_____|___|
        |___/
@angular/cli: 1.1.1
node: 7.10.0
os: darwin x64

新建Angular项目

$ ng new my-app

这里要等很久啊,大概要下载141M东西。

如果你已经建好了项目文件夹就可以使用ng init my-app来新建项目,ng init和ng new的区别是ng new会帮我们创建一个和项目名称相同的文件夹。

趁着它在下载,来看一下运行ng new之后Angular cli已经帮我们干了什么:

$ ng new helloKeriy
installing ng
 create .editorconfig
 create README.md
 create src/app/app.component.css   // 使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件,随着应用的成长它会成为一棵组件树的根节点。
 create src/app/app.component.html
 create src/app/app.component.spec.ts
 create src/app/app.component.ts    // 定义AppModule,这个根模块会告诉Angular如何组装该应用
 create src/app/app.module.ts
 create src/assets/.gitkeep      // 这个文件夹下你可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。
 create src/environments/environment.prod.ts
 create src/environments/environment.ts
 create src/favicon.ico    // 每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
 create src/index.html     // 宿主页面
 create src/main.ts
 create src/polyfills.ts
 create src/styles.css     // 公共样式
 create src/test.ts      // 这是单元测试的主要入口点
 create src/tsconfig.app.json
 create src/tsconfig.spec.json
 create src/typings.d.ts
 create .angular-cli.json   // Anguar 编译依赖
 create e2e/app.e2e-spec.ts  // e2e 端对端测试目录
 create e2e/app.po.ts
 create e2e/tsconfig.e2e.json
 create .gitignore
 create karma.conf.js
 create package.json      // Angular 的依赖包
 create protractor.conf.js
 create tsconfig.json     // TypeScript 编译器的参数
 create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'helloKeriy' successfully created.

这里强烈推荐使用淘宝镜像安装:

$ ng new helloKeriy --skip-install // 先跳过npm安装
$ cd helloKeriy
$ cnpm install           // 使用淘宝源安装

成果展示

安装完成之后就可以启动项目了:

cd helloKeriy
ng serve -open

ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。

使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/。

接下来你将看到:

Angular CLI 安装和使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
Angular的$http与$location
Dec 26 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 #Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 #Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 #Javascript
详解vue-router 路由元信息
Sep 13 #Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 #Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 #Javascript
Vue-Router进阶之滚动行为详解
Sep 13 #Javascript
You might like
php框架Phpbean说明
2008/01/10 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
javascript事件模型介绍
2016/05/31 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
js实现3D旋转相册
2020/08/02 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
高中毕业自我鉴定范文
2013/10/02 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
网络管理专业求职信
2014/03/15 职场文书
党风廉政承诺书
2014/03/27 职场文书
批评与自我批评范文
2014/10/15 职场文书
2014年检验科工作总结
2014/11/22 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
公司文体活动总结
2015/05/07 职场文书
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技