从零搭建Angular开发环境

Question

从零搭建Angular开发环境

Opened this issue 6 years ago · 0 comments

创建一个 Angular开发环境

第一步：下载 node，尽量使用新的版本，低版本的环境可能会运行出错。推荐一个 node 版本管理神器 `n`

第二步：创建一个新的文件夹，创建 package.json

Angular 有一系列的基础依赖包，在项目运行起来钱需要先把这些基础依赖包下载到根目录下，从而方便项目引用。这些依赖包通过配置文件 package.json 管理，package.json 文件描述了 npm包的所有相关信息，包括坐着、简介、包依赖、构建等信息。

{
  "name": "hello-demo",
  "version": "1.0.0",
  "description": "Hello-world project for Angular 2",
  "author": "devin",
  "license": "MIT",
  "private": true,
  "scripts": {
    "server": "webpack-dev-server --inline --colors --progress --port 3000",
    "start": "npm run server"
  },
  "dependencies": {
    "@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"
  },
  "devDependencies": {
    "@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"
  }
}

主要参数：

name：项目的名称；
version：项目的版本；
description：项目的简单描述
scripts：可以使 npm调用一些脚本，或封装一些命令；
DevDependencies: 项目开发时所以来的一些工具包；
dependencies：项目依赖的基础包。

第三步：创建 tsconfig.json 文件

tsconfig.json 放在根目录下，它配置了 TypeScript编译器的编译参数。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules"
  ]
}

主要配置参数说明：

module: 组织代码的方式；
target：编译目标平台（ES3、ES5、ES6等）；
sourceMap：把 ts文件编译成 js文件时，是否生成对应的 SourceMap文件；
emitDecoratorMetadata：让 TS支持为带有装饰器的声明生成元数据；
experimentalDecorators：是否启用实验性装饰器特性；
typeRoots：指定第三方库的类型定义文件的存放位置，推荐使用 node_modules/@types 文件夹;

第四步：创建资源文件夹

到这一步，Angular项目的基本配置文件创建完成，接下来在项目根目录下创建一个 src文件夹，这个文件夹将存放项目的业务代码文件。

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

在 src目录下创建app.component.ts 文件和模板文件app.component.html

//app.component.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 文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})

export class AppModule {
}

主要参数：

@NgModule: 用于定义模块用的装饰器；
declarations：导入模块依赖的组件、指令等；
imports：用来导入当前模块所需的其他模块。
bootstrap：标记处引导组件，在 Angular 启动应用时，将被标记的组件渲染到模板中。

第七步：创建 main.ts文件

Angular 的项目一般有一个入口文件，通过这个文件来串联起整个项目。在 src目录下，创建一个这样的入口文件 main.ts，示例代码如下：

// import 'reflect-metadata';
import 'core-js'; // include reflect & polyfill
import 'zone.js';

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

这个例子要正常运行需要导入 reflect-metadata 和 zone.js 这两个基础库，这两个库是作为 Angular 应用依赖的 ployfill。
要启动应用，主要依赖于 Angualr 自带的 platformBrowserDynamic函数和应用模块 AppModule，然后调用 platformBrowserDynamic().bootstrapModule()方法，来编译启动 AppModule模块。

第八步：创建 index.html 宿主页面

在项目根目录下创建 index.html 宿主页面，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular 2 Hello World</title>
    <base href="/">
  </head>
  <body>
    <hello-world>
      加载中...
    </hello-world>
    <script src="bundle.js"></script>
  </body>
</html>

整个 Hello World项目基本搭建完成？但是怎样将这个项目运行起来呢？首先需要打包工具，将项目打包编译。采用 webpack来完成打包编译的工作。webpack工具引入配置在package.json中。

"dependencies": {
    ...
    "webpack": "~1.12.9",
    "webpack-dev-server": "~1.14.0"
}

其中，Webpack是打包工具，而 webpack-dev-server是一个小型的服务器，开发时项目可以在这个服务器上运行。webpack也有自己的配置文件，在根目录下创建一个 webpack.config.js文件，配置如下：

var webpack = require('webpack');
var path = require('path');
module.exports = {
  entry: './src/main.ts',
  output: {
    filename: './bundle.js'
  },

  resolve: {
    root: [path.join(__dirname, 'src')],
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
};

主要是配置参数：

entry：页面入口文件配置，可以是一个或者多个入口文件；
output：对应输出项配置，即输出入口文件编译后文件；
resolve：定义了解析模板路径时的配置，常用的是 extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀，他会自动补全；
module.loaders：它是最关键的配置项，他告知Webpack每一类文件都需要使用什么加载器来处理。

至此，Hello World 项目全部搭建完成。接下来让我们与心灵这个项目看看最终的效果，运行步骤如下：

首先，运行命令 npm install 或者 yarn install，npm会根据 package.json配置文件，安装所有的依赖包。在安装过程中，会自动在根目录上创建一个 node_modules文件夹，项目依赖的包都安装在其中。
然后，运行 npm start 命令启动服务
最后，在浏览器中输入 localhost:4200 ，即可看到最终效果；

第二种方法创建项目

第一步：npm install -g @angular/cli
第二步：ng new hello-world 直接创建一个 hello-world项目，可以直接运行；
第三步： cd my-app
ng serve --open
第四步：打开浏览器输入运行的端口，即可看到最终效果

创建一个 Angular开发环境

第一步： 下载 node，尽量使用新的版本，低版本的环境可能会运行出错。推荐一个 node 版本管理神器 n

第二步：创建一个新的文件夹，创建 package.json

第三步： 创建 tsconfig.json 文件

第四步： 创建资源文件夹