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://cdiso.cn/article/jiiejd.html

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

AngularJS 路由应用

其他资讯