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

Question

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

我是 AngularJS 的新手，我基本上想说“如果用户点击“this”配置文件，请转到 /models/{{ model.id }}，其中 model.id 是被点击的“this”配置文件的值。

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

到目前为止，我一直在工作，因为当悬停配置文件链接时会显示正确的 ID，并且它会使用正确的 url 参数进入正确的视图，但是我如何在视图中写入数据以使数据是否与被点击的 ID 相关？我通常用 PHP/Laravel 和 MySQL 来做这件事，但我想用 Angular 来试试。

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

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

ma​​in.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（假装“其他东西”是针对个人资料的）：

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

Answer 1

使用不同的控制器来简化此操作。参数: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];
    });
}

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

通常您会创建一个服务来处理数据的检索和存储。为了简单起见，暂时留下$http。

建议阅读文档网站上的 phoneCat 教程。 这里是link to the routing section

Answer 2

您需要做的就是使用$RouteParams 服务。 Here's the documentationAngularJS官网