路由router.js'use strict';
angular.module('app').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider.state('main', {
url: '/main',
templateUrl: 'view/main.html',
controller: 'mainCtrl'
}).state('position', {
url: '/position/:id', //這裡需要傳入一個id的參數放在url後面傳遞過去
templateUrl: 'view/position.html',
controller: 'positionCtrl'
});
$urlRouterProvider.otherwise('main');
}])
控制器controller'use strict'angular.module('app').controller('mainCtrl',['$scope',function($scope){
$scope.list = [{
id:'1', //将這個id寫到頁面上
name:'銷售',
imgSrc:'image/company-3.png',
companyName: '千度',
city: '上海',
industry: '網際網路',
time: '2016-06-01 11:05'
},{
id:'2',
name:'WEB前端',
imgSrc:'image/company-1.png',
companyName: '慕課網',
city: '北京',
industry: '網際網路',
time: '2016-06-01 01:05'
}];
}]);
html模闆
- //通過ui-sref="position({id:item.id})"的方式将參數傳遞過去
-
angularjsl路由_AngularJS通過路由子產品ui-sref指令跳轉頁面傳參方法
擷取路由上參數:
注入$state服務，$state服務下有個$state.params屬性，這個$state.params屬性是個json對象，這個json對象所包含的資料就是我們前面傳入的參數。'use strict';
angular.module('app').controller('positionCtrl',['$q','$http','$state','$scope',function ($q,$http,$state,$scope) {
//擷取id的參數，并用$http請求對應的資料
$http.get('/data/position?id='+$state.params.id).success(fn1).error(fn2);
}]);
AngularJS跨頁面傳參方式小結：
①在路由中聲明url: ‘/url/:參數’；
②擷取資料通過ui-sref=”url({id:item.id})”的方式将參數挂載到url後面;
③在控制器中注入$state服務，利用\$state.params屬性擷取傳過來的參數。
