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 相关文章推荐
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
原生js实现吸顶效果
Mar 13 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
多重?l件?合查?(一)
2006/10/09 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
详解Vue方法与事件
2017/03/09 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
python logging设置level失败的解决方法
2020/02/19 Python
python 自动识别并连接串口的实现
2021/01/19 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
教师节促销活动方案
2014/02/14 职场文书
小学校长个人总结
2015/03/03 职场文书