开发工具: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. 一起玩"Docker"之1——Ubuntu配置安装Docker运行环境并安装(Ubuntu、Centos)镜像

    Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Li ...

  2. Egret中的对象池Pool

    为了可以让对象复用,防止大量重复创建对象,导致资源浪费,使用对象池来管理. 一 对象池A 二 对象池B 一 对象池A 1. 支持传入构造函数 2. 支持预先创建对象 3. 支持统一执行函数 /** * ...

  3. Hive Essential (4):DML-project,filter,join,union

    1. Project data with SELECT The most common use case for Hive is to query data in Hadoop. To achieve ...

  4. spring 多个切面如何有序执行

    Spring也能支持多个切面.当有多个切面时,它不会存在任何顺序,这些顺序代码会随机生成,但是有时候我们希望它按照指定的顺序运行. 在此之前要先定义一个切点方法,为此新建一个接口——MultiBean ...

  5. Delphi 中使用计算出的字段

    在很多情况下,我们需要的数据与数据库中其它字段的数据相关,例如订单的金额为数量与单价的乘积.在应用程序中,若要在显示订单具体条目的同时显示金额,通常要创建一个字段,在显示该字段之前先进行乘法运算,将金 ...

  6. php 3.2 生成压缩文件,并下载

    public function zip_download() { $array = array( 'http://local.qki.com/site_upload/erweima/20190826/ ...

  7. redis添加到linux系统服务

    http://blog.csdn.net/justfor3l/article/details/53187795

  8. 06点睛Spring4.1-Bean的初始化和销毁

    6.1 Initialization和Destruction spring对bean初始化的时候和销毁时候进行某些操作提供了支持 利用@Bean的initMethod和destroyMethod(和x ...

  9. 智能指针.Qt测试

    1.Qt598x64vs2017(或 Qt598x86vs2015[配置使用vs2017]).Win10x64 2.测试代码: 2.1.MainWindow.h class MainWindow : ...

  10. Clean Code 代码整洁之道

    军规:让营地比你来时更干净. 整洁代码 Leblanc : Later equals never. (勒布朗法则:稍后等于永不) 对代码的每次修改都影响到其他两三处代码. 修改无小事. 如同医生不能遵 ...