angular2-cli 环境搭建

开发工具:windows ,Vscode, npm,

1.全局安装angular-cli:    npm install angular-cli -g

其中node-sass 的包有可能会下载失败因为国内的网络原因,可以在npm config 中的proxy 设置代理, 或者将registry 设置为淘宝地址,安装完成大概就是下图这样一个样子。会有很多很多包

2.查看是否安装成功: ng -v

3.使用cli 新建项目工程 ng new project-name

4.生成项目结构图:

5.对项目结构主要内容解释如下:(本文对于单元以及集成测试测试没有说明, 若想了解请到http://www.protractortest.org/#/ 查看专门为angular设计的集成测试)

e2e ------------------------------用于测试(本文对于测试不会涉及)

node_modules------------------存放依赖包的地方

src--------------------------------存放源代码

app----------------------------根模块

app.component.css------样式文件

   app.component.html---模板

   app.component.spec.ts-测试

   app.component.ts-------组件

   app.module.ts------------模块

environments----------------环境

   environment.prod.ts----生产环境

   environment.ts----------非生产环境

index.html-------------------宿主页面

mian.ts-----------------------程序引导

tsconfig.json-----------------编译配置

  angular-cli.json--------------angular-cli配置

package.json----------------依赖包以及npm的命令

6.运行程序 ng serve  在浏览器上输入localhost:4200

7 在ng serve 后面加上 --prod -aot  重新运行

(ng serve --prod --aot)     与之间的对比  (ng serve) size会小一些

时间: 2025-01-14 09:42:06

angular2-cli 环境搭建的相关文章

Angular2.0 环境搭建

最近在学习Angular2的使用,其实看过Angular2 文档的都知道,相比于之前的Angular1,Angular2 的改动还是挺大的. 而对于'angular2 的本地开发环境的搭建的中,我们首先要在本地安装nodeJS 我们可以到官网上clone 一个quickstart 的demo(如果想按着官网上写的用git 命令去clone 一个项目文件,就要先安装一个git) 也可以自己新建 然后在node.js command prompt 中进入项目文件所在的文件路径 然后执行 npm in

angular Ionic CLI环境搭建安装以及栅格响应式布局

原文地址:https://www.cnblogs.com/sugartang/p/11432480.html

angular2 环境搭建

angular2 的环境搭建 第一步:到官网下载nodejs 安装包 安装 第二步:安装好了node  会有npm工具 使用 npm 安装 angular cli 命令:  npm install -g @angular/cli    使用ng -v检测 安装好 之后 可以使用   ng new  项目名 命令创建 一个angular的项目 第三步 :  安装webstorm

[Step-By-Step Angular2](1)Hello World与自动化环境搭建

随着rc(release candidate,候选版本)版本的推出,万众瞩目的angular2终于离正式发布不远啦!五月初举办的ng-conf大会已经过去了整整一个月,大多数api都如愿保持在了相对稳定的状态——当然也有router这样的例外,在rc阶段还在大面积返工,让人颇为不解——不过总得说来,现在学习angular2不失为一个恰当的时机. Google为angular2准备了完善的文档和教程,按理说,官网(https://angular.io)自然是学习新框架的最好教材.略显遗憾的是,在B

angular2最详细的开发环境搭建过程

本文所需要的源代码,从 http://files.cnblogs.com/files/lingzhihua/angular2-quickstart.rar 下载 angular官方推荐使用quickstart搭建angular2开发环境 git:http://git-scm.com/download下安装git node:https://nodejs.org/en/download/ npm:npm是nodejs官方未nodejs定制的一个工具,是Node.js的包管理器,是Node Packa

Angular2 快速入门 之 环境搭建

2015.10.14更新:本文的内容已经过期了,Angular2现在已经完全基于TypeScript开发了,可以移步https://github.com/flyingzl/angular2-seed 查看最新代码. 一.题记 写这篇文章呢,主要是想帮助那些想尝鲜Angular2的童鞋们,因为我自己在玩Angular2时碰到了不少坑,而且Angular2语法一直处于变化中,让人很头疼.不过也怪不了Anguar2,因为它现在是处于并长期处于alpha阶段,本文是基于最新的angular2.0.0-a

.NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高,很有必要写个深入浅出的系列文章,本节内容帮助你入门.我将可能用Windows做开发环境,也可能用Linux/Mac,但是所有的dotnet CLI命令都是跨平台的,我们在windows/Linux/mac平台上开发跨平台的应用. 安装.NET Core .NET Core 包括.NET Core Runti

NET Core 环境搭建和命令行CLI入门

NET Core 环境搭建和命令行CLI入门 2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高,很有必要写个深入浅出的系列文章,本节内容帮助你入门.我将可能用Windows做开发环境,也可能用Linux/Mac,但是所有的dotnet CLI命令都是跨平台的,我们在windows/Linux/mac平台上开发跨平台的应用. 安装.NET Core .NET

.Net Core + Angular2 环境搭建

环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs),TSVS dev 1.4(TS for VS) 3)构建package.json,tsconfig.json,gulp.js文件 1.package.json { "name": "template.angular2", "version": &qu

NET Core 环境搭建和命令行CLI入门[转]

NET Core 环境搭建和命令行CLI入门 时间:2016-07-06 01:48:19      阅读:258      评论:0      收藏:0      [点我收藏+] NET Core 环境搭建和命令行CLI入门 2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高,很有必要写个深入浅出的系列文章,本节内容帮助你入门.我将可能用Windows做开