angular2入门-第一个angular2 App

马坚

2023-12-01

建立一个angular包括以下步骤：

* 运行环境：安装Node.js

* Step 1: 创建一个app项目，定义好包依赖和指定项目设置

* Step 2: 创建Angular App的根组件(Component)

* Setp 3: 创建一个Angular模块(Module)

* Step 4: 添加`main.ts`，标识Angular的根组件

* Step 5: 添加网页应用`index.html`

* Step 6: 构建并运行App

安装运行环境Node.js

如果你的机器上没有安装Node.js和npm，要先安装，如果已经安装，需要检查一下，Node运行版本是否为4.x和Npm版本为3.x以上。Node下载地址:https://nodejs.org/en/download/ ，如果需要源代码可以自行访问github下载。

$ node -v

$ npm -v

Step 1:创建和配置项目

(1)建立文件夹

$ mkdir angular2

$ cd angular2

(2) 添加包定义和配置文件至angular2目录

- package.json 列出了本Demo依赖的脚本(scripts).更多细节可以查看[Npm包配置](https://angular.io/docs/ts/latest/guide/npm-packages.html)

- tsconfig.json 这里定义了TypeScript编译器的配置。TypeScript是Angular2的主要语言，但由于浏览器不能直接使用TypeScript。详细[TypeScript配置](https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#tsconfig)可以查看。

- typings.json 标识TypeScript 的定义文件。

- systemjs.config.js 系统配置文件。

package.json:


{

  "name": "angular2-quickstart",

  "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.5",

    "@angular/compiler": "2.0.0-rc.5",

    "@angular/compiler-cli": "0.5.0",

    "@angular/core": "2.0.0-rc.5",

    "@angular/forms": "0.3.0",

    "@angular/http": "2.0.0-rc.5",

    "@angular/platform-browser": "2.0.0-rc.5",

    "@angular/platform-browser-dynamic": "2.0.0-rc.5",

    "@angular/router": "3.0.0-rc.1",

    "@angular/upgrade": "2.0.0-rc.5",

    "core-js": "^2.4.0",

    "reflect-metadata": "^0.1.3",

    "rxjs": "5.0.0-beta.6",

    "systemjs": "0.19.27",

    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.17",

    "bootstrap": "^3.3.6"

  },

  "devDependencies": {

    "concurrently": "^2.2.0",

    "lite-server": "^2.2.2",

    "typescript": "^1.8.10",

    "typings":"^1.3.2"

  }

}

tsconfig.json:


{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false

  }

}

typings.json


{

  "globalDependencies": {

    "core-js": "registry:dt/core-js#0.0.0+20160602141332",

    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",

    "node": "registry:dt/node#6.0.0+20160807145350"

  }

}

systemjs.config.js


