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

简介

关于"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 （详细的安装方法大家可以参考这篇文章：http://www.jb51.net/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 的时间有点早了，不过大家安装的时候不是我这个版本没有关系的。

新建Angular项目

使用命令 new

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

项目图示

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

生成的项目结构：

运行Angular项目

使用命令 serve

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

运行图示

界面访问

写在最后

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

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

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

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

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

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

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

总结

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

您可能感兴趣的文章:

  • Angular2安装angular-cli
  • Angular CLI 安装和使用教程
  • Angular 开发学习之Angular CLI的安装使用
赞 (0)

相关推荐

  • Angular2安装angular-cli

    Angular2安装angular-cli

    最近在学习angular2,并尝试用这个框架来做公司的一个新项目. 终于要开始开发了,等了1个多月. 因为第一次用这个新框架做项目,不太熟悉,就找了angular-cli这个脚手架来搭建项目. 安装了好多次,看了好多博文,终于成功了. 依据本宝宝帮多位小伙伴安装成功的经验,现总结安装angular-cli过程如下: 1.设置淘宝镜像,在 .npmrc文件(该文件在C盘>用户(或user)>你的电脑名字下就可找到)加入下面一句: registry = https://registry.npm.t

  • Angular 开发学习之Angular CLI的安装使用

    Angular 开发学习之Angular CLI的安装使用

    前面我们已经准备好开发环境,现在可以正式开发了.正如前面提到的,Angular 提供了一个命令行工具,可以简化我们的程序开发.我们今后的开发也会使用这一工具,因此我们需要首先安装这个名为 Angular CLI 的开发工具. 安装 CLI 的过程很简单,与安装其它工具.甚至是安装一个普通开发包没什么区别.我们前面已经配置好 NPM Registry.安装成功 yarn,那么就使用 yarn 来安装这个工具.具体的命令是: yarn global add @angular/cli 参数 globa

  • Angular CLI 安装和使用教程

    Angular CLI 安装和使用教程

    背景介绍 关于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 -

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

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

    简介 关于"Angular"版本,"Angular"官方已经统一命名Angular 1.x同一为Angular JS,Angular 2.x及以上统称"Angular". "CLI"是"Command Line Interface"的简写,是一种命令行接口,实现自动化开发流程. 比如:ionic-cli.vue-cli等:它可以创建项目.添加文件(组件,服务等)以及执行一大堆开发任务,比如测试.打包和发布

  • .Net Core+Angular Cli/Angular4开发环境搭建教程

    .Net Core+Angular Cli/Angular4开发环境搭建教程

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

  • 详解Angular CLI + Electron 开发环境搭建

    本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el

  • Angular4学习笔记之新建项目的方法

    Angular4我自己还在摸索学习中,这个系列中的笔记会不定期修改和更新-- 一.安装nodejs(下面方式 二选一,个人推荐第二种) 1.nodejs官网下载安装 2.使用nvm安装管理(具体方式参照我的另一篇) 二.全局安装angular-cli npm install -g @angular/cli 三.进入一个存放项目的文件夹,运行以下代码,初始化项目 ng new <项目名> 四.启动项目 cd <项目名> npm install ng serve 附: 1.引入jQue

  • Angular 4环境准备与Angular cli创建项目详解

    Angular 4环境准备与Angular cli创建项目详解

    本文介绍的是为Angular4.0准备环境和学会使用Angular cli来创建项目的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍: 1.环境准备: 1)在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装Node.js和npm,请安装他们 (这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了) npm install -g cnpm --registry=https://registry.npm.taobao.org 然后我们可

  • Angular4学习教程之DOM属性绑定详解

    Angular4学习教程之DOM属性绑定详解

    前言 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡.本文主要介绍了关于Angular4 DOM属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介 使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1&

  • 详解从angular-cli：1.0.0-beta.28.3升级到@angular/cli：1.0.0

    现在Angular CLI在npm下通过@angular/cli来替代angular-cli,并且它只支持Node6.9.0或更高的版本,npm 3或更高的版本.所以在升级angular cli之前,请先升级node和npm. 如果你使用Angular CLI beta.28或更低的版本,你需要先卸载掉 angular-cli包: npm uninstall -g angular-cli npm uninstall --save-dev angular-cli 如果你忘记了更新npm,执行上面第

  • Angular2使用Angular CLI快速搭建工程（一）

    Angular2使用Angular CLI快速搭建工程（一）

    前言: 本文适合Angular2的初学者阅读: 时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React.国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加.Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性:(3)配置太多,复杂,工程架构搭建上手难度大.本文为了解决项目搭建的问题,详细的一步步

随机推荐