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 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
微信小程序页面渲染实现方法
Nov 06 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 DataGrid 实现代码
2009/08/12 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Django中的静态文件管理过程解析
2019/08/01 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
《守株待兔》教学反思
2014/03/01 职场文书
幼儿园老师寄语
2014/04/03 职场文书
我的长生果教学反思
2014/04/28 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
出售房屋协议书范本
2014/10/06 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS