angular2-cli 环境搭建
开发工具:windows ,Vscode, npm,
前提:安装nodejs
nodejs 模块全局安装路径配置:http://www.cnblogs.com/rancho-blog/p/6567929.html(我的另外一遍)
nodejs下载地址:https://nodejs.org/en/
vscode下载地址:https://code.visualstudio.com/
1.全局安装angular-cli: npm install angular-cli -g
npm 设置淘宝镜像 : npm config set registry "https://registry.npm.taobao.org/"
其中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会小一些
angular2-cli 环境搭建的更多相关文章
- VUE CLI环境搭建文档
VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...
- Angular2+学习第2篇 cli 环境搭建过程
Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等:具体参考Angular-cli GitHub Angular的启动过程,需要先回答三个问题: 启动时加 ...
- webpack+angular2开发环境搭建
升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...
- SpringBoot+Angular2 开发环境搭建
https://segmentfault.com/a/1190000007921675
- Ionic2 cordova angular2 打包到Android apk环境搭建
一.前言 前段时间,公司有个APP项目需要支持不同平台,于是采用了Ionic2 + cordova + angular2,在搭建环境过程中遇到了不少问题,刚好最近有时间整理出来. 二.开发环境搭建 参 ...
- Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境
一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...
- .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门
2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...
- .Net Core + Angular2 环境搭建
环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs), ...
- NET Core 环境搭建和命令行CLI入门
NET Core 环境搭建和命令行CLI入门 2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文 ...
- NET Core 环境搭建和命令行CLI入门[转]
NET Core 环境搭建和命令行CLI入门 时间:2016-07-06 01:48:19 阅读:258 评论:0 收藏:0 [点我收藏+] 标签: N ...
随机推荐
- 深入学习c++--容器
1. 简介 1. 序列式容器: array, vector, deque, list, forward_list --- 数组 或者 指针实现 2. 关联容器: set, map, multiset, ...
- 软件定义网络基础---OpenFlow流表
一:流表 (一)流的概念 我们把同一时间经过同一网络中,具有某种共同特征或属性的数据,抽象为一个流 比如:我们将访问同一个地址的数据视为一个流 流一般是由网络管理员定义的,可以根据不同的流执行不同的策 ...
- Python 初级 5 判断再判断(二)
复习: 分支:完成测试并根据结果做出判断称为分支. 代码块:一行或放在一起的多行代码 缩进:一个代码行稍稍靠右一点 关系操作符(比较操作符):==, >, >=, <, <=, ...
- Python初级 4 数据的类型
一.数据类型 1.整数: int a = 3 b = 5 2.浮点数: float a = 3.0 b = 5.2 3.字符串: str a = "3.0" b = "3 ...
- 报错:(未解决)Opening socket connection to server master/192.168.52.26:2181. Will not attempt to authenticate using SASL (unknown error)
报错背景: CDH集群中,将kafka和Flume整合,将kafka的数据发送给Flume消费. 启动kafka的时候正常,但是启动Flume的时候出现了报错现象. 报错现象: DH--.cdh5./ ...
- 报错:org.apache.sqoop.common.SqoopException Message: CLIENT_0001:Server has returned exception NoClassDefFoundError: org/codehaus/jackson/map/JsonMappingException
报错背景: CDH集成sqoop2服务之后,创建好link和job之后,执行job的时候报错. 报错现象: sqoop:> start job -j Exception has occurred ...
- 基于ADO的远程Oracle连接
最近在一个通过MFC做一个界面,通过这个界面可以对布置在另一台服务器上的数据库MySQL.SQl Server.Oracle进行增删创建表的操作.其中我通过ADO很快就完成了对MySQL和SQL Se ...
- 【超分辨率】—图像超分辨率(Super-Resolution)技术研究
一.相关概念 1.分辨率 图像分辨率指图像中存储的信息量,是每英寸图像内有多少个像素点,分辨率的单位为PPI(Pixels Per Inch),通常叫做像素每英寸.一般情况下,图像分辨率越高,图像中包 ...
- -webkit-overflow-scrolling : touch 快速滚动 回弹 效果
现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要在元素上加一行css代码即可: -webkit-overflo ...
- 【JQuery插件】扑克正反面翻牌效果
里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <ht ...