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 url传值中文乱码之解决之道
Nov 20 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
从0开始学Vue
Oct 27 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 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
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
解析argc argv在php中的应用
2013/06/24 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
js实现tab切换效果
2017/02/16 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
python实现Adapter模式实例代码
2018/02/09 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
模具专业求职信
2014/06/26 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
殡葬服务心得体会
2014/09/11 职场文书
中学生打架检讨书
2014/10/13 职场文书
Python中的嵌套循环详情
2022/03/23 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技