解读angular2官方文档的“快速上手“章节的开发环境，进行配置启动项目（图文）

最新推荐文章于 2021-08-03 15:13:56 发布
最新推荐文章于 2021-08-03 15:13:56 发布
阅读量307 收藏
点赞数
分类专栏： angular 文章标签： angular 快速上手 文档 开发环境安装 angular2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengzeyuan/article/details/76907333
版权

因为在配置ng2的环境的时候，不想把node安装在默认路径C盘下，所以在安装完node和npm之后，在安装angular-cli的时候会出现偶尔安装不成功，和安装cnpm之后再命令行里输入cnpm install -g @angular/cli出现命令名称无法被识别的错误情况。导致按照官网的步骤也不能启动成功项目。为了避免node安装在D盘（或其他自定义路径下）之后安装@angular/cli和cnpm出现问题，下面步骤作为参考。

一、

搜索node下载，进入node下载地址（可以自行搜索下载地址）

根据自己系统选择对应下载文件，（我电脑是64位win8系统，我选择的是.msi文件64-bit）

然后打开下载下来的文件，按照提示一步步安装，默认是安装在C盘下，但是我选择安装在了 D:\nodejs 路径下

安装完node之后，可以看到在安装目录下生成一堆文件，node安装好后npm也被一起安装了，

按住win键+R键打开运行窗口，输入cmd按回车键打开命令框可以用node -v  和npm -v来检查自己安装的版本（按照官方的说法要越新版本的越好）

二、

配置环境变量

我的电脑-属性-高级系统设置-环境变量-新建
变量名：NODE_PATH
变量值：D:\nodejs\node_modules

(因为我安装在了D盘的nodejs路径下所以路径为D:\nodejs\node_modules)

