65.9K
CodeProject 正在变化。 阅读更多。
Home

AngularJS 2入门——第1部分

Afreen F
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.63/5 (8投票s)

2017 年 2 月 20 日

CPOL

4分钟阅读

viewsIcon

51593

在本文中，我们将学习设置 Angular 2 环境。作为本文的延续，在下一部分中，我们将学习如何编写一个简单的“Hello World”应用程序，并不断为其添加 Angular 2 的高级功能。

必备组件

需要具备 HTML、CSS、JavaScript 的基本理解。虽然对 Angular JS 1.x 版本有先前的了解有助于进行比较研究和快速学习 Angular 2，但对于新接触该技术的新手程序员来说，也可以在不依赖 Angular 1.x 的情况下开始使用 Angular 2。

引言

Angular 2 不仅仅是版本升级，而是对 Angular 1.x 的完全重写，以提高性能并使代码更具模块化和可维护性。

在 Angular 2 中，应用程序由一组组件（Components）和一组为这些组件提供功能的（Services）组成。下图显示了 Angular 2 应用程序的结构。

Anatomy of Angular2

那么，什么是组件（Component）？

每个组件由一个模板（Template）、一个类（Class）和一个元数据（Metadata）组成。

  • 模板（Template） 是用户界面片段的 HTML，定义了应用程序的视图。
  • 一个类（Class） 具有用于视图的属性以及执行视图操作、响应事件的方法。也就是说，类与视图相关联。
  • 元数据（Metadata） 为 Angular 提供了组件的附加信息。正是这些元数据将类标识为 Angular 组件。

如果您现在还不理解，请不用担心，我们将在下一篇文章中通过示例来演示。首先，让我们了解 TypeScript 的基础知识，然后设置环境来构建 Angular 2 的“Hello World”应用程序。

TypeScript 简介

TypeScript 是一种开源语言，是 JavaScript 的超集。它必须被转译（transpiled）或说编译成纯 JavaScript，浏览器才能执行它。通过使用 TypeScript 编写代码，我们可以获得强类型以及它提供的新生产力功能。

强类型意味着每个变量、函数类型都有一个数据类型。

例如

Typescript JavaScript 
var num : number = 5;
 
var num = 5;
 
var name : string = “hello”;
 
var name = “hello”;
 
var name = 10; // throws error as name is of 
   //type string and trying to store integer value
 
var name = 10; // accepts in Javascript
 
var someData : any = [1, 2, 3]; // ‘any’ dataType is 
         // chosen when type of data is not known
 
var someData = [1, 2, 3];
 
function square (num : number) : number{               
    return num *  num;    
}
 
function square( num ) {
    return num * num;
}

您可以在 TypeScript Playground 上练习更多关于 TypeScript 的内容，它是免费的。在这里也可以看到 TypeScript 转译成 JavaScript 的代码。

有关 TypeScript 新特性的更多详细信息，请参阅 https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript。

设置开发 Angular2 应用程序环境的步骤

步骤 1

所需的 IDE - Visual Studio 2013/15（带 TypeScript 插件）或 Visual Studio Code 或 Webstorm 或 Eclipse。

第二步

从 https://node.org.cn/en/download/ 下载并安装 NodeJS（根据系统配置选择.msi）。这有助于通过 npm 安装我们应用程序的包或依赖文件。

步骤 3

创建一个应用程序文件夹，例如‘Angular2-Sample’。现在我们需要添加文件：systemjs.config、tsconfig.json、typings.json、package.json。

您可以从 https://angular.io/docs/js/latest/quickstart.html 获取这些文件的内容。

为了快速开始，请粘贴以下文件的内容。

Package.json 1 文件内容

{
  "name": "angular2-sample",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

在上面的 JSON 数据中，“dependencies”键包括所有需要在 npm install 命令下安装的模块。其他仅在开发时需要的模块放在“devDependencies”键下。

tsConfig.json 2 文件内容

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

typings.json 3 文件内容

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

systemjs.config.js 4 文件内容

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  };
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

创建package.json文件的另一种手动方法是通过命令行界面。在命令提示符下，导航到项目文件夹‘Angular2-Sample’，然后运行‘npm init’命令。

执行此命令后，它会提示您输入一些问题，例如名称、描述等。输入所需信息或按 Enter 键继续。完成后，它将在目录中创建一个package.json文件。JSON 内容稍后也可以手动更改。

步骤 4

从命令提示符，导航到包含package.json文件的项目文件夹‘Angular2-Sample’，然后执行命令npm install。成功安装后，将创建两个文件夹，即node_modules和typings文件夹，其中包含 Angular 2 应用程序所需的依赖模块（这些模块基于package.json文件中指定的依赖项）。

要安装 npm，请确保您的互联网访问不受限制。代理网络也会阻止所需模块的成功安装。

如果安装不成功，您可以在项目文件夹中创建的 npm 日志文件中看到错误消息。

请参阅下面的 npm 日志文件屏幕截图中的错误消息。

npm Error log file

到目前为止，我们已经准备好了环境，添加了必要的依赖文件，并根据package.json文件中指定的依赖项获取了所需的 angular2 模块。

在我们的下一篇文章‘Angular2 入门 - 第二部分’中，我们将看到如何编写一个简单的‘Hello World’应用程序，然后为其添加功能。

参考文献

© . All rights reserved.