页面传参数方法：1、$rootScope。2、（url）/user/:name/:age。
页面转换方法：1、href="#/" 。2、$state.Go。3、$location.path。4、ui-sref
（1）自带路由ngRoute
<html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例</title> </head> <body ng-app='routingDemoApp' ng-controller="myCtrl"> <h2>AngularJS 路由应用</h2> 名: <input type="text" ng-model="names"><br> <ul> <li><a href="#/" >首页1</a></li> <li><a href="#/second/2/3" >second</a></li> <li><a href="#/printers" >打印机</a></li> <li><a href="#/blabla" >其他</a></li> </ul> <div ng-view></div> <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script> <script src="https://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script> var transform =function(data){return $.param(data); } var app=angular.module('routingDemoApp',['ngRoute']); app.controller('myCtrl', function($scope,$http, $rootScope) { $http({ method:'POST', url:"http://localhost:8090/angu_demo/test.chtm", data:{"age":20 } }) .success(function(data,header,config,status){ //响应成功 $scope.names = data[0].age; $rootScope.name="rrrrrr"; }).error(function(data,header,config,status){ //处理响应失败 }); }); app.controller('AboutController', function($scope,$http,$rootScope,$routeParams) { $scope.id = $routeParams.id; $scope.age = $routeParams.age; $scope.name=$rootScope.name; }) app.config(['$routeProvider', function($routeProvider){ $routeProvider .when('https://www.jb51.net/',{template:'这是首页页面'}) .when('/second/:id/:age', {templateUrl: 'second.html', controller: 'AboutController'} ) .when('/printers',{template:'这是打印机页面'}) .when('/second_2',{template:'这是second_2'}) .otherwise({redirectTo:'https://www.jb51.net/'}); }]); </script> </body> </html>
(2)ui-router
<html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例 </title> <script src="https://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="https://cdn.bootcss.com/angular-ui-router/1.0.0-beta.3/angular-ui-router.js"></script> </head> <body ng-app="routerApp" > <div ng-controller="MainCtrl"> <ul> <li><a href="#/" >首页1</a></li> <li><a href="#/second/" >second</a></li> <li><a href="#/third" >third</a></li> </ul> <a href="#/fourth/42" >href传参数</a> <a ui-sref="fifth({'name':123,'id':256})">ui-sref传参数</a> <button ng-click="ngclick_go()" >state.go传参数</button> <button ng-click="ngclick_location()" >location传参数</button> <div ui-view></div> <div ui-view="second0"></div> <div ui-view="second1"></div> <div ui-view="second2"></div> </div> <script type="text/javascript"> /* var app = angular.module('routerApp', ['ui.router']); */ var app=angular.module('routerApp',['ui.router']); app.controller('MainCtrl', function($scope, $state,$location) { $scope.ngclick_go = function() { $state.go('sixth',{name: 42}); // 跳转后的URL： #/camnpr/appManager }; $scope.ngclick_location = function() { $location.path('/sixth/detail/42'); // 功能也是跳转的 }; }); app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/second'); //与原生的$routerProvider写法不一样的就是$urlRouterProvider先写默认路径 $stateProvider //再用$stateProvider.state('',{}).state('',{})...代替$routerProvider.when()方法 .state('second', { url: '/second', views: {'second0': { templateUrl: 'second0.html' , //看到templateUrl:后面包含了很多的模板 controller: 'MainCtrl' }, 'second1': { templateUrl: 'second1.html', controller: 'MainCtrl' }, 'second2': { templateUrl: 'second2.html', controller: 'MainCtrl' } } }) .state('third', { url: '/third', templateUrl: 'third.html' , //看到templateUrl:后面包含了很多的模板 controller: 'MainCtrl' }) .state('fourth', { url: '/fourth/:name', templateUrl: 'forth.html' , //看到templateUrl:后面包含了很多的模板 controller: function ($stateParams,$scope) { $scope.name=$stateParams.name; alert(=$stateParams.name) } }) .state('fifth', { url: '/fifth/:name/:id', templateUrl: 'fifth.html' , //看到templateUrl:后面包含了很多的模板 controller: function ($stateParams,$scope) { alert($stateParams.name+" "+$stateParams.id) } }) .state('sixth', { url: '/sixth/detail/:name', templateUrl: 'sixth.html' , //看到templateUrl:后面包含了很多的模板 controller: function ($stateParams,$scope) { alert($stateParams.name) } }) /* .state('fourth', { url: '/fourth/:name', templateUrl: 'third1.html' , //看到templateUrl:后面包含了很多的模板 controller: function ($stateParams,$scope) { $scope.name=$stateParams.name; } }) */ }); </script> </body> </html>
下载地址：angu_demo_jb51.rar