开发工具: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 环境搭建的更多相关文章

  1. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  2. Angular2+学习第2篇 cli 环境搭建过程

    Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等:具体参考Angular-cli GitHub Angular的启动过程,需要先回答三个问题: 启动时加 ...

  3. webpack+angular2开发环境搭建

    升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...

  4. SpringBoot+Angular2 开发环境搭建

    https://segmentfault.com/a/1190000007921675

  5. Ionic2 cordova angular2 打包到Android apk环境搭建

    一.前言 前段时间,公司有个APP项目需要支持不同平台,于是采用了Ionic2 + cordova + angular2,在搭建环境过程中遇到了不少问题,刚好最近有时间整理出来. 二.开发环境搭建 参 ...

  6. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

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

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  8. .Net Core + Angular2 环境搭建

    环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs), ...

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

    NET Core 环境搭建和命令行CLI入门 2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文 ...

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

      NET Core 环境搭建和命令行CLI入门 时间:2016-07-06 01:48:19      阅读:258      评论:0      收藏:0      [点我收藏+]   标签: N ...

随机推荐

  1. 深入学习c++--容器

    1. 简介 1. 序列式容器: array, vector, deque, list, forward_list --- 数组 或者 指针实现 2. 关联容器: set, map, multiset, ...

  2. 软件定义网络基础---OpenFlow流表

    一:流表 (一)流的概念 我们把同一时间经过同一网络中,具有某种共同特征或属性的数据,抽象为一个流 比如:我们将访问同一个地址的数据视为一个流 流一般是由网络管理员定义的,可以根据不同的流执行不同的策 ...

  3. Python 初级 5 判断再判断(二)

    复习: 分支:完成测试并根据结果做出判断称为分支. 代码块:一行或放在一起的多行代码 缩进:一个代码行稍稍靠右一点 关系操作符(比较操作符):==, >, >=, <, <=, ...

  4. Python初级 4 数据的类型

    一.数据类型 1.整数: int a = 3 b = 5 2.浮点数: float a = 3.0 b = 5.2 3.字符串: str a = "3.0" b = "3 ...

  5. 报错:(未解决)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./ ...

  6. 报错: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 ...

  7. 基于ADO的远程Oracle连接

    最近在一个通过MFC做一个界面,通过这个界面可以对布置在另一台服务器上的数据库MySQL.SQl Server.Oracle进行增删创建表的操作.其中我通过ADO很快就完成了对MySQL和SQL Se ...

  8. 【超分辨率】—图像超分辨率(Super-Resolution)技术研究

    一.相关概念 1.分辨率 图像分辨率指图像中存储的信息量,是每英寸图像内有多少个像素点,分辨率的单位为PPI(Pixels Per Inch),通常叫做像素每英寸.一般情况下,图像分辨率越高,图像中包 ...

  9. -webkit-overflow-scrolling : touch 快速滚动 回弹 效果

    现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要在元素上加一行css代码即可: -webkit-overflo ...

  10. 【JQuery插件】扑克正反面翻牌效果

    里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <ht ...