angular.js 路由及页面传参示例

页面传参数方法：1、$rootScope。2、（url）/user/:name/:age。

页面转换方法：1、href="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" 。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="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页1</a></li>
      <li><a href="#/second/2/3" rel="external nofollow" >second</a></li>
      <li><a href="#/printers" rel="external nofollow" >打印机</a></li>
      <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
    </ul>
    <div ng-view></div>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://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('/',{template:'这是首页页面'})
        .when('/second/:id/:age',
          {templateUrl: 'second.html',
          controller: 'AboutController'}
        )
        .when('/printers',{template:'这是打印机页面'})
        .when('/second_2',{template:'这是second_2'})
        .otherwise({redirectTo:'/'});
      }]); 

    </script> 

  </body>
</html>

(2)ui-router

<html>
  <head>
    <meta charset="utf-8">
    <title>AngularJS 路由实例 </title>
     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>  

    <script src="http://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="#/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页1</a></li>
      <li><a href="#/second/" rel="external nofollow" >second</a></li>
      <li><a href="#/third" rel="external nofollow" >third</a></li>
    </ul>
    <a href="#/fourth/42" rel="external nofollow" >href传参数</a>
    <a ui-sref="fifth({'name':123,'id':256})">ui-sref传参数</a>
    <button ng-click="ngclick_go()" class="btn btn-primary " >state.go传参数</button>
     <button ng-click="ngclick_location()" class="btn btn-primary " >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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。