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

Question

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.

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.

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.

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

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

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

Use a different controller to simplify this. The parameter :id can be accessed using $routeParams injected into controller.

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 $http in for now to keep it simple.

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