javascript AngularJS：路由到 /page/:id 并显示 id 的信息？

AngularJS: route to /page/:id and show id's information?

提问by Lansana Camara

I know it's a poorly constructed question, but I don't know how else to ask it.

我知道这是一个结构不佳的问题，但我不知道还能怎么问。

I'm new to AngularJS, I'm trying to basically say "if a user clicks on "this" profile, go to /models/{{ model.id }}with model.id being the value of "this" profile that was clicked.

我是 AngularJS 的新手，我基本上是想说“如果用户点击“这个”配置文件，去/models/{{ model.id }}使用 model.id 作为被点击的“这个”配置文件的值。

Basically, the main.html has only a bit of the information (a snippet, if you will), and when a profile is clicked it should go to /models/{{ model.id }}and then show the full profile as opposed to just a snippet.

基本上，main.html 只有一点信息（一个片段，如果你愿意的话），当一个配置文件被点击时，它应该转到/models/{{ model.id }}然后显示完整的配置文件，而不是一个片段。

I have it working so far in that the correct id shows up when hovering the profile link and it goes to the correct view with the correct url parameters, but how can I write data in the view that it goes to such that the data will be relevant to the ID that was clicked? I normally do this with PHP/Laravel and MySQL but I wanted to try it with Angular.

到目前为止，我一直在工作，因为在悬停个人资料链接时会显示正确的 ID，并且它会使用正确的 url 参数转到正确的视图，但是我如何在它转到的视图中写入数据，以便数据将是与被点击的 ID 相关？我通常使用 PHP/Laravel 和 MySQL 执行此操作，但我想使用 Angular 进行尝试。

app.js:

应用程序.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);
        }]);

MainCtrl.js:

MainCtrl.js：

'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;
    });
}

main.html:

主文件：

<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>

models.json (pretend the "other stuff" is meant for the individual profiles):

models.json（假装“其他东西”是为个人资料准备的）：

{
    "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",
    }
}

回答by charlietfl

Use a different controller to simplify this. The parameter :idcan be accessed using $routeParamsinjected into controller.

使用不同的控制器来简化这一点。:id可以使用$routeParams注入控制器访问该参数。

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];
    });
}

Be sure to update your routing config for this controller.

请务必更新此控制器的路由配置。

Normally you would create a service to handle retrieving the data and storing it. Have left $httpin for now to keep it simple.

通常，您会创建一个服务来处理数据的检索和存储。$http现在已经离开以保持简单。

Suggest going through the phoneCat tutorial on documentations site. Here's link to the routing section

建议浏览文档站点上的 phoneCat 教程。这是路由部分的链接

回答by Mohammad Reza Farahani

All you need to do is to use the $RouteParamsservice. Here's the documentationon the AngularJS official website

您需要做的就是使用该$RouteParams服务。这是AngularJS 官网的文档