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

Question

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

我是 AngularJS 的新手，我基本上是想说“如果用户单击“此”配置文件，请使用模型转到 /models/{{ model.id }}。 id 是被点击的“这个”配置文件的值。

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

到目前为止，我的工作是在悬停配置文件链接时显示正确的 ID，并使用正确的 url 参数转到正确的 View ，但是我如何在它转到的 View 中写入数据，以便数据将与被点击的 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

使用不同的 Controller 来简化它。可以使用注入(inject) Controller 的 $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];
    });
}

请务必更新此 Controller 的路由配置。

通常您会创建一个服务来处理数据的检索和存储。暂时保留 $http 以保持简单。

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