Javascript AngularJS:route to/page/:id和show id';什么信息?
我知道这是一个结构拙劣的问题,但我不知道还能怎么问 我是AngularJS的新手,我试图基本上说“如果用户点击了这个”配置文件,请转到Javascript AngularJS:route to/page/:id和show id';什么信息?,javascript,json,angularjs,router,Javascript,Json,Angularjs,Router,我知道这是一个结构拙劣的问题,但我不知道还能怎么问 我是AngularJS的新手,我试图基本上说“如果用户点击了这个”配置文件,请转到/models/{{model.id}},model.id是点击的“这个”配置文件的值 基本上,main.html只有一点信息(如果您愿意的话,可以是一个片段),当点击一个概要文件时,它应该转到/models/{{model.id}},然后显示完整的概要文件,而不仅仅是一个片段 到目前为止,它的工作原理是:在悬停配置文件链接时,会显示正确的id,并使用正确的url
/models/{{model.id}}
,model.id是点击的“这个”配置文件的值
基本上,main.html只有一点信息(如果您愿意的话,可以是一个片段),当点击一个概要文件时,它应该转到/models/{{model.id}}
,然后显示完整的概要文件,而不仅仅是一个片段
到目前为止,它的工作原理是:在悬停配置文件链接时,会显示正确的id,并使用正确的url参数进入正确的视图,但是我如何才能在它进入的视图中写入数据,从而使数据与单击的id相关?我通常使用PHP/Laravel和MySQL进行此操作,但我想使用古拉尔
app.js:
'use strict';
angular
.module('swoleincApp', [
'ngRoute',
'ngSanitize',
'ngAnimate'
])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/models', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/models/:id', {
templateUrl: 'views/individual.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/models'
});
$locationProvider.html5Mode(true);
}]);
'use strict';
angular
.module('swoleincApp')
.controller('MainCtrl', ['$scope', '$http', MainCtrl]);
function MainCtrl($scope, $http) {
$http.get('storage/models.json').success(function(data) {
$scope.models = data;
});
}
<div class="model-container" ng-repeat="model in models">
<a href="/models/{{ model.id }}">
<div class="row">
<div class="col-sm-2">
<div class="model-profile-image">
<img ng-src="{{ model.profileImage }}" width="100" height="100">
</div>
</div>
<div class="col-sm-8">
<div class="model-stats">
<h3>{{ model.name }}, {{ model.age }}, {{ model.height }}, {{ model.weight }}.</h3>
</div>
<div class="model-motto">
<p>{{ model.motto }}</p>
</div>
</div>
</div>
</a>
</div>
{
"1": {
"id": "1",
"profileImage": "../img/dom.jpg",
"name": "Dom",
"age": "19",
"height": "6'2",
"weight": "170lbs",
"motto": "My name is dom and I'm a 19 year old bodybuilder from Russia.",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
},
"2": {
"id": "2",
"profileImage": "../img/Tom.jpg",
"name": "Tom",
"age": "21",
"height": "5'8",
"weight": "190lbs",
"motto": "I'm Tom. Everyone knows my name. Everyone knows my game.",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
}
}
MainCtrl.js:
'use strict';
angular
.module('swoleincApp', [
'ngRoute',
'ngSanitize',
'ngAnimate'
])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/models', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/models/:id', {
templateUrl: 'views/individual.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/models'
});
$locationProvider.html5Mode(true);
}]);
'use strict';
angular
.module('swoleincApp')
.controller('MainCtrl', ['$scope', '$http', MainCtrl]);
function MainCtrl($scope, $http) {
$http.get('storage/models.json').success(function(data) {
$scope.models = data;
});
}
<div class="model-container" ng-repeat="model in models">
<a href="/models/{{ model.id }}">
<div class="row">
<div class="col-sm-2">
<div class="model-profile-image">
<img ng-src="{{ model.profileImage }}" width="100" height="100">
</div>
</div>
<div class="col-sm-8">
<div class="model-stats">
<h3>{{ model.name }}, {{ model.age }}, {{ model.height }}, {{ model.weight }}.</h3>
</div>
<div class="model-motto">
<p>{{ model.motto }}</p>
</div>
</div>
</div>
</a>
</div>
{
"1": {
"id": "1",
"profileImage": "../img/dom.jpg",
"name": "Dom",
"age": "19",
"height": "6'2",
"weight": "170lbs",
"motto": "My name is dom and I'm a 19 year old bodybuilder from Russia.",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
},
"2": {
"id": "2",
"profileImage": "../img/Tom.jpg",
"name": "Tom",
"age": "21",
"height": "5'8",
"weight": "190lbs",
"motto": "I'm Tom. Everyone knows my name. Everyone knows my game.",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
}
}
main.html:
'use strict';
angular
.module('swoleincApp', [
'ngRoute',
'ngSanitize',
'ngAnimate'
])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/models', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/models/:id', {
templateUrl: 'views/individual.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/models'
});
$locationProvider.html5Mode(true);
}]);
'use strict';
angular
.module('swoleincApp')
.controller('MainCtrl', ['$scope', '$http', MainCtrl]);
function MainCtrl($scope, $http) {
$http.get('storage/models.json').success(function(data) {
$scope.models = data;
});
}
<div class="model-container" ng-repeat="model in models">
<a href="/models/{{ model.id }}">
<div class="row">
<div class="col-sm-2">
<div class="model-profile-image">
<img ng-src="{{ model.profileImage }}" width="100" height="100">
</div>
</div>
<div class="col-sm-8">
<div class="model-stats">
<h3>{{ model.name }}, {{ model.age }}, {{ model.height }}, {{ model.weight }}.</h3>
</div>
<div class="model-motto">
<p>{{ model.motto }}</p>
</div>
</div>
</div>
</a>
</div>
{
"1": {
"id": "1",
"profileImage": "../img/dom.jpg",
"name": "Dom",
"age": "19",
"height": "6'2",
"weight": "170lbs",
"motto": "My name is dom and I'm a 19 year old bodybuilder from Russia.",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
},
"2": {
"id": "2",
"profileImage": "../img/Tom.jpg",
"name": "Tom",
"age": "21",
"height": "5'8",
"weight": "190lbs",
"motto": "I'm Tom. Everyone knows my name. Everyone knows my game.",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
"other": "other stuff",
}
}
使用不同的控制器来简化此操作。可以使用注入控制器的
$routeParams
访问参数:id
angular
.module('swoleincApp')
.controller('ProfileCtrl', ['$scope', '$http','$routeParams', ProfileCtrl]);
function ProfileCtrl($scope, $http, $routeParams) {
$http.get('storage/models.json').success(function(data) {
$scope.profile= data[$routeParams.id];
});
}
请确保更新此控制器的路由配置
angular
.module('swoleincApp')
.controller('ProfileCtrl', ['$scope', '$http','$routeParams', ProfileCtrl]);
function ProfileCtrl($scope, $http, $routeParams) {
$http.get('storage/models.json').success(function(data) {
$scope.profile= data[$routeParams.id];
});
}
通常情况下,您会创建一个服务来处理检索数据和存储数据的过程。现在请保留$http
,以保持简单
建议浏览文档网站上的phoneCat教程。
这里有一个你需要做的就是使用
$RouteParams
服务。在AngularJS官方网站上,我建议你使用ui路由器。这太棒了。ui sref可以做到这一点,而且这些路由对于父/子路由来说非常棒。太棒了,我会检查一下。谢谢!你好@Lansana,对不起,我没有收到你的问题。它现在工作正常吗?你想做什么?你想在一个单独的页面(在不同的URL中)显示每个配置文件的详细信息吗?太棒了,谢谢!我才刚刚开始,虽然我知道服务。我想通过这种方式实现它,首先只是想知道如何做,然后立即使用服务(正确的方式)。再次感谢!