angular.js 路由及页面传参( 收藏)

最新推荐文章于 2022-02-06 11:46:02 发布

mystraight

最新推荐文章于 2022-02-06 11:46:02 发布

阅读量299

点赞数

分类专栏： angular

angular 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

页面传参数方法：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="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="#/">首页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()" 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>