文档章节

Angular 2 for TypeScript - QuickStart

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

精选30+云产品,助力企业轻松上云!>>>

快速开始的目标是编译运行一个超级简单的基于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。

obadneil
粉丝 0
博文 2
码字总数 1400
作品 0
常州
高级程序员
私信 提问
加载中
请先登录后再评论。
Node.js && Angular && TypeScript 环境安装与更新

安装 Node.js 下载并安装Node.js Angular 执行命令 参考资料:angular quickstart TypeScript 更新 更新Node.js 未测试以下命令行 我的做法是,去官网下载后直接覆盖安装,后面发现有问题,P...

osc_qguxi63b
2019/04/05
4
0
——Angular环境搭建

一、NPM安装 1.1 NPM与Node.js NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs等都有。因此,要想安装Angular框架,首先安装Node,Node直...

osc_2suhysff
2019/06/24
3
0
angular6.0教程:如何安装angular6.0框架

在5月4日这天,angular家庭迎来了最新版本——angular6.0,angular6.0时代正式到来。6.0版本重点关注工具链以及工具链在Angular中的运行速度问题。angular6.0在原angular5的基础上有了非常大...

hero2019
2018/06/28
22
0
初始识别ionic

ionic是什么? ionic 是一个强大的 HTML5 应用程序开发框架,一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。 ionic特点 1.ionic 基于Angular语法,简单易学。 2.ionic 是一个轻量...

摸着石头过河_崖边树
2018/12/04
0
0
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

没有更多内容

加载失败,请刷新页面

加载更多

要求jQuery在执行某些操作之前等待所有图像加载的官方方式

问题: In jQuery when you do this: 在jQuery中,当您执行以下操作时: $(function() { alert("DOM is loaded, but images not necessarily all loaded");}); It waits for the DOM t......

法国红酒甜
昨天
11
0
实现Map按值排序

Map按照值排序,需要自定义比较器,实现Comparator接口,实现compare方法。 public class SortByVlue {public static void main(String[] args) {Map<String, Long> map = new HashMap<......

游人未归
昨天
16
0
定天气爬虫加定时发送天气邮件

今天无聊,在家研究个爬虫玩玩 主要用到以下几个库: request 请求资源 iconv-lite转码,有的网站html格式不是utf-8 cheerio类似jq,操作html,获取相关爬虫数据 nodemailer 发送邮件,例如q...

莫西摩西
昨天
14
0
还在为大屏分辨率困扰?图扑提供响应式(自适应)可视化大屏

前言 数据可视化在当下信息时代已经成为炙手可热的话题,而 B/S 化趋势,也使得许多大屏应用上在网页端出现,今天给大家分享一套不一样风格的大屏页面,与传统深蓝色不同,这次采用了暗红色设...

xhload3d
昨天
20
0
如何妙用Spring 数据绑定机制

前言 在剖析完 Spring Boot 返回统一数据格式是怎样实现的?文章之后,一直觉得有必要说明一下 Spring's Data Binding Mechanism 「Spring 数据绑定机制」。 默认情况下,Spring 只知道如何转...

码农小胖哥
2019/12/27
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部