AngularJS 路由及传值功能

来源:互联网 发布:金蝶软件 编辑:程序博客网 时间:2024/05/16 14:58

注意:(#/shouye   , #/gouwuche , #me  为同一项目下的xml文件,界面当中 以{{name}} 的方法获取值


<!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>

<style>
ul{
list-style: none;
}

a{
text-decoration: none;
color: red;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<ul>
<li><a href="#/shouye">首页</a></li>
<li><a href="#/gouwu">购物车</a></li>
<li><a href="#/me">我的</a></li>
</ul>

<br />
<ng-view></ng-view>



<script type="text/javascript">
var mk = angular.module("myApp",["ngRoute"]);//将路由对象注入模块
mk.controller("myCtrl",function($scope){

//要传到其他界面的值
$scope.name = "郭大哥的";

})
//配置路由
mk.config(function($routeProvider){

$routeProvider.when("/shouye",{templateUrl:"shouye.html"}).when("/gouwu",{templateUrl:"gouwuche.html"}).when("/me",{templateUrl:"me.html"})

})
</script>
</body>
</html>
原创粉丝点击