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

前面我们已经准备好开发环境，现在可以正式开发了。正如前面提到的，Angular 提供了一个命令行工具，可以简化我们的程序开发。我们今后的开发也会使用这一工具，因此我们需要首先安装这个名为 Angular CLI 的开发工具。

安装 CLI 的过程很简单，与安装其它工具、甚至是安装一个普通开发包没什么区别。我们前面已经配置好 NPM Registry、安装成功 yarn，那么就使用 yarn 来安装这个工具。具体的命令是：

yarn global add @angular/cli

参数 global 说明是在全局安装； add 说明是在“添加”；最后是 CLI 的包名，没有注明版本好的话，会让 yarn 安装最新版的 CLI。。这一语句与之前 NPM 的

npm install -g @angular/cli

是等价的。

之后我们运行

ng version

如果能够输出 Angular CLI 的版本号，说明安装成功。注意，Angular CLI 的所有命令都是以 ng 开始的。

Angular CLI 建立在 webpack 基础之上，可以帮助我们生成 Angular 项目框架，生成 Angular 模块、组件、指令等。如果手动搭建这一开发环境，需要了解 webpack 的各种细节、编写各种自动化脚本等，要求较高的前端开发技术。考虑到我们的基础教程，使用 CLI 辅助开发无疑是合适的。我们会在后面的章节中详细介绍 Angular CLI 的使用，如果你对 Angular CLI 感兴趣，可以通过其官方网站了解更多的细节。

刚刚安装完成的 CLI 默认使用 NPM 作为包管理工具。我们希望使用 yarn，只需运行下面的命令：

ng set --global packageManager=yarn

反之，如果想换回 NPM，只需使用

ng set --global packageManager=npm

即可。

安装好 Angular CLI，下面我们来创建第一个示例工程，了解 Angular CLI 的基本使用。

首先，使用

ng new demo

创建一个演示项目。 new 是创建一个全新项目，后面的 demo 是项目的名字。Angular CLI 会帮我们生成完整的项目框架——包括项目所需所有文件、文件结构以及各种辅助文件等。之后，Angular CLI 会自动运行 yarn install ，这是在安装项目所需要的各种依赖。安装过程会比较漫长，需要耐心等待一段时间。

当出现类似上面的界面，提示“Projecy ‘demo' successfully created”时，表示项目已经创建完成。如果有错误，需要检查安装过程或者网络连接等。

项目创建完毕，会在当前目录下生成一个项目文件夹。之后我们可以进入项目目录

cd demo

然后运行

ng serve

ng serve 命令会编译项目，然后启动一个内置的小型服务器，我们就可以通过浏览器查看项目的运行结果。注意上面的提示：NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/，也就是说，这个服务器的地址应该是 http://localhost:4200，我们只要用浏览器访问这个地址即可：

可以看到 Angular CLI 默认生成的项目页面的运行结果。

注意，这一内置服务器仅适用于开发测试用，并不能作为实际使用的服务器。因此，我们如果要部署到正式的服务器，需要将项目编译成一个发布版。编译发布版也很简单，只需使用一条命令：

ng build --prod

编译完成后，打开项目文件夹，可以看到一个 dist 目录，这里面的文件就是整个项目运行所需要的文件。当我们部署应用时，只需要将这个文件夹中的所有文件部署到服务器即可。

