一步一步学习Angular2(01.快速入门)

最新推荐文章于 2018-08-17 18:23:54 发布

魏小雨

最新推荐文章于 2018-08-17 18:23:54 发布

阅读量2.8k

点赞数 1

分类专栏： AngularJS 2 文章标签： typescript angular

本文链接：https://blog.csdn.net/wq_static/article/details/50462683

版权

AngularJS 2 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天跟随官网中的快速入门，开始我的第一个Angular2程序.

目录结构是这样的

angular2-quickstart
|__app
|   |__app.component.ts
|   |__boot.ts
|__index.html
|__license.md

因为是入门示例里我不需要过多的了解其中的细节。只要跟随它的步骤跑通这个例子即可。
1. 配置运行环境。
2. 用TypeScript写Angular2组件。
3. 引导程序。
4. 写主页面（index.html）。

配置运行环境

延用之前学习TypeScript时的工程目录在D:\workspace\vs文件夹下建一个angular2-quickstart文件夹，
使用VS打开这个文件夹，新建一个package.json文件，我们需要在这里配置我们需要的库文件。

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

在命令行下定位到当前文件位置，运行

npm install

配置typescript环境
在跟目录下在新建一个 tsconfig.json文件并粘贴下面的代码

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

这样我们就完成了我们的环境配置。

开始写我们的Angular组件

组件管理视图-通过这个视图可以向用户展示信息以及响应用户的反馈。
组件同样是一个类，一个控制视图模板的类。

在跟目录下建一个app文件夹

在app下增加一个组件文件 app.component.ts

app/app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

在真实的应用中我们会在AppComponent中写许多和业务有关的逻辑,但在入门程序中我们什么也不做,让他足够简单。

模块
Angular程序是模块化的，它是由许多专职于不同角色的模块组成的，并且使用export暴露以供外部调用。

export class AppComponent { }

引入一个外部模块的语法我们在之前的TS学习中使用过。
app/boot.ts

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

注解
入门示例中把它叫做Component Metadata但我觉得称为注解更好理解吧（迷糊）。
一个类想要成为Anglar的组件，需要我们为它加上特定的注解，Anglar需要这些注解来构造视图以及与应用的其它组件交互。
定义一个组件使用@Component注解，为此我们需要引入Angular的核心库。

import {Component} from 'angular2/core';

写注解是与其它语言如Java相类似的，都是在这个类上进行标识

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

selector是一个简单的HTML选择器，会选择以my-app命名的HTML标签<my-app></my-app>,Angular将会在此处创建，显示一个实例。
template是这个组件对应的模板，它是一段HTML，指导Anglar如何呈现一个视图。

引导程序

在app文件夹下新建一个boot.ts文件

app/boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

主页面（index.html）

在跟目录下新建一个index.html文件

index.html

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. 载入 libraries -->
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. 配置 SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. 显示结果 -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

值得注意的
1. AngularJS运行依赖于 angular2-polyfills.js 和 Rx.js.
2. 配置SystemJS并且由它启动boot引导程序.
3. 我们程序运行的结果将显示在<my-app></my-app>中.

程序的流程大概是,我们通过SystemJS加载我们的boot.ts,在boot.ts中执行bootstrap函数,它会读取AppComponent组件中的注解,查找my-app选择器,定位<my-app>标签,并在这个标签之间用我们定义的模板渲染它.

运行

在程序的跟目录下执行

npm start

执行这个命令会完成两件事件.
1. 进行编译并在观查模式(所有对程序的改动会立即反应到浏览器中)
2. 启动一个lite-server服务器,载入index.html,并在程序改动时刷新浏览器

过一会儿在浏览器中会看到

My First Angular 2 App

完成了我们的第一个例子…

ps.哎英语不好是硬伤啊.

魏小雨

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
一步一步学习Angular2(01.快速入门)

今天跟随官网中的快速入门，开始我的第一个Angular2程序.目录结构是这样的angular2-quickstart|__app| |__app.component.ts| |__boot.ts|__index.html|__license.md因为是入门示例里我不需要过多的了解其中的细节。只要跟随它的步骤跑通这个例子即可。 1. 配置运行环境。 2. 用TypeScript写
复制链接

扫一扫

专栏目录