Angular2 路由 - 初体验

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Router</title>
<script type="text/javascript" src="lib/system@0.16.11.js"></script>
<script type="text/javascript" src="lib/angular2.dev.js"></script>
<!--注册Angular2路由模块库-->
<script type="text/javascript" src="lib/router.dev.js"></script>
<script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
<ez-app></ez-app>
<script type="module">
import {Inject,Component,View,bootstrap} from "angular2/angular2";
//引入路由相关类型定义
import {LocationStrategy,RouteConfig,RouterOutlet,RouterLink,Router,routerInjectables} from "angular2/router";

//EzApp组件 ： 路由配置与执行
@Component({selector:"ez-app"})
@View({
directives:[RouterOutlet,RouterLink],
template : `
<nav>
<!--声明路由入口-->
<b router-link="video">video</b> |
<b router-link="music">music</b>
</nav>
<main>
<!--声明路由出口-->
<router-outlet></router-outlet>
</main>
`
})
//路由配置
@RouteConfig([
{path:"/video", component:EzVideo,as:"video"},
{path:"/music", component:EzMusic,as:"music"}
])
class EzApp{
constructor(@Inject(LocationStrategy) ls){
ls.pushState = function(){};//simple hack for crash bug.
}
}

//EzVideo组件
@Component({selector:"ez-video"})
@View({
template : `
<h3>视频：轻松一刻</h3>
<embed allowscriptaccess="always" height="482" pluginspage="http://get.adobe.com/cn/flashplayer/" flashvars="list=http%3A%2F%2Fus.sinaimg.cn%2F002TFmqWjx06TNSxqGuz0504010000220k01.m3u8%3FKID%3Dunistore%2Cvideo%26Expires%3D1437020410%26ssig%3DNnoWLSjm2v&amp;fid=1034:882b42973162c7ae7acef23bfaccbe8c&amp;logo=2&amp;uid=1971237631" allowfullscreen="true" width="482" quality="high" src="http://js.t.sinajs.cn/t5/album/static/swf/video/player.swf?v1423545453000454353" type="application/x-shockwave-flash" wmode="transparent">
`
})
class EzVideo{}

//EzMusic组件
@Component({selector:"ez-music"})
@View({
template : `
<h3>音乐：平凡之路</h3>
<embed src="http://player.yinyuetai.com/video/player/2094298/a_0.swf" quality="high" width="480" height="334" align="middle" allowScriptAccess="sameDomain" allowfullscreen="true" type="application/x-shockwave-flash"></embed> `
})
class EzMusic{}

//注入路由功能依赖项
bootstrap(EzApp,[routerInjectables]);
</script>
</body>
</html>

 

 

ez-app{background:#e9e9e9;border-radius:5px;display:block;padding:5px;}
nav{background:#ccc;padding:5px;}
nav b{cursor:pointer;}
h1{padding:10px;border-radius:5px;color:#fff}
ez-video h1{background:#f00;}
ez-music h1{background:#0f0;}

posted @ 2016-05-09 17:18  爱学习的小赵同学  阅读(246)  评论(0)    收藏  举报