• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
貌似没看到一个中文的讲解ng2入门五分钟教程,所以亲自整理了下整个入门教程的步骤,希望对后来者学习有所帮助。PS:我在win7中码的。
新建一个project目录,以下所有操作都在这个目录下进行。
 
1.安装tsd编译typescript代码命令工具
$ npm install -g tsd@^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 typescript@^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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript完全解读(26课时)_17.装饰器发布时间:2022-07-18
下一篇:
Angular2 快速入门(TypeScript + Webpack) - Jean-Xu发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap