考虑到 多视图等因素，所以 angular 的路由考虑使用 ng-ui-route来做，而不使用 ng-route来做!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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" src="./js/angular-ui-router.js"></script>
<style type="text/css">
a{margin-right:30px;}
</style>
</head>
<body>
<!-- 参考： https://blog.****.net/zcl_love_wx/article/details/52034193-->
<!-- 传递参数： https://blog.****.net/smile_panda/article/details/50976777-->
<div ng-app="myApp" class="myApp" ng-controller="myAppController">
<a ng-repeat="x in navlist" ui-sref="{{x.name}}({id:{{x.id}}})">{{x.title}}</a>
<a ui-sref="pram({id:22222})">传参</a>
<div class="myAppBot" ui-view></div>
<script type="text/ng-template" id='home'>
<div ng-controller="homeController">
{{username}}
</div>
</script>
<script type="text/ng-template" id='hot'>
<div ng-controller="hotController">
{{username}}
</div>
</script>
<script type="text/ng-template" id='top'>
{{username}}
</script>
<script type="text/ng-template" id='pram'>
{{username}}
</script>
</div>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(["$stateProvider", function ($stateProvider) {
$stateProvider
.state("/",{
url: "/", //定义路由
templateUrl:"home", //定义模板 还有个是 template
controller:"homeController" // 定义控制器
})
.state("home",{
url: '/home',
templateUrl:"home",
controller:"homeController",
})
.state("hot",{
url:'/hot',
templateUrl :'hot',
controller:"homeController",
params:{'id':''}
})
.state("top",{
url:'/top',
templateUrl:'top',
controller:"topController",
params:{'id':null}
})
.state("pram",{
url:'/pram',
templateUrl :'pram',
controller:"pramController",
params:{'id':null}
})
;
}]);
myApp.controller('myAppController',['$scope',function($scope){
alert();
$scope.navlist = [
{title:'首页',name:'home',id:1},
{title:'热门',name:'hot',id:2},
{title:'推荐',name:'top',id:3},
];
}]);
myApp.controller('homeController',['$scope','$stateParams',function($scope,$stateParams){
$scope.username = "张三";
}]);
myApp.controller('hotController',['$scope','$stateParams',function($scope,$stateParams){
console.log($stateParams);
$scope.username = "这里hot控制器";
// console.log($routeParams);
}]);
myApp.controller('topController',['$scope','$stateParams',function($scope,$stateParams){
console.log($stateParams);
$scope.username = "这里top控制器";
}]);
myApp.controller('pramController',['$scope','$stateParams',function($scope,$stateParams){
console.log($stateParams);
$scope.username = "这里pram控制器";
}]); </script>
</html>