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 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
js实现简易计算器功能
Oct 18 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
ExtJs使用总结(非常详细)
2012/03/22 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
python结合API实现即时天气信息
2016/01/19 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
java关于string最常出现的面试题整理
2021/01/18 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
毕业生文员求职信
2013/11/03 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
产品发布会策划方案
2014/05/12 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
影视后期实训报告
2014/11/05 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
财务总监岗位职责
2015/02/03 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python