Angular 2 JavaScript 环境配置与首个应用搭建教程

本文详细介绍如何使用 JavaScript 配置 Angular 2 运行环境，涵盖项目目录创建、依赖安装、组件与模块编写、启动逻辑及 HTML 入口配置。通过完整代码示例与运行步骤，帮助开发者快速搭建并运行首个 Angular 2 应用，同时提供环境排查与版本升级建议。

在 Angular 2 开发中，使用 JavaScript 而非 TypeScript 搭建环境需要手动配置依赖与模块加载逻辑。本文按步骤演示从目录初始化、npm 依赖安装、组件与模块定义到 HTML 入口集成的完整流程，并提供运行验证与常见问题排查依据，帮助开发者快速构建可运行的 Angular 2 基础项目。

创建项目目录与依赖配置

Angular 2 的 JavaScript 环境依赖 npm 进行包管理。首先创建项目目录并初始化结构：

$ mkdir angular-quickstart
$ cd angular-quickstart

在项目根目录创建 package.json 文件，声明 Angular 核心库、polyfill 与开发服务器依赖：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0"
  }
}

若 npm 官方源下载较慢，可配置淘宝镜像加速：

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ cnpm install

安装完成后，项目根目录会生成 node_modules 文件夹，包含所有声明的依赖包。此时可创建 app 子目录用于存放应用代码：

$ mkdir app
$ cd app

编写 Angular 组件与模块

Angular 应用以组件为核心，组件通过 ng.core.Component 定义视图与行为。在 app/app.component.js 中创建根组件：

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '我的第一个 Angular 应用'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

该代码使用 IIFE 隔离作用域，将 AppComponent 挂载到全局 window.app 命名空间。selector: 'my-app' 指定组件在 HTML 中的挂载标签，template 定义组件渲染内容。构造函数留空，后续可根据业务扩展属性与方法。

Angular 2 采用模块化架构，需在 app/app.module.js 中声明模块元数据：

(function(app) {
  app.AppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule ],
      declarations: [ app.AppComponent ],
      bootstrap: [ app.AppComponent ]
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

imports 引入浏览器平台模块，declarations 注册组件，bootstrap 指定启动组件。模块配置确保 Angular 在初始化时能正确解析依赖与组件树。

配置启动逻辑与 HTML 入口

在 app/main.js 中编写应用启动逻辑，监听 DOM 加载完成后调用 bootstrapModule：

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.AppModule);
  });
})(window.app || (window.app = {}));

创建项目根目录的 index.html 作为入口文件，按顺序加载 polyfill、Angular 核心库与应用脚本：



    
    Angular 2 实例
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    Loading...

加载顺序需严格遵循：先 polyfill 与 Angular UMD 包，再按组件、模块、启动脚本的顺序引入。HTML 中的标签与组件 selector 对应，Angular 启动后会替换该标签内容。

添加基础样式文件 styles.css：

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

运行项目与结果验证

在项目根目录执行启动命令：

$ npm start

该命令会调用 lite-server 启动本地开发服务器，默认监听 https://localhost:3000/。浏览器访问该地址后，页面将渲染组件模板内容。

Angular 2 应用运行结果

若页面未正常显示，可检查以下常见问题：

确认 node_modules 目录存在且依赖安装完整。
检查 index.html 中脚本路径与加载顺序是否正确。
确保浏览器支持 ES5 并正确加载 core-js 与 zone.js polyfill。
查看浏览器控制台是否有模块未定义或选择器匹配失败的报错。

本示例使用 Angular 2.0.0 与 JavaScript 语法，适用于学习框架基础结构。现代 Angular 开发已全面转向 TypeScript 与 Angular CLI，建议在实际项目中采用官方推荐工具链以提升开发效率与类型安全。