最低0.47元/天 解锁文章
dengzeyuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular 2 中文文档
03-03
Angular 2 中文文档,还不错，可以作为参考。Angular 2 中文文档,还不错，可以作为参考。
Angular官方文档的“快速上手”问题
Wrysmile0308的博客
08-16 348
Angular官方文档的“快速上手”问题介绍问题products.tsapp.module.tscart.service.ts代码 介绍 在 Angular 的 中文文档 “快速上手”部分，可能会给初学者带来很多困扰 原因就在于官方给的代码并不完整，导致编译时会出现错误，本文将修正这些问题，帮助初学者真正的快速上手 问题 products.ts 很多初学者在 products.ts 那里会卡住，这是因为该文件中少了一部分代码，需要导出一个 Product 接口 代码如下： export interface
angular 2 官方文档学习笔记
aihewen2536的博客
12-28 188
转载于:https://www.cnblogs.com/silence-maple/p/10190151.html
跟着angularjs2官方文档学习（一）
沈纵情
09-09 5464
import {Component} from 'angular2/core'; interface Hero { id: number; name: string; } @Component({ selector: 'my-app', template: ` {{title}} My Heroes <li *ngFor="
跟着angularjs2官方文档学习（二）
沈纵情
09-09 2897
import {Component} from 'angular2/core'; import { HeroDetailComponent } from './my-hero-detail'; import { Hero } from './hero'; @Component({ selector: 'my-app', template: ` {{title}}
angular7的多环境（开发环境、测试环境、生产环境）配置
yw00yw的博客
07-03 4655
在angular程序开发的时候，我们一般会使用三种环境，比如：开发环境、测试环境、生产环境。针对不同的环境使用不同的代码，比如接口地址。 配置开发环境、测试环境、生产环境 开发环境：environment.ts——用于程序开发 （创建项目时自动生成） export const environment = { production: false, baseUrl: '开发环境url' }; ...
Angular2开发环境搭建教程之VS Code
01-19
前言 VSCode是微软推出的一款轻量编辑器，采取了和VS相同的UI界面，搭配合适的插件可以...Angular2开发环境主要依赖Node Js和Npm， 需要node 6.9.x和npm 3.x.x 以上的版本 。 查看版本命令使用 node -v和 npm -v.
深入理解angular2启动项目步骤
08-29
深入理解 angular2 启动项目步骤需要了解项目文件夹的创建、基础库的安装、package.json 文件的配置、脚本配置节的添加、第一个 Angular Component 的创建和启动应用的方法。这些建议将帮助开发者快速入门 angular2 ...
Angular2 环境配置详细介绍
09-01
主要介绍了Angular2 环境配置的相关资料,需要的朋友可以参考下
Angular2从搭建环境到开发步骤详解
09-01
本文的内容主要是想帮助那些想学习Angular2的朋友们，因为我自己在玩Angular2时碰到了不少坑，而且...不过也怪不了Anguar2，因为它现在是处于并长期处于alpha阶段，下面就通过本文来学习Angular2的搭建环境和开发吧。
Angular2中文文档 PDF文字版
12-08
Angular2中文文档 PDF文字版
详解webpack+angular2开发环境搭建
12-10
刚搭建完一个webpack+angular2环境，由于angular及webpack官网上没有一个折中的搭建方案，所以只能摸索着搭建，中间遇到一些坑，遂总结记录下来，以供交流。 搭建完后的项目初步环境如下： app ----app.component....
跟着angularjs2官方文档学习（三）
沈纵情
09-12 2308
import {Component ,OnInit} from 'angular2/core'; import { Hero } from './hero'; import { HeroService } from './hero-service'; import { HeroDetailComponent } from './my-hero-detail'; @Component({ s
npm install命令给vue前端项目安装依赖时常见问题以及解决思路
热门推荐
最爱嫣夜来
08-03 2万+
1、常见问题 1. 没有安装nodeJS的运行环境 2. 没有安装npm包管理工具 3. 网络问题，由于国内外环境因素，导致npm包下载不完整或者出错中断 4. npm chaches 5. install失败，未清理缓存，再次npm install因为依赖包不完整，包与包之间又有依赖关系，结果自然就会出错 2、解决思路 2.1 情况1解决方法 只需要下载nodeJS的安装包，安装就可以，操作可参考博客： windows系统安装：https://www.cnblogs.com/zho
Angular官方文档学习-英雄之旅
could98的博客
12-31 1272
Angular教程-英雄之旅 本教程需要完成的工作： 使用 Angular 的内置指令来显示 / 隐藏元素，并显示英雄数据的列表。 创建 Angular 组件以显示英雄的详情，并显示一个英雄数组。 为只读数据使用单向数据绑定。 添加可编辑字段，使用双向数据绑定来更新模型。 把组件中的方法绑定到用户事件上，比如按键和点击。 让用户可以在主列表中选择一个英雄，然后在详情视图中编辑他。 使用管道来格式化数据。 创建共享的服务来管理这些英雄。 使用路由在不同的视图及其组件之间导航。 编辑英雄名字 用户应该能在一
pyzmq-26.0.0b2-cp312-cp312-manylinux_2_28_x86_64.whl
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
C++冒泡排序（基础内容）
06-19
1.循环两个变量：外层（轮数）、内层每轮的次数； 2.总轮数=元素长度-1=最大下标 3.每轮次数=元素长度-1-轮数=最大下标-轮数； 4.轮数（++），次数（++）； 5.两两交换，大的放后面 冒泡排序基础内容，自学可用； 分为三个部分，推到过程，总结，题目样例 很详细，欢迎一起学习交流
pyzmq-25.1.0-cp36-cp36m-win32.whl
最新发布
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
protobuf-3.20.3-cp38-cp38-win_amd64.whl
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Angular 开发环境配置方式
05-22
要搭建 Angular 的开发环境，需要进行以下步骤： 1. 安装 Node.js Angular 是一个基于 TypeScript 编写的前端框架，所以需要先安装 Node.js。你可以到 Node.js 官网下载安装包，然后按照提示安装即可。 2. 安装 Angular CLI Angular CLI 是一个命令行工具，可以帮助你快速创建和管理 Angular 项目。在安装 Node.js 后，打开终端或命令行窗口，输入以下命令进行安装： ``` npm install -g @angular/cli ``` 3. 创建一个新的 Angular 项目 在终端或命令行窗口中，进入你想要存放项目的文件夹，然后输入以下命令创建一个新的 Angular 项目： ``` ng new my-app ``` 其中，my-app 是你的项目名称，你可以根据自己的需要进行修改。 4. 运行项目 在终端或命令行窗口中，进入项目文件夹，然后输入以下命令启动应用： ``` cd my-app ng serve --open ``` 其中，--open 参数表示启动应用后自动打开浏览器。现在你可以在浏览器中访问 http://localhost:4200，就可以看到你的 Angular 应用了。 至此，你已经成功搭建好了 Angular 的开发环境。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值