考虑到 多视图等因素，所以 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.csdn.net/zcl_love_wx/article/details/52034193--> <!-- 传递参数： https://blog.csdn.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>