angularjs2.0 五分钟入门教程之typescript版本

貌似没看到一个中文的讲解ng2入门五分钟教程,所以亲自整理了下整个入门教程的步骤,希望对后来者学习有所帮助。PS:我在win7中码的。

新建一个project目录,以下所有操作都在这个目录下进行。

1.安装tsd编译typescript代码命令工具

$ npm install -g [email protected]^0.6.0

2.安装angular2,es6-promiserx,rx,rx-lite

$ tsd install angular2 es6-promise rx rx-lite

注意这里可能报网络错误,需要翻**墙你懂的

3.新建两个空文件

app.ts index.html

4.安装typescript编译器,后面需要把typescript代码编译成浏览器能够识别的javascript代码

$ npm install -g [email protected]^1.5.0-beta  

5.实时监控typescript文件,检测到变化后执行自动编译

$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts  

以上是官网给出的代码,本人执行时遇到如下错误,提示

error TS6064:Option ‘experimentalDecorators‘ must also be specified when option ‘emitDecoratorMetadata’ is sepecified

这话提示我们还需要配置experimentalDecorators,所以我们需要修改下执行以下命令

$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata --experimentalDecorators app.ts

6.在app.ts中引入angular

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap} from ‘angular2/angular2‘;  

7.在app.ts中定义一个组件

// Annotation section
@Component({
selector: ‘my-app‘ //定义一个自定义标签,在html中对应为<my-app></my-app>
})
@View({
template: ‘<h1>Hello {{ name }}</h1>‘ //给这个自定义组件指定的html模板代码
})
// Component controller
class MyAppComponent {
name: string;
constructor() {
this.name = ‘Alice‘;
}
}

  

8.在app.ts中使用bootstrap()方法,将我们上面定义的MyAppComponent组件作为参数传入,通过这个方法我们才能将组件内容渲染到页面中

bootstrap(MyAppComponent);

9.回到index.html页面中,将下面的代码粘贴进去。

<!-- index.html -->
<html>
  <head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
  </head>
  <body>
    <!-- The app component created in app.ts -->
    <my-app></my-app>
<script>System.import(‘app‘);</script>
  </body>
</html>  

System.js这货是一个开源的第三方库,给浏览器扩展添加ES6模块加载的,所以你看到上面的代码中有System.import(‘app‘)这行代码,通俗讲就是加载app.ts编译生成的app.js。

System is a third-party open-source library that adds ES6 module loading functionality to browsers.

10.最后一步是运行,你可以按照以下代码安装http-server,也可以使用自己其他服务器配置如IIS - -!

# From the directory that contains index.html:
npm install -g http-server  # Or sudo npm install -g http-server
http-server                 # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html  

在project根目录下运行http-server就可以看到类似如下的界面,我的端口8080被占用所以变成自动分配成了8082

然后访问localhost:8082你就能够看到最终的效果了。

原文英文链接地址:https://angular.io/docs/js/latest/quickstart.html

时间: 2024-10-04 18:17:46

angularjs2.0 五分钟入门教程之typescript版本的相关文章

Angular2的五分钟入门在Windows下的实现

Angular2的五分钟入门在Windows下的实现 官网提供的是在linux的步骤,而实际直接拿这些步骤在windows下也可以实现,但唯一就是无法 --watch TypeScript文件,那就是扯蛋,改一下代码就要重新编译,谁受得了. 那么我来尝试一下直接使用Gulp来搭建. 一.创建项目 虽然Angular2允许我们使用TypeScript.Dart.ES5.ES6来写代码,但是出于Angular2也拥抱TypeScript,那么变成我们唯一最好的选择也是TypeScript. 首先创建

?HealthKit开发快速入门教程之HealthKit数据的操作

HealthKit开发快速入门教程之HealthKit数据的操作 数据的表示 在HealthKit中,数据是最核心的元素.通过分析数据,人们可以看到相关的健康信息.例如,通过统计步数数据,人们可以知道一天走的步数.本章将主要讲解HealthKit数据构成的方式,以及如何规范的表达一个数据. 2.1  数据的操作 在HealthKit中,数据都是与单位和值组成的,如图2.1所示.此图为一个睡眠分析的截图.在此图中59m就代表了一个数据.其中m为单位,59为基于单位的数值.本节将讲解数据的创建.判断

HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID

HealthKit开发快速入门教程之HealthKit框架体系创建健康AppID HealthKit开发准备工作 在开发一款HealthKit应用程序时,首先需要讲解HealthKit中有哪些类,在iOS上的Health即健康应用有哪些功能等.本节将针对这些问题进行讲解. HealthKit框架体系 对于一类应用程序来说,要进行开发,首先需要熟悉它的框架体系,即类.以下我们针对HealthKit中所使用的类进行了总结,如表1-1所示. 1-1  HealthKit框架体系 类 功能 NSObje

HealthKit开发快速入门教程之HealthKit开发概述HealthKit简介

?HealthKit开发快速入门教程之HealthKit开发概述简介? 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为"Healthkit".本章将主要讲解HealthKit的特点.经典应用以及在开发HealthKit时的准备工作. HealthKit简介 HealthKit就是可以收集和分析用户的健康数据移动应用平台.本节将主要讲解HealthKit的特点.经典应用. HealthKit特点 本小节将主要

HealthKit开发快速入门教程之HealthKit开发概述简介

HealthKit开发快速入门教程之HealthKit开发概述简介 2014年6月2日召开的年度开发者大会上,苹果发布了一款新的移动应用平台,可以收集和分析用户的健康数据.该移动应用平台被命名为“Healthkit”.本章将主要讲解HealthKit的特点.经典应用以及在开发HealthKit时的准备工作. HealthKit简介 HealthKit就是可以收集和分析用户的健康数据移动应用平台.本节将主要讲解HealthKit的特点.经典应用. HealthKit特点 本小节将主要讲解Healt

nodejs入门教程之http的get和request简介及应用

nodejs入门教程之http的get和request简介及应用 前言 上一篇文章,我介绍了nodejs的几个常用的模块及简单的案例,今天我们再来重点看一下nodejs的http模块,关于http模块,我们可以看下nodejs官方文档.关于http模块,有兴趣的可以研究一下node的源码.http模块功能是很强大的,今天主要介绍他的get和request方法! GET简介 我们首先来运行一下下面的代码 const http = require("http") http.get('htt

git 入门教程之1分钟快速了解 git

git 入门教程 git 是分布式版本控制系统,是文本文档管理的利器,是帮助你管理文件动态的好帮手. 如果你曾经手动管理过文档,一定有这样的经历,比如你正在编辑文档,想删除某段落,又担心不久后可能会恢复,此时你可能会先备份然后再删除,或者想要修改某段落,几经修改后发现还是最初的比较好,这是就哭笑不得了... 从最初的新建文档,经过反反复复的修改,最终定稿文档的过程极其繁琐冗长,这就是手动式管理文档的痛点. 如果有这么一种工具,能帮我自动记录每次文档的改动,想要查看文档变更详情只需要打开软件就能一

webpack入门教程之Hello webpack(一)

webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装webpack 2.如何使用webpack 3.如何使用loaders 4.如何使用开发服务器 话不多说,马上开启我们的webpack之旅...... 一.安装webpack(依赖nodeJs环境,nodejs环境的搭建不在此赘述) npm install webpack -g 二. Hello W

Android 命令行开发入门教程之1

其实,掌握记事本+命令行的编程方式是非常有效的,无论是电脑硬件配置和性能问题的制约,还是对于了解程序内部运行机制.调试等也有很好的帮助.但是很多人因为惧怕或者讨厌使用这种费力的编写习惯也是能够理解的,但这都是表面的现象,后序的工作一样是简单的.可重用的. 其实,掌握记事本+命令行的编程方式是非常有效的,无论是电脑硬件配置和性能问题的制约,还是对于了解程序内部运行机制.调试等也有很好的帮助.但是很多人因为惧怕或者讨厌使用这种费力的编写习惯也是能够理解的,但这都是表面的现象,后序的工作一样是简单的.