- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

Angualr 2+TypeScript如何从0到1开发一个网页？

gentle_zhou 发表于 2022/04/15 16:41:14 2022/04/15

【摘要】本文导航：前期准备、创建与配置项目、创建应用组件、启动应用、定义该应用的html页面、“花里胡哨”CSS一下、编译并运行应用程序，参考链接。

本文导航：前期准备、创建与配置项目、创建应用组件、启动应用、定义该应用的html页面、“花里胡哨”CSS一下、编译并运行应用程序，参考链接。

0. 前期准备

在我们开发前，我们需要确保我们已经安装了npm（随同NodeJS一起安装的包管理工具）。我们只需要在terminal里通过输入npm -v命令来查看：

如果如上图所示，出现了npm的版本消息，表示npm安装成功了。

如果npm当前版本不是最新版本，windows用户可以通过npm install npm -g命令（Linux用户：$sudo npm install npm -g命令）来升级：

如果当前机器上没有安装npm，我们就需要去NodeJS官网去下载了：https://nodejs.org/en/

1. 创建与配置项目

首先在本地创建一个目录angular2-demo，作为我们angular2项目存放的位置。

我们的Angular2项目需要以下2个配置文件（简单插一句，Angular2使用的是javascript的超集‘Typescript’，是一个典型的基于组件（component) 架构）：

package.json：标记本项目需要哪些 npm 依赖包
tsconfig.json：定义了TypeScript 编译器如何从项目源文件生成 JavaScript 代码

1.package.json文件（标明项目的名字，版本号，脚本命令，lincese，依赖，开发环境下依赖的模块）：

{
  "name": "angular2-demo",
  "version": "1.0.0",
  "private": true,

  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  
  "license": "ISC",

  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

2.tsconfig.json文件（如果是在VSCode IDE编辑器里初次开发的话，很有可能会触发"tsconfig.json 在配置文件中找不到任何输入。指定的 “include” 路径为“[*/"]”，“exclude” 路径为“[]”" 报错，修复方案可以查看我这篇文章）：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

接下来，我们就可以使用npm install命令来安装依赖包。
这里收集了一系列npm install过程中，可能会遇到的告警和错误该怎么处理的方案：

npm install操作执行成功之后，就会在项目底下生成一个 node_modules 目录，这里包含了我们这个项目需要的模块，我们可以看下当前项目的目录结构（下面的package-lock.json文件是锁定安装模块的版本号，记录各个模块的版本信息和下载路径）：

2. 创建应用组件

每个Angular应用至少需要一个root module即根模块，因此我们现在需要在angular-demo目录下创建名为app目录：

$ mkdir app
$ cd app

然后在这个app目录下，根据惯例，我们创建一个名为app.component.ts的文件。Angular本身是被拆分成一些独立的Angular模块的，因此我们在开发过程中只需要导入需要的Angular部分即可。代码如下：

import { Component } from 'angular2/core';
 
@Component({
  selector: 'my-first-app',
  template: '<h1>我的第一个 Angular2 应用</h1>'
})
export class AppComponent { }

我们在代码里引入了Component （是构成Angular 应用的基础和核心；组件用来包装特定的功能，应用程序的有序运行依赖于组件之间的协调工作）；而在@Component里，我们定义了my-first-app这个CSS选择器（相当于一个组件）以及一个只有一个h1标题的模板。
而最后的export class AppComponent { }则是说明AppComponent这个组件可以在文件外被使用（转化为了一个模块module）。

3. 启动应用

我们还需要告诉Angular2如何启动应用。在angular-demo/app目录下创建boot.ts 文件，放入如下的代码：

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

以上代码的作用是引入了Angular2的浏览器函数bootstrap，然后在平台上启动（bootstrap()）我们的AppComponent组件。

4. 定义该应用的html页面

在angular-demo根目录下，我们需要创建index.html文件作为网页应用的展示页面，并放入如下代码（注意：这个位置要留意一下，在第五步里会用到）：

<html>
  <head>
    <title>Angular 2 网页Demo</title>

    <!-- 这里先空着，后面要引入CSS文件 -->

    <!-- 1. 载入库 -->
    <!-- IE 需要 polyfill -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. 配置 SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot').then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. 显示应用-加载中 -->
  <body>
    <my-first-app>
      <h1>Hello World!</h1>
      <h2>It is a beautiful Angular 2 demo.</h2>

      <p>My first Web app.</p>
    </my-first-app>
  </body>
</html>

我们在上述代码中，做了三件事：加载我们需要的脚本文件，配置了System（通过它定位和加载应用模块），在<body></body>标记中添加我们在app.component.ts文件里定义的selector<my-first-app>（这里是我们应用执行的位置）。

5. “花里胡哨”CSS一下

在angular-demo根目录下，我们可以创建一个style.css文件，并放入如下代码：

/* Master Styles */
h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
  }
  h2, h3 {
    color: #444;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
  }
  body {
    margin: 2em;
  }

上述的代码对h1,h2,h3标题，body进行了修饰。

然后我们回到index.html文件，在这个位置上变更下内容：<link rel="stylesheet" type="text/css" href="style.css" />，就可以了。