点击切换界面





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>

<script type="text/javascript">
//申明angular作用域时,引入路由
var app = angular.module("myApp",['ngRoute']);
app.controller("myCtrl",function($scope){

})
//创建路由
app.config(["$routeProvider",function($routeProvider){

// home是主页的路由
$routeProvider
.when("/home",
{
template:"<h1>欢迎登陆八维在线首页</h1>"
}
).when("/goods",
{
template:"<h1>这是音乐界面</h1>"
}
).when("/myself",
{
template:"<h1>这是游戏界面</h1>"
}
).otherwise({redirectTo:"/home"});
}]);
</script>
<style type="text/css">
div{
width: 1200px;
height: 200px;
}
a{
text-decoration: none;
}
</style>
</head >
<body ng-app="myApp" ng-controller="myCtrl">
<nav>
<a href="#/home">主页</a>>
<a href="#/goods">商品</a>>
<a href="#/myself">个人中心</a>
</nav>

<!--
        用来显示路由到的界面的view组件,,ng-view是标记
        -->
<div ng-view></div>
</body>
<!--
    通过script type="text/ng-template"定义angular路由的模板,,id是引用的参照
    -->
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值