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 相关文章推荐
取得元素的左和上偏移量的方法
Sep 17 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
js查找节点的方法小结
Jan 13 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 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几个实用自定义函数小结
2016/01/25 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
python分数表示方式和写法
2019/06/26 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
饮料业务员岗位职责
2013/12/15 职场文书
2014年党支部承诺书
2014/05/30 职场文书
四风查摆剖析材料
2014/10/10 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
演讲比赛主持词
2015/06/29 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
python基础之类方法和静态方法
2021/10/24 Python
Python实现双向链表
2022/05/25 Python