记一次Angular2环境搭建及My First Angular App小demo呈现

参考链接？不如说是照搬连接。AngularJs官网地址快速起步地址。

      对于一个一直只是用jq，偶尔学习点Knockout js，了解一点mvvm结构的前端来讲，学习Angular2仍是有点困难的。好了，废话少说。开始快速起步Demo案例的学习
             首先选择一个编写前端代码的IDE.选择的有不少，好比SublimeText,JetBrains WebStorm等，我选择的是VsCode，这个更贴近我。一些智能提示，插件，对各个语言的支持比较普遍，固然开发AngularJs2也是合适的。
   环境准备
         首先下载安装vscode。下载地址http://code.visualstudio.com/.
下载按照Node.js,https://nodejs.org/en/ 为何要安装它，由于要安装包，而它,Node.js 的包管理器 npm，是全球最大的开源库生态系统。安装好以后NPM也安装好了。在cmd中输入node -v命令能够查看版本
输入npm -v 命令也能够查看npm的版本。这就为下面的安装包打好了基础。
步骤 1 ：建立并配置本项目
这一步咱们将：
  建立项目目录
  建立配置文件
  安装包
     建立项目目录 angular-quickstart。
     建立配置文件      

 典型的 Angular 项目须要一系列配置文件

• package.json 用来标记出本项目所需的 npm 依赖包。 就是该项目须要哪些包
• tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。 
• systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息，并注册了全部必备的依赖包。 它还包括文档中后面的例子须要用到的包。 就是先安装不少包，须要用的时候导入到项目中就行

在你的项目目录中建立这些文件，并从下面的例子框中拷贝粘贴文原本填充它们。

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

tsconfig.json

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

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

安装依赖包

     使用 npm 命令来安装 package.json 中列出的依赖包。请在 Windows 的 cmd 窗口(或者git的bash) 中输入下列命令：npm  install 

 在安装期间可能出现红色的错误信息，你还会看到 npm WARN 信息。不过不用担忧，只要末尾处没有 npm ERR! 信息就算成功了。

Error messages—in red—might appear during the install, and you might see npm WARN messages. As long as there are no npm ERR! messages at the end, you can assume success.

步骤 2 ：建立应用

咱们用 NgModules 把 Angular 应用组织成了一些功能相关的代码块。 Angular 自己也被拆成了一些独立的 Angular 模块。 这让你能够只导入你应用中所需的 Angular 部件，以获得较小的文件体积。

每一个 Angular 应用都至少有一个模块： 根模块 ，在这里它叫作 AppModule 。

** 在应用的根目录下建立 app 子目录：

使用下列内容建立 app/app.module.ts 文件：

1 import { NgModule }      from '@angular/core';
2 import { BrowserModule } from '@angular/platform-browser';
3 
4 @NgModule({
5   imports:      [ BrowserModule ]
6 })
7 export class AppModule { }

View Code

这里是应用的入口点。

因为 QuickStart 是运行在浏览器中的 Web 应用，因此根模块须要从 @angular/platform-browser 中导入 BrowserModule 并添加到 imports 数组中。

这是要让最小的应用在浏览器中运行时，对 Angular 的最低需求。   

步骤 3 ：建立组件并添加到应用中

每一个 Angular 应用都至少有一个组件： 根组件 ，这里名叫 AppComponent 。

组件是 Angular 应用的基本构造块。每一个组件都会经过与它相关的模板来控制屏幕上的一小块（视图）。

使用下列内容建立组件文件 app/app.component.ts:

1 import { Component } from '@angular/core';
2 @Component({
3   selector: 'my-app',
4   template: '<h1>My First Angular App</h1>'
5 })
6 export class AppComponent { }

View Code

QuickStart 应用具备和其它 Angular 组件相同的基本结构：

• import 语句 。它让你能访问 Angular 核心库中的 @Component 装饰器函数 。

• @Component 装饰器 ，它会把一份 元数据 关联到 AppComponent 组件类上：

  • selector 为用来表明该组件的 HTML 元素指定简单的 CSS 选择器。

  • template 用来告诉 Angular 如何渲染该组件的视图。

• 组件类 经过它的模板来控制视图的外观和行为。这里，你只有一个根组件 AppComponent 。因为这个简单的 QuickStart 范例中并不须要应用逻辑，所以它是空的。

• A component class that controls the appearance and behavior of a view through its template. Here, you only have the root component,AppComponent. Since you don't need any application logic in the simple QuickStart example, it's empty.

咱们还要 导出 这个 AppComponent 类，以便让刚刚建立的这个应用导入它。

编辑 app/app.module.ts 文件，导入这个新的 AppComponent ，并把它添加到 NgModule 装饰器中的 declarations 和 bootstrap 字段：

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 { }

View Code

步骤 4 ：启动应用

如今，咱们还须要作点什么来让 Angular 加载这个根组件。

添加新文件app/main.ts

，内容以下：

1 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 import { AppModule } from './app.module';
3 const platform = platformBrowserDynamic();
4 platform.bootstrapModule(AppModule);

View Code

这些代码初始化了应用所在的平台，而后使用此平台引导你的 AppModule 。

为何要分别建立 main.ts 、应用模块 和应用组件的文件呢？

应用的引导过程与 建立模块或者 展示视图是相互独立的关注点。若是该组件不会试图运行整个应用，那么测试它就会更容易。

步骤 5 ：定义该应用的宿主页面，就是网页了

在 目录下建立 index.html 文件，并粘贴下列内容：

 1 <html>
 2   <head>
 3     <title>Angular QuickStart</title>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link rel="stylesheet" href="styles.css">
 7     <!-- 1. Load libraries -->
 8      <!-- Polyfill(s) for older browsers -->
 9     <script src="node_modules/core-js/client/shim.min.js"></script>
10     <script src="node_modules/zone.js/dist/zone.js"></script>
11     <script src="node_modules/reflect-metadata/Reflect.js"></script>
12     <script src="node_modules/systemjs/dist/system.src.js"></script>
13     <!-- 2. Configure SystemJS -->
14     <script src="systemjs.config.js"></script>
15     <script>
16       System.import('app').catch(function(err){ console.error(err); });
17     </script>
18   </head>
19   <!-- 3. Display the application -->
20   <body>
21     <my-app>Loading...</my-app>
22   </body>
23 </html>

View Code

这里值得注意的地方有：

• JavaScript 库： core-js 是为老式浏览器提供的填充库， zone.js 和 reflect-metadata 库是 Angular 须要的，而 SystemJS 库是用来作模块加载的。
• SystemJS 的配置文件和一段脚本，它导入并运行了咱们刚刚在 main 文件中写的 app 模块。
• <body> 中的 <my-app> 标签是应用程序的入口，表明一个应用！

步骤 6 ：编译并运行应用程序

打开终端窗口，并输入以下命令：npm start

该命令会同时运行两个并行的 node 进程：

• TypeScript 编译器运行在监听模式。
• 一个名叫 lite-server 的静态文件服务器，它把 index.html 加载到浏览器中，而且在该应用中的文件发生变化时刷新浏览器。

稍后，一个浏览器页标签就会打开并显示出来。

步骤 7 ：作一些即时修改

尝试把 app/app.component.ts 中的消息修改为 "My SECOND Angular App" 。

TypeScript 编译器和 lite-server 将会检测这些修改，从新把 TypeScript 编译成 JavaScript ，刷新浏览器，并显示修改过的消息。

当终止了编译器和服务器以后，能够关闭 terminal 窗口。