我们从创建项目开始，到项目的开发测试，最后是项目打包部署，全部利用 Angular CLI 提供的各种功能。可以看到，Angular CLI 提供了一站式的开发模式，我们可以利用 Angular CLI 很简单的开发 Angular 项目。不过，这里我们演示的只是最简单的用法，在正式使用中，可能会添加很多额外的参数，以便生成我们所需要的文件和项目。这需要通过阅读 Angular CLI 的文档来获取更多信息。在后面的章节中，如果遇到相关内容，我们会再次进行介绍。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

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

  • Angular通过angular-cli来搭建web前端项目的方法

    Angular通过angular-cli来搭建web前端项目的方法

    准备前提:已经搭建好angular-cli环境,还未搭建好的请参见http://www.jb51.net/article/114254.htm 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就

  • Angular2安装angular-cli

    Angular2安装angular-cli

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

  • 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 -

  • 简单谈谈关于Angular Cli打包的事

    本文主要给大家介绍了关于Angular Cli打包的事,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.引言 Angular从开发再到生产环境部署都离不开Angular Cli工具集,而Angular Cli本质上是使用 Webpack(当前使用版本为2) 来打包资源. Webpack 本身并不复杂,略用过一点都清楚,只需要创建一个 webpack.config.js 的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件. 然而一个复杂的应用免不了使

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

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

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

  • 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等:它可以创建项目.添加文件(组件,服务等)以及执行一大堆开发任务,比如测试.打包和发布

  • 详解Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,由Google 维护,用来协助单一页面应用程序运行的.它的目标是增强基于浏览器的应用,使开发和测试变得更加容易.目前最新的 Angular 版本是 v4.2.3 开始搭建 Angular 开发环境 搭建 Angular 开发环境需要的步骤: Node.js 配置 npm Angular CLI 安装 Node.js 下载安装Node.js,下载最新的 LTS 版本即可,目前最新的版本是 v6.11.0 LTS 配置 npm 安装好 Node

  • 深入聊一聊Angular开发的内容

    目录 前言 组件 Component 路由 Router 管道 Pipeline 指令 Directive 服务 Service 总结 前言 阅读本文,是在你了解 Angular 基本知识的前提下,如果读者还不了解,请前往官网了解. 如果读者有 vue 或者 React 的开发经验,会很好理解接下来讲解的内容- 组件 Component 团队开发都有自己的约定.我们这里约定 app/pages 目录下的组件是页面组件,其页面组件下的 components 是页面组件的私有组件.app/compo

  • Android Studio 下 Flutter 开发环境搭建,Flutter,Dart 插件安装,Flutter SDK 安装,环境变量配置,开发环境检查

    I . Flutter 学习资料 Flutter 学习资料 : ① 官方文档 : https://flutter.dev/docs ② Flutter Android 开发者文档 : https://flutter.dev/docs/get-started/flutter-for/android-devs ② Flutter 插件库 : https://pub.dev/ II . Flutter 开发环境搭建 Flutter 开发环境搭建 : ① Android Studio : https:/

  • Android游戏开发学习②焰火绽放效果实现方法

    Android游戏开发学习②焰火绽放效果实现方法

    本文实例讲述了Android游戏开发学习②焰火绽放效果实现方法.分享给大家供大家参考.具体如下: 本节介绍在游戏开发中常用到的数学物理应用--粒子系统.粒子系统与上一节的小球有类似的地方,都是通过数学方法和物理公式模拟客观世界中的物体的运动轨迹.不同的是小球更强调个体运动,而焰火粒子等粒子系统更注重整体感觉. 一.焰火粒子效果 1.粒子对象类Particle类和粒子集合类ParticleSet类 每个粒子都为一个Particle类的对象,程序中产生的所有Particle对象都由一个Particl

  • Android开发学习笔记之通过API接口将LaTex数学函数表达式转化为图片形式

    本文将讲解如何通过codecogs.com和Google.com提供的API接口来将LaTeX数学函数表达式转化为图片形式.具体思路如下: (1)通过EditText获取用户输入的LaTeX数学表达式,然后对表达式格式化使之便于网络传输. (2)将格式化之后的字符串,通过Http请求发送至codecogs.com或者Google.com. (3)获取网站返回的数据流,将其转化为图片,并显示在ImageView上. 具体过程为: 1.获取并格式化LaTeX数学表达式 首先,我们在这个网站输入LaT

  • Android开发学习之WallPaper设置壁纸详细介绍与实例

    Android开发学习之WallPaper设置壁纸详细介绍与实例

    今天和大家分享的是关于在Android中设置壁纸的方法,在Android中设置壁纸的方法有三种,分别是: 1.使用WallpaperManager的setResource(int ResourceID)方法 2.使用WallpaperManager的setBitmap(Bitmap bitmap)方法 3.重写ContextWrapper 类中提供的setWallpaper() 除此之外,我们还需要在应用程序中加入下列权限: <uses-permission android:name="a

  • Android游戏开发学习之引擎用法实例详解

    本文实例讲述了Android游戏开发学习之引擎用法.分享给大家供大家参考.具体如下: 汽车引擎是汽车的心脏,其决定了汽车的性能和稳定性,是人们在购车时相当关注的.而游戏中的物理引擎就如汽车的引擎一样,占据了非常重要的位置.一款好的物理引擎可以非常真实地模拟现实世界,使得游戏更加逼真,提供更好的娱乐体验. 一.JBox2D简介 JBox2D是开源物理引擎Box2D的Java版本,可以直接用于Android.由于JBox2D的图形渲染使用的是Processing库,因此在Android平台上使用JB

  • Android游戏开发学习①弹跳小球实现方法

    Android游戏开发学习①弹跳小球实现方法

    本文实例讲述了Android游戏开发学习①弹跳小球实现方法.分享给大家供大家参考.具体如下: 在学习了一点点Android之后,觉得有必要记录下来,于是就开了这个新坑,慢慢来填吧. 1.运动体Movable类 本例主要模拟了一组大小不一的球以一定的水平初速度从高处落下的运动轨迹.其中的小球为一个可移动物体Movable对象,该类中除了包含小球图片对象之外,还包括了如位置坐标.水平速度.垂直速度等一系列用于模拟小球运动的成员变量和一些方法. Movable类: package com.ball;

随机推荐