AngularJS 2 基本构建

准备工作

  • node -v 查看是否安装Node
  • npm -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文件夹
    • 将存放项目的业务代码文件

第四步：创建组件相关文件

  • 在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
posted @ 2020-10-16 15:53  wing1377  阅读(144)  评论(0)  编辑  收藏  举报