/**

 * 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',

    'forms',

    '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: 'bundles/' + 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);

(3) 安装包(package)

这里使用npm来安装package.json里定义的依赖包。

$npm install

$npm run typings install

angular应用开发者依赖npm包管理工具安装和打包所需依赖。

工具类脚本

我们已经在package.json文件中添加一些npm脚本来处理公共的开发任务。

{

  "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"

  }

}

我们在使用npm run方式执行npm脚本加上一个脚本名作为参数可以执行指定的脚本,而有些方法并不需要run关键字。(比如: start,只需npm start即可)

npm start - 同时启动编译器和服务器，启动后处于监视模式(watch mode)
npm run tsc - 运行一次TyppeScript编译器
npm run tsc:w - 使用监视模式运行TypeScript编译器，此时进程将保持运行，等待TypeScript文件更改并重新编译它们
npm run lite - 启动lite-server,这是一个轻量级的，静态文件服务器，支持Angular App应用
npm run typings - 分别运行typings工具
npm run postinstall - 在成功安装完依赖包后自动被调用

Step 2: 建立我们第一个Angular组件

在angular2文件夹中建立子文件夹

mkdir app

在新创建的app文件夹中创建组件文件app/app.component.ts:


import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  template: '<h1>My First Angular 2 App</h1>'

})

export class AppComponent { }

AppComponent是应用的根(root)

每个Angular应用至少有一个根组件，通常命名为AppComponent,用以主持用户的访问。组件是Angular应用的基本构建单元。一个组件通过关联的模板控制屏幕的一部分。本例只写一个简单的组件，但它有每一个组件都有的基本结构：

- 一个或多个import 表述，用于导入我们需要引用的类。

- 一个@Component 声明，告诉Angular使用哪个模板和如何创建组件。

- 一个 component类，用于控制一个视图(View)的表面和行为。

import

Angular应用是模块化的。它们由很多个功能专一的文件组成。Angular本身就是模块化的，它是几个相关的用于构造我们应用的模块库集合。

当我们需要使用一个模块或库时，我们可以引入(import)它。上面代码中,我们引入了Angular2的核心库，我们使用的@Component注解就是来自于这个库。

@Component 声明

Component是一个装修器函数，需要元数据(metadata,比如一个dom对象)对象作为参数。我们需要在类的顶部使用@符号和传入元数据对象。这类似于java等语言中的注解。参数是一个元数据对象，告诉Angular如何创建和使用该组件。

app/app.compoent.ts(metadata)

@Component({

  selector: 'my-app',

  template: '<h1>My First Angular 2 App</h1>'

})

上面指定了一个元数据，有两个域，selector选择器和template模板。

selector代表组件使用CSS选择器指定了一个HTML元素。这个元素名为my-app。Angrular无论在主HTML的任何位置都创建和展示同一个my-app.

template域指定了这个组件对应的模板，模板写法拓展自HTML语法，告诉Angular如何去渲染组件的视图。这里模板的定义和后端语言的模板相似。如FreeMarker. 一个高级模板包括绑定组件属性的数据，可以标识其它模板，这样，一个Angular应用程序就成了一棵组件树。

Component 类

export class AppComponent{}

当我们要去创建一个实质性的应用时，我们可以用属性和程序逻辑拓展此类。我们使用了export关键字，所以我们可以import这个组件在我们程序中的任何一个位置。

Step 3:编写app.module.ts

建立名为AppModule模块，创建文件app/app.module.ts，加入以下代码：

import { NgModule }      from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';



import { AppComponent }  from './app.component';



@NgModule({

  imports:      [ BrowserModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

使用NgModule修饰的方法参数如下：

imports - 引入其它模块，每个应用程序都需要引入BrowserModule.
declarations - 这个模块的组件和指令。
bootstrap - 标识根组件，Angular在启动应用程序时应当先启动这些组件。

我们上面编写的app.component.ts被添加到了declarations和bootstrap数组中。

Angular模块引入其他模块

请注意，我们添加BrowserModule至imports数组中。这个模块包含所有Angular在浏览器运行我们的应用所需要代码片段。在Angular众多的模块中，我们最常用的一个是FormModule和下面要介绍的RouterModule,HttpModule.

Step 4: 添加 main.ts

创建文件app/main.ts，添加如下代码：


import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

请注意我们引入platformBrowserDynamic方法是从@angular/platform-browser-dynamic，而不是@angular/core。Bootstrapping 不是core,因为启动App的方式不止一种。事实上，大部分应用都是运行在浏览器中的。

但是在不同环境加载不同模块是可行的，我们可以在带有Apache Cordova或者 NativeScript的移动设备上加载App组件。

为什么要分离出main.ts，为什么要分离应用模型和应用组件？而不放在一起？在本文教程中，由于只是简单的应用引导，main.ts和app.module.ts代码量都比较少，完全可以很轻松的合并起来，但是应用复杂时，会增加开发难度。分离还有一个好处是，可以使用不同的环境运行程序，而只需要修改main.ts即可。

Step 5:添加 inex.html

在项目的根目录创建文件index.html，添加如下代码：


<html>

  <head>

    <title>Angular 2 QuickStart</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->

     <!-- Polyfill(s) for older browsers -->

    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>

    <script src="node_modules/reflect-metadata/Reflect.js"></script>

    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->

    <script src="systemjs.config.js"></script>

    <script>

      System.import('app').catch(function(err){ console.error(err); });

    </script>

  </head>

  <!-- 3. Display the application -->

  <body>

    <my-app>Loading...</my-app>

  </body>

</html>

这个HTML文件值得注意的是

使用的JavaScript库
SystemJS配置
标签的使用

库(Libraries)

经过生产实践的测试，达到最短的加载时间我们最先引入core-js,接着是zone.js和reflect-metadata，最后是SystemJS

SystmeJS

SystemJS加载应用和库模块。我们在开始前创建了文件systemjs.config.js，在这个配置文件中，我们首先创建了一个map,对需要用到的模块进行名字的映射，然后注册所有的SystemJS使用到的package.

当Angular在main.ts中调用bootstrapModule方法时，它会读到AppModule元数据，发现AppComponent是一个启动组件，找到my-app选择器，定位到名为my-app的元素标签，在标签中渲染我们应用的View

添加样式

创建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;

}

Step 6:构建和运行应用

运行命令：

npm start

这个命令运行两个平行的node进程

监视模式运行TypeScript编译器
一个名为lite-server静态的Server加载index.html在浏览器，并且当文件有修改自动刷新浏览器。