准备工作
node -v 查看是否安装Nodenpm -v 查看是否安装包管理NPM
搭建步骤
第一步：创建一个新的文件夹
- 概念
- 新创建一个项目文件夹作为项目的根目录
- 整个项目的文件都存放到这个文件夹下
- AngularJS有一系列基础的依赖包，在项目运行起来前需要先把这些基础的依赖包下载到根目录下，从而方便项目引用
- 创建包管理配置文件：package.json
name 项目的名称version 项目的版本description 项目的简单描述scripts 可以使npm调用一些脚本，或封装一些命令devDependencies 项目开发时所依赖的一些工具包dependencies 项目依赖的基础包
// package.json
{
"name": "Hello world!",
"version": "1.0.0",
"description": "Hello-world project for Angular 2",
"scripts": {
"server": "webpack-dev-server --inline --colors --progress --port 3000",
"start": "npm run serve"
},
"license": "MIT",
"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",
"core-js": "~2.4.1",
"reflect-metadata": "~0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "~0.6.26"
},
"devDependencies": {
"@types/core-js": "~0.9.34",
"ts-loader": "~1.2.0",
"typescript": "~2.0.0",
"webpack": "~1.12.9",
"webpack-dev-server": "~1.14.0"
}
}
第二步：创建tsconfig.json文件
- tsconfig.json放在根目录下，它配置了Typescript编译器的编译参数
module 组织代码的方式target 编译目标平台(ES3 ES5 ES6等)sourceMap 把ts文件编译成js文件时，是否生成对应的SourceMap文件emitDecoratorMetadata 让TypeScript支持为带有装饰器的声明生成元数据experimentalDecorators 是否启用实验性装饰器特性typeRoots 指定第三方库的类型定义文件的存放位置，推荐使用node_modules/@types文件夹
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"./node_modules/@types/"
]
},
"compileOnSave": false,
"exclude": [
"node_modules"
]
}
第三步：创建资源文件夹
第四步：创建组件相关文件
- 在src目录下创建组件文件以及模板文件
app.components.ts 组件文件app.component.html 模板文件
// app.components.ts
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
}
<!-- app.component.html -->
<h3>Hello world!</h3>
第五步：创建app.module.ts文件
- 概念
- 在Angular应用中需要用模块来组织一些功能紧密相关的代码块，每个应用至少有一个模块，习惯上把它叫做AppModule
@NgModule 用于定义模块用的装饰器declarations 导入模块依赖的组件、指令等imports 用来导入当前模块所需的其他模块bootstrap 标记出引导组件，在Angular启动应用时，将被标记的组件渲染到模板中
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
第六步：添加main.ts文件
- 在src目录下，创建一个入口文件main.ts
reflect-metadata和zone.js是Angular依赖的基础库- 启动应用依赖于angular自带的
platformBrowserDynamic函数和AppModule应用模块
- 最后调用
platformBrowserDynamic().bootstrapModule()方法来编译启动AppModule模块
// main.ts
import 'reflect-metadata';
import 'zone.js';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
第七步：创建index.html宿主页面
bundle.js是webpack打包命令运行后生成的文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular2</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<hello-world>加载中...</hello-world>
<script src="bundle.js"></script>
</body>
</html>
第八步：webpack打包编译
- 概念
webpack 是打包工具webpack-dev-server 是小型的服务器webpack配置参数
entry 页面入口文件配置，可以是一个或者多个入口文件output 对应输出项配置，即输出入口文件编译后的文件resolve 定义了解析模块路径时的配置，常用extensions，可以用来指定模块的后缀，这样在引入模块时不需要写后缀，自动补全module.loaders 他是最关键的配置项，他告知webpack每一类文件都需要使用什么加载器来处理
// webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: './src/main.ts',
output: {
// 指定打包后的输出文件名，这个文件需要被引入到index.html中
filename: './bundle.js'
},
resslve: {
root: [path.join(__dirname, 'src')],
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{test: /.ts$/, loader: 'ts-loader'}
]
}
}
第九步：项目搭建目录结构
- 项目文件夹
- package.json
- tsconfig.json
- webpack.config.js
- index.html
- src
- app.component.html
- app.component.ts
- app.module.ts
- main.ts