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

水深无声 2021-06-26 16:06 430阅读 0赞

本文介绍的是为`Angular4.0`准备环境和学会使用`Angular cli`来创建项目的相关内容，分享出来供大家参考学习，需要的朋友们下面来一起看看详细的介绍：

## 1.环境准备： ##

1）在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装`Node.js`和`npm`，请安装他们  
（这里特别推荐使用淘宝的镜像`cnpm`，记得以后把`npm`的指令改为`cnpm`就可以了）

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后我们可以通过`node -v`和`cnpm -v`来分别查看`node`和`cnpm`安装的版本和结果

node -v
    cnpm -v

2）安装全局Angular cli

cnpm install -g @angular/cli

## 2.创建新的项目 ##

打开终端窗口（这里我使用的是`webstorm`的`Terminal`，也可以使用计算机自带的`powershell`）

ng new my-app

项目会很快创建完成，接下来你会看到

Installing packages for tooling via npm

这里如果你选这了淘宝的`cnmp`镜像，应该最好在安装完全局`Angular cli`后设置一下，保证正常下载工具

ng set global packageManage = cnpm

然后我们的项目就创建完成了  
![这里写图片描述][20180901204109113]

我们会发现在文档中有很多文件，这里参考`Angular`官方文档 ，以便认识这些文件的作用。

## 3.在项目中引入`bootstrap`和`jQuery` ##

这里我使用`webstorm`的`Terminal`，直接在终端操作

cnpm install bootstrap --save 
    cnpm install jquery --save

我们在项目中就添加了`bootstrap`和`jQuery`，我们可以在`node_modules`文件夹中找到他们（这个文件夹放的是第三方库）；  
然后我们需要操作`.angular-cli.json`文件，把`bootstrap`和`jQuery`添加进去:

这里需要注意的是：因为`angular`用的是微软开发的`typescript`语言，我们需要在终端做下面的操作，以便让`typescript`认识`bootstrap`和`jQuery`一些字符（比如`jQuery`的`$`）：

cnpm install @types/bootstrap --save-dev
    cnpm install @types/jquery --save-dev

这样我们就在项目中正常使用`bootstrap`和`jQuery`了

## 4）为项目添加组件 ##

ng g component navbar

## 5）项目的启动 ##

启动项目我们可以直接通过：

ng serve

或者是

npm start

这两个的默认端口都是4200：[http://localhost:4200][http_localhost_4200]  
这里你也可以修改默认的端口:

ng serve -p 3000

## 6)最后项目的打包 ##

用`angular cli`创建的项目会有很多文件，我们就需要打包后再发行：

ng build

[20180901204109113]: /images/20210626/e0f098ca19e44438b4c8b2b369d3bd81.png
[http_localhost_4200]: http://localhost:4200

发表评论取消回复

表情：

评论列表（有 0 条评论，430人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular4创建第一个项目

【背景】最近在学习Angular，刚接触一个东西最好的方法当然是多多的敲小demo了。【步骤】 1.设置开发环境在开始工作之前，我们必须设置好开发环

电玩女神/ 2022年05月31日 23:20/ 0 赞/ 217 阅读

相关【Angular4】基础（一）：脚手架 Angular CLI

首先介绍一下@angular/cli脚手架的使用。快速安装 npm install -g @angular/cli 创建新项目 ng new

红太狼/ 2022年05月30日 04:37/ 0 赞/ 179 阅读

相关 angular 创建开发环境构建项目

一.安装Node.js 官方网址：https://nodejs.org/en/download/ 1 2 在命令行中输入：node -v 和

柔情只为你懂/ 2022年05月28日 04:42/ 0 赞/ 217 阅读

相关 Angular 开发环境配置 – Angular CLI安装

Angular 提供了一个命令行工具，可以简化我们的程序开发。我们今后的开发也会使用这一工具，因此我们需要首先安装这个名为 Angular CLI 的开发工具。一首

谁借莪１个温暖的怀抱￠/ 2022年05月24日 11:50/ 0 赞/ 194 阅读

相关搭建angular开发环境与创建angular项目

angular开发环境需要安装： Node.js和angular CLI 1.首先进入这个网址https://nodejs.org/en/download/下载对应的

清疚/ 2022年05月10日 09:14/ 0 赞/ 244 阅读

相关创建Angular项目

1、使用命令ng new project-name 来创建一个angular的项目 ![20190216145652201.png][] 2、由于国外的一些node.

ゞ浴缸里的玫瑰/ 2022年03月19日 10:18/ 0 赞/ 806 阅读

相关 Angular CLI

一 Angular CLI 是啥 Angular CLI 是一个命令行接口(Angular Command Line Interface)，用于实现自动化开

冷不防/ 2022年01月23日 00:45/ 0 赞/ 195 阅读

相关 Angular 学习（一）：Angular 开发环境准备与搭建

文章目录开发环境准备搭建 Angular CLI Angular 项目创建 Ang

男娘i/ 2021年09月29日 01:44/ 0 赞/ 462 阅读

相关使用Angular CLI创建项目

[Angular CLI][]是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。 1.设置开发环境 ①是否有安装Nodejs和np

雨点打透心脏的1/2处/ 2021年09月14日 06:48/ 0 赞/ 360 阅读

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

本文介绍的是为`Angular4.0`准备环境和学会使用`Angular cli`来创建项目的相关内容，分享出来供大家参考学习，需要的朋友们下面来一起看看详细的介绍： 1.

水深无声/ 2021年06月26日 16:06/ 0 赞/ 431 阅读