脚本宝典收集整理的这篇文章主要介绍了Angular开山篇，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
1：环境搭建
今天给大家介绍4种环境搭建的方法。
一：Angular-cli的安装
使用原生npm安装可能会遇到的问题：
- 需要python的环境
- 可能会依赖某些franework导致会要求安装Visual Studio（在下文中会为大家介绍webstrom的配置）
- node-sass // 因为ZF导致，被墙掉了。
- node-gyp模块可能会编译错误。
如果还遇到问题可以参考：http://blog.csdn.net/zhy13087...
二：Angular-seed
Angular的种子文件，他有很多的版本，我们今天通过官方的seed来安装。
官方的angular-seed地址：https://github.com/angular/an...
步骤：
- gIT clone https://github.com/angular/an...安装种子文件(没有git的，可以自己down zip下来，然后打开cmd，执行cnpm install)。
前置需安装的包文件
- npm install -g webpack webpack-dev-server tyPEscript
- npm install
- npm start
- 访问本地 localhost:3000
seed文件的优点：
三：基于webpack安装（爽歪歪的方法）
- 优点：可以让我们自由的配置webpack.config.js
- 步骤：https://github.com/kunl/Angul...
- 场景：从Node转到前端的公司或者项目推荐用这种方式
手动创建项目（真正的勇士）
- 条件：大神级别的使用方法（我不是大神，会简单的介绍一下）
- 优点：想要什么在项目中添加什么，非常快捷
- 步骤：
- 准备工作：
在开始搭建Angular环境前，还需要做一些准备工作，包括安装Angular所依赖的基础环境Node.js，可以在官网(https://nodejs.org/en/download/)下载安装，需要确认Node.js版本为v4.x.x以上，npm版本为v3.x.x以上。使用版本为node v5.11.0版本。
- 搭建步骤
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
<h1>Hello World</h1>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 { }
//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宿主页面