135-1821-9792

angular.js中怎么实现页面传参

本篇文章给大家分享的是有关angular.js中怎么实现页面传参，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

黄南州网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

（1）自带路由ngRoute

 
   
     
    AngularJS 路由实例 
   
   
    
AngularJS 路由应用
 
       名: 
 
    
     
      
  • 首页1
    •  
      
  • second
    •  
      
  • 打印机
    •  
      
  • 其他
    •  
    
 
    
                                       

(2)ui-router

 
   
     
    AngularJS 路由实例  
       
 
      
   
   
   
   
    
     
      
  • 首页1
    •  
      
  • second
    •  
      
  • third
    •  
    
 
    href传参数 
    ui-sref传参数 
    state.go传参数 
     location传参数 
     
        
                          /* 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;            }            }) */                });                  

以上就是angular.js中怎么实现页面传参，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


网站标题：angular.js中怎么实现页面传参
分享链接：http://kswsj.com/article/jiiejd.html

其他资讯


  • 成都网站建设
    成都网站建设