AngularJS路由传参

来源：互联网发布：尚学堂java培训骗局编辑：程序博客网时间：2024/06/05 15:15

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       
       <script type="text/javascript" src="../AngularJS库/angular.js" ></script>
       
       <script type="text/javascript" src="../AngularJS库/angular-route.js" ></script>
       <script>
           //3.在anjularJS模块中注入路由 ["ngRoute"]
           var app = angular.module("myApp",["ngRoute"]);
           //4.在config函数中配置路由规则,里面是一个数组[]
           app.config(["$routeProvider",function($routeProvider){
               $routeProvider
               .when("/",{template:"这是主页面"})
               .when("/user",{template:"这是个人中心"})
               .when("/car",{template:"这是购物车"})
               .when("/setting",{template:"这是设置"})
               .when("/haha",{template:"这是哈哈"})
               .when("/yonghu/:name/:age",{
                   templateUrl:"yonghu.html",
                   controller:"yonghuCtrl"
               })
               .otherwise({redirectTo:"/"});
           }]);
           app.controller("myCtrl",function($scope,$location){
               $scope.tiao = function(url){
                   //alert("f");
                   $location.path(url);
               };
           });
           app.controller("yonghuCtrl",function($scope,$routeParams){
               /*$scope.yonghud = function(url){
                   alert(url);
                   //$location.path(url);
               }   */
               $scope.name = $routeParams.name;
               $scope.age = $routeParams.age;

           });
       </script>
       <style>
           div{
               width: 200px;
               height: 200px;
               background: salmon;
               border: 1px solid saddlebrown;
           }
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       
       <input type="text" ng-model="name" />
       <input type="text" ng-model="age" />

       <ul>
           <li><a href="#/">主页面</a></li>
           <li><a href="#/user">个人中心</a></li>
           <li><a href="#/car">购物车</a></li>
           <li><a href="#/setting">设置</a></li>
           <li><a href="#/yonghu/{{name}}/{{age}}">用户</a></li>

       </ul>
       <button ng-click="tiao('/haha')">按钮路由</button>
       
       <div ng-view></div>


   </body>

   <script type="text/ng-template" id="yonghu.html">
   <p>{{name}}</p>
   <p>{{age}}</p>
   </script>
</html>

阅读全文

0 0