AngularJS：服务错误，服务未定义。 我究竟做错了什么？

Question

It was working fine when I used the $http service, but I wanted to make it RESTful. I'm getting errors now. Can someone kick me in the right direction? What am I doing wrong?

app.js:

'use strict';

angular
    .module('swoleincApp', [
        'ngRoute',
        'ngSanitize',
        'ngAnimate',
        'ngResource'
    ])
    .config(['$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
            $routeProvider
                .when('/models', {
                    templateUrl: 'app/views/main.html',
                    controller: 'MainCtrl'
                })
                .when('/models/:modelId', {
                    templateUrl: 'app/views/individual.html',
                    controller: 'ProfileCtrl'
                })
                .otherwise({
                    redirectTo: '/models'
                });

            $locationProvider.html5Mode(true);
        }]);

ProfileService.js:

'use strict';

angular
    .module('swoleincApp')
    .factory('Profile', ['$resource', ProfileService]);

function ProfileService($resource) {
    return $resource('app/storage/individual/:modelId.json', {}, {
        query: {
            method: 'GET', 
            params: {
                modelId: 'individual'
            }, 
            isArray: true
        }
    });
}

ProfileCtrl.js:

'use strict';

angular
    .module('swoleincApp')
    .controller('ProfileCtrl', ['$scope', ProfileCtrl]);

function ProfileCtrl($scope) {
    $scope.profile = Profile.query();
}

When I load the models/:modelId page, the page loads respective to the modelId that was clicked but the angular doesn't compile or whatever, I just get brackets with strings in them.

I also get this error (note I am using Laravel with Homestead and VirtualBox):

ReferenceError: Profile is not defined
    at new ProfileCtrl (http://laravel.app/app/js/controllers/ProfileCtrl.js:8:19)
    at e (http://laravel.app/app/js/dependencies/angular.min.js:39:193)
    at Object.instantiate (http://laravel.app/app/js/dependencies/angular.min.js:39:310)
    at http://laravel.app/app/js/dependencies/angular.min.js:80:313
    at A.link (http://laravel.app/app/js/dependencies/angular-route.min.js:7:268)
    at aa (http://laravel.app/app/js/dependencies/angular.min.js:73:90)
    at K (http://laravel.app/app/js/dependencies/angular.min.js:62:39)
    at g (http://laravel.app/app/js/dependencies/angular.min.js:54:410)
    at http://laravel.app/app/js/dependencies/angular.min.js:53:480
    at http://laravel.app/app/js/dependencies/angular.min.js:55:397 <div ng-view="" class="view-frame ng-scope" data-ng-animate="1">(anonymous function) @ angular.min.js:107
http://laravel.app/models/dom Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

Seems like in your controller

function ProfileCtrl($scope) {
    $scope.profile = Profile.query();
}

you didn't inject Profile factory.