angular路由
<!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",
{
templateUrl:"04112.html"
}
).when("/myself",
{
templateUrl:"myself.html"
}
).otherwise({redirectTo:"/home"});
}]);
</script>
<style type="text/css">
div{
width: 1200px;
height: 200px;
background-color: red;
}
</style>
</head >
<body ng-app="myApp" ng-controller="myCtrl">
<nav>
<a href="#/home">主页</a>
<a href="#/goods">商品</a>
<a href="#/myself">个人中心</a>
<a href="#/other">其他</a>
</nav>
<!--
用来显示路由到的界面的view组件,,ng-view是标记
-->
<div ng-view></div>
</body>
<!--
通过script type="text/ng-template"定义angular路由的模板,,id是引用的参照
-->
<script type="text/ng-template" id="myself.html">
<h1>我是个人中心</h1>
姓名:<input type="text" ng-model="uname" /><br />
年龄:<input type="text" ng-model="uage" /><br />
</script>
</html>