Angular4学习之Angular CLI的安装与使用教程


Posted in Javascript onJanuary 04, 2018

简介

关于"Angular"版本,"Angular"官方已经统一命名Angular 1.x同一为Angular JS,Angular 2.x及以上统称"Angular"。 

"CLI"是"Command Line Interface"的简写,是一种命令行接口,实现自动化开发流程。

比如:ionic-cli、vue-cli等;它可以创建项目、添加文件(组件,服务等)以及执行一大堆开发任务,比如测试、打包和发布

下面就来给大家详细介绍关于Angular4  Angular CLI的安装与使用教程,需要的朋友可以参考借鉴,下面话不多说了,来一起看看详细的介绍吧。

安装Angular CLI

1. 需要安装 nodejs 以及 npm

    Node官网的地址:https://nodejs.org/en (详细的安装方法大家可以参考这篇文章:https://3water.com/article/90518.htm)

2. 全局安装 typescript,angular 推荐使用 typescript编写(.ts 文件)。

   Typescript 官网地址:http://www.typescriptlang.org/index.html

   使用命令: npm install -g typescript 

3. 安装 angular-cli

   Angular-cli 官网地址:https://cli.angular.io/

   使用命令: npm install -g @angular/cli

图示

注:因为安装 angular-cli 的时间有点早了,不过大家安装的时候不是我这个版本没有关系的。

Angular4学习之Angular CLI的安装与使用教程

新建Angular项目

使用命令 new

// ngStudy 是工程名称可以随意修改的
ng new ngStudy

项目图示

注:需要等待漫长的时间,因为这个需要下载 node_modules,有 140多MB

Angular4学习之Angular CLI的安装与使用教程

生成的项目结构:

Angular4学习之Angular CLI的安装与使用教程

运行Angular项目

使用命令 serve

//需要进入工程的目录中
ng serve

运行图示

Angular4学习之Angular CLI的安装与使用教程

界面访问

Angular4学习之Angular CLI的安装与使用教程 

写在最后

1.安装过程因为好多依赖包都是国外的,所以有可能下载不下来

   1.1 可以尝试修改 npm 的镜像,改为淘宝的

   1.2 通过 "蓝灯" 代理去下载

2.关于项目的目录结构可以去参考官方中文网的说明:https://angular.cn/guide/quickstart

3.命令行的使用地址:https://github.com/angular/angular-cli/wiki  贴上官方提供的常用命令的图

Angular4学习之Angular CLI的安装与使用教程

4.介绍下更新 angular-cli 的版本方法

  可以直接使用 npm install -g @angular/cli 进行更新

Angular4学习之Angular CLI的安装与使用教程

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
javascript 关于# 和 void的区别分析
Oct 26 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
JS实现“全选”和"全不选"功能代码实例
Feb 06 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 #Javascript
vue-cli配置文件——config篇
Jan 04 #Javascript
jQuery封装animate.css的实例
Jan 04 #jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 #Javascript
浅谈vuex 闲置状态重置方案
Jan 04 #Javascript
详解Angular5 服务端渲染实战
Jan 04 #Javascript
JavaScript中的高级函数
Jan 04 #Javascript
You might like
E路文章系统PHP
2006/12/11 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
python设计模式大全
2016/06/27 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
电子专业推荐信范文
2013/11/18 职场文书
会计主管岗位职责
2014/01/03 职场文书
战友聚会策划方案
2014/06/13 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
转学证明范本
2015/06/19 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
英语教学课后反思
2016/02/15 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python