文档章节

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
常州
高级程序员
私信 提问
此生无悔入 TypeScript

↑ 编者按:本文由phodal公众号授权奇舞周刊转载。 想来,我已经用 TypeScript 已经有一段时间了,它可以算得上是前端领域的一门 “平淡生活” 的语言。 平淡生活,我的意思是:生活可以从此...

奇舞周刊
04/26
0
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
05/21
0
0
angular--Observable总结

Observable的通俗理解 ---Observable在消息发布者和观察者Observer之间起到一个媒体中介的作用,Observer是真正需要接受信息的人。Observable的实例提供了一个订阅函数,subscribe()。当Obs...

IrisHuang
07/07
0
1
angular 组件间的交流(1)--@Output 和@Input

总的来说,Input 用来进行属性绑定,将父组件的属性传给子组件,即有数据传进组件;Output 用来在事件绑定时,子组件将事件传给父组件进行处理,既有数据传出组件;如图: @Output() 先来看串...

IrisHuang
07/12
0
0
angular--怎样创建响应式表单?

在angular中,提供了两种创建表单的方式: * 模板驱动型表单(Template Driven Forms) * 响应式表单(Reactive Forms) 在模板驱动型表单中,我们直接通过 ngModel 指令在组件模板中创建 co...

IrisHuang
07/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS 安装PHP5和PHP7

安装PHP5 下载解压二进制包 [root@test-a src]# cd /usr/local/src/[root@test-a src]# wget http://cn2.php.net/distributions/php-5.6.32.tar.bz2[root@test-a src]# tar jxvf php-5.6......

野雪球
今天
4
0
windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
6
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部