1：环境搭建
今天给大家介绍4种环境搭建的方法。
一：Angular-cli的安装
官方指导文档：www.angular.cn/guide/quickstart
请使用cnpm来安装，或者配置淘宝镜像。
使用原生npm安装可能会遇到的问题：
1、需要python的环境
2、可能会依赖某些franework导致会要求安装Visual Studio（在下文中会为大家介绍webstrom的配置）
3、node-sass // 因为ZF导致，被墙掉了。
4、node-gyp模块可能会编译错误。
如果还遇到问题可以参考：http://blog.csdn.net/zhy13087...
二：Angular-seed
Angular的种子文件，他有很多的版本，我们今天通过官方的seed来安装。
官方的angular-seed地址：https://github.com/angular/an...
步骤
：
1、git clone https://github.com/angular/an...安装种子文件(没有git的，可以自己down zip下来，然后打开cmd，执行cnpm install)。
前置需安装的包文件
1、npm install -g webpack webpack-dev-server typescript
2、npm install
3、npm start
4、访问本地 localhost:3000
seed文件的优点：
1、自带简单的路由
2、自带From模块
3、带有Http请求模块
4、体现出了Angular的核心功能
5、项目体量小
三：基于webpack安装（爽歪歪的方法）
*优点：可以让我们自由的配置webpack.config.js
*步骤：https://github.com/kunl/Angul...
*场景：从Node转到前端的公司或者项目推荐用这种方式
手动创建项目（真正的勇士）
*条件：大神级别的使用方法（我不是大神，会简单的介绍一下）
*优点：想要什么在项目中添加什么，非常快捷
*步骤
：
1、准备工作：
在开始搭建Angular环境前，还需要做一些准备工作，包括安装Angular所依赖的基础环境Node.js，可以在官网(https://nodejs.org/en/download/)下载安装，需要确认Node.js版本为v4.x.x以上，npm版本为v3.x.x以上。使用版本为node v5.11.0版本。
1、搭建步骤
1: 创建package.json
{
"name": "HelloByHand",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start": "npm run server",
"server": "webpack-dev-server –inline –colors –progress –port 3000"
},
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"reflect-metadata": "~0.1.8",
"core-js": "~2.4.1",
"rxjs": "5.0.0-beta.12",
"zone.js": "~0.6.26"
},
"devDependencies": {
"@types/core-js": "~0.9.34",
"ts-loader": "~1.2.0",
"webpack": "~1.12.9",
"webpack-dev-server": "~1.14.0",
"typescript": "~2.0.0"
}
}
2：创建tsconfig.json
配置了typescript编译器的编译参数。
{
"compileOnSave": true,
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments":false,
"noImplicitAny": true,
"suppressExcessPropertyErrors": true,
"typeRoots": [
"node_modules/@types"
],
"exclude": [
"node_modules"
]
}
}
3：创建资源文件夹
在项目根目录下创建一个src文件夹
4：创建组件相关文件
在src目录下创建app.component.ts文件以及模板文件app.component.html，示例代码如下：
//app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'scr/app.component.ts'
})
export class AppComponent {}
//app.component.html
Hello World
5：创建app.module.ts文件
在Angular应用中需要用模块来组织一些功能紧密相关的代码块，每个应用至少有一个模块，习惯上把它叫做AppModule。在src目录下创建一个app.module.ts文件来定义AppModule，代码如下：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
6: 添加main.ts文件
Angular项目一般有一个入口文件，通过这个文件来串联起整个项目。示例代码如下：
//main.ts
import 'reflect-metadata';
import 'zone.js';
import { platforBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platforBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));
7：创建index.html宿主页面
MyApp
加载中....
