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 控制小数位数的实现代码
Aug 02 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
Python正则表达式教程之一:基础篇
2017/03/02 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python实现批量文件重命名
2019/10/31 Python
基于python3实现倒叙字符串
2020/02/18 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
寒假思想汇报
2014/01/10 职场文书
中学教师师德承诺书
2014/05/23 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
财务人员个人工作总结
2015/02/27 职场文书
二手房购房意向书
2015/05/09 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书