正文

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

IP云
IP云V管理员/4 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

参考连接？不如说是照搬链接。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 文件： 

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

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

 @NgModule({

   imports:      [ BrowserModule ]

 })

 export class AppModule { }

这里是应用的入口点。

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

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

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

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

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

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

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

 @Component({

   selector: 'my-app',

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

 })

 export class AppComponent { }

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

步骤 4 ：启动应用

现在，我们还需要做点什么来让 Angular 加载这个根组件。

添加新文件app/main.ts

，内容如下： 

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

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

 const platform = platformBrowserDynamic();

 platform.bootstrapModule(AppModule);

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

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

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

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

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

 <html>

   <head>

     <title>Angular QuickStart</title>

     <meta charset="UTF-8">

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

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

     <!-- . 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>

     <!-- . Configure SystemJS -->

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

     <script>

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

     </script>

   </head>

   <!-- . Display the application -->

   <body>

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

   </body>

 </html>

这里值得注意的地方有：

  • 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 窗口。

相关阅读

目录[+]