最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
angular.js 路由及页面传参示例
时间:2017-05-03 编辑:简简单单 来源:一聚教程网
页面传参数方法: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
代码如下 | 复制代码 |
AngularJS 路由应用 名:
vartransform =function(data){return$.param(data); } varapp=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:'/'}); }]);
|
(2)ui-router
代码如下 | 复制代码 |
/* var app = angular.module('routerApp', ['ui.router']); */ varapp=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; }
}) */
});
|
相关文章
- webpack打包单页面如何引用的js 06-07
- 在js代码拼接dom对象到页面上去的模板总结 04-05
- jsp、struts、spring、mybatis实现前端页面功能模块化拆分的方案 01-11
- JS实现的表头列头固定页面功能示例 01-10
- JS调用iframe方式实现Web区域打印页面内容 01-23
- iframe父子页面相互调用js代码 06-09