ng2环境配置

————————2017年4月19日  更新 ————————————

 

现在看到之前写的东西，才觉得ng的版本实在是更新的不能再快了，还好终于在三月份发布了稳定版4.0 

最近换了家新公司，所以需要重新配置环境，就顺便更新一下之前的代码。

 

现在就开始从拿到新电脑开始配置环境~~

 

一、ng中的包管理工具npm基于node.js ，所以要先下载。

（1）进node.js官网下载最近node版本(node.js官网)

（2）安装完成后进入cmd查询是否安装成功

node -v  / npm -v

（3）在cmd（用管理员打开）中配置angular/cli

详细可查angular官网（这是一个angular官网链接）

npm install -g @angular/cli

（4）安装时需要翻墙。。。因此需要将其改为淘宝源

在cmd中输入 npm config edit 会弹出一个配置的文本文件.npmrc.txt 

在第一段后加入

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org/

该段代码即可。

（5）等待安装，完成后查是否成功

在cmd中 ng -v

 

ok

 

 

————————————————————————————————————

 

（一）配置Angular 2的运行环境

使用Angular-cli进行配置，这是一个较好的解决angular 2环境配置复杂的一个工具，因为Angular 2是基于typescript所编写，因此在安装Angular-cli之前需要安装：

 

npm install -g typescript typings
npm install -g @angular/cli

 

 

接下来就可以配置Angular-cli环境，执行语句为：

 

npm install -g @angular/cli

 

 

完成之后，直接输入指令创建新项目

 

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

更具体的介绍在angular-cli文档说明

 

（二）项目结构

创建完一个Angular-cli的项目

 

 

1.在app.module.ts中写入所有出现的模块，在模块中引入组件，具体定义的内容写在app.component.ts中。

2.main.ts：通过引导AppModule来启动应用。

（1）通过即时（JIT）编译器动态引导。

（2）使用预编译器（AoT-Ahead-Of-Time）进行静态引导。