文档章节

Angular 2 for TypeScript - QuickStart

obadneil
 obadneil
发布于 2016/06/21 12:51
字数 1394
阅读 40
收藏 0

快速开始的目标是编译运行一个超级简单的基于TypeScript的Anguler 2应用,并且为接下来的文档示例建立一个开发环境,同时它也能作为现实应用开发的基础。

试试看!

尝试用plunker加载这个在线示例,它将会展示一个简单的消息: demo

编译这个app!

准备:安装Node.js

如果你的机器上没有Node.js和npm的话,请先安装。

确保你的node版本至少为v5.x.x, npm版本至少为3.x.x,你可以通过在命令行执行node -vnpm -v来查看。更老的版本将会引发错误。

步骤1:创建和配置项目

我们将按以下顺序进行:

  • (a) 创建项目目录
  • (b) 添加package和configuration文件
  • (c) 安装package
(a) 创建项目目录
mkdir angular2-quickstart
cd angular2-quickstart
(b) 添加package定义和configuration文件

在项目路径中添加以下package定义和configuration文件:

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.2",
    "@angular/compiler":  "2.0.0-rc.2",
    "@angular/core":  "2.0.0-rc.2",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/platform-browser":  "2.0.0-rc.2",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
    "@angular/router":  "2.0.0-rc.2",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.2",
    "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.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

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+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

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',
    '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);
安装package

我们使用npm来安装列在package.json文件中的packages。在命令窗口中执行以下命令:

npm install

typings文件夹在npm install之后可能不会自动创建,如果这样,请手动安装

npm run typings install


**设置已经全部完成了。**让我们开始写代码吧。

### 步骤2:第一个Angular组件
首先我们创建一个文件夹来存放我们的应用,并且添加一个超级简单的Angular组件。

####在根目录下创建一个app子目录
```bash
mkdir app

####创建组件文件app/app.component.ts app/app.component.ts

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

步骤3:添加main.ts

现在我们需要告诉Angular使之加载根组件。创建文件app/main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

步骤4:添加index.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>

添加一些样式

样式不是必须的,但它们能让页面更美观。index.html预定义了一个叫styles.css的样式表

在项目根目录下创建文件styles.css,添加如下最简单的样式。 如果需要文档示例的完整样式,请参考styles.css

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
body {
  margin: 2em;
}

 /*
  * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
  * for the full set of master styles used by the documentation samples
  */

步骤5:编译并运行app!

打开命令窗口并执行如下命令

npm start

这个命令将运行两个并行node进程

  1. 监控模式下的TypeScript编译器
  2. 一个叫lite-server的静态服务器,它将在浏览器中加载index.html并在每次应用文件变更时刷新浏览器

做的漂亮!

作一些改变

尝试将消息改为“My SECOND Angular 2 app”

总结

我们最终的项目目录结构看起来是这样的:

.
├── app
│   ├── app.component.ts
│   └── main.ts
├── node_modules ...
├── typings ...
├── index.html
├── package.json
├── styles.css
├── systemjs.config.js
├── tsconfig.json
└── typings.json

下一步做什么?

我们的第一个应用不会包含太多东西。它就是一个Angular 2版的“Hello, World”。

在我们的第一次实践中,我们让它保持足够简单:我们写一个Anguar组件,创建了一个简单的index.html,并且运行了一个静态文件服务器。这是我们所能期待的“Hello, World”应用的全部内容了。

接下来我们将要用Angular 2建立一个小型应用demo。

© 著作权归作者所有

共有 人打赏支持
上一篇: hello world
下一篇: hello world
obadneil
粉丝 0
博文 2
码字总数 1400
作品 0
常州
高级程序员
私信 提问
Google 宣布新的 Angular 2.0 即将发布以及 AtScript 退休

Angular团队宣布在TypeScript方面同微软达成合作关系,而TypeScript的引入也意味着AtScript的终结。同时,Angular团队试图平复社区对迁移至Angular 2.0的担忧。 在ng-conf大会上,Google提及...

oschina
2015/03/07
7.2K
1
Angular 4.1.0 发布

Angular 4.1.0 发布 这是Angular 4.0的第一次小版本发布, Angular版本号语义与发布计划 更新内容: Version 4.1 增加对 TypeScript 2.2 and 2.3 支持. 这个版本的 Angular是使用 TypeScript...

lieefu
2017/04/27
133
0
Angular 4.1.0 正式发布,Web 前端框架

Angular 4.1.0 发布了,这是 Angular 4.0 的第一次小版本发布, Angular 版本号语义与发布计划。 Angular 4.1.0 版本增加了对 TypeScript 2.2 和 2.3 的支持。这个版本的 Angular 是使用 Ty...

局长
2017/04/27
6.3K
19
AngularDart 现已全面采用 Dart 开发

一直以来,Angular 2依然采用TypeScript作为主流开发语言,然后自动编译成JavaScript 和 Dart。Dart开发者一直在进行Angular 2拆分,将其分为TypeScript/JavaScript版本和Dart版本,并成立了...

oschina
2016/07/21
6K
25
Angular 2.0 调查:43% 选择 Webstorm 编辑器

这是 Jeff Whelpley 和 Patrick Stapleton 发布的博客,他们并不是全职的 Angular 团队成员,是 Angular 社区值得称赞的贡献者。本文是对所有用户都想知道的,关于 Angular 的一些总结。 几周...

oschina
2015/09/03
8.5K
14

没有更多内容

加载失败,请刷新页面

加载更多

【PG内核】pg11秒级新增非空默认字段的实现方法

pg11新特性,可以瞬间向一个表中添加非空默认字段。 今天研究了一下这个特性的内核实现方式,写个博客简单记录一下。 结论奉上 pg在从硬盘或者内存获取到一条数据记录后(以下称tuple),会使...

movead
23分钟前
2
0
如何保证MongoDB的安全性?

上周写了个简短的新闻《MongoDB裸奔,2亿国人求职简历泄漏!》: 根据安全站点HackenProof的报告,由于MongoDB数据库没有采取任何安全保护措施,导致共计202,730,434份国人求职简历泄漏。 然...

Fundebug
29分钟前
1
0
KVM

目录 (1):简介及安装 1. KVM 介绍 1.0 虚拟化简史 1.1 KVM 架构 2. KVM 的功能列表 3. KVM 工具集合 4. RedHat Linux KVM 安装 4.1 在安装 RedHat Linux 时安装 KVM 4.2 在已有的 RedHat...

临江仙卜算子
44分钟前
0
0
脚本配置java开发环境

@echo off&setlocal enabledelayedexpansion cls @echo "This script is used to registe envionment variables......" @echo. @echo. @echo. set var=%~dp0 set var=%var:~,-1% @echo "regi......

默克鱼
今天
1
0
c++中友元函数理解与使用

在学习c++这一块,关于友元函数和友元类,感觉还是不好理解,但是井下心来,理解,需要把我一下几点。 首先讲友元函数。 (1)友元函数: 1)C++中引入友元函数,是为在该类中提供一个对外(除...

天王盖地虎626
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部