Question

我在尝试按用户ID加载用户时遇到了困难，因为某些原因我的http.get调用没有按下我的控制器。

我在浏览器控制台中收到以下错误：

TypeError: undefined is not a function
    at new <anonymous> (http://localhost:9000/scripts/controllers/users.js:10:8)

更新我按照下面的评论修改了我的代码，但现在我的代码只是在角度用户控制器中进入无限循环（参见下面的代码），我没有得到上面的错误。

我使用Angular Express Generator作为参考

后端 - nodejs，express，mongo

routes.js：

// not sure if this is required, but have used it before?
app.param('username', users.show);

app.route('/api/users/:username')
    .get(users.show);

controller.js：

// This never gets hit
exports.show = function (req, res, next, username) {
    User.findOne({
        username: username
    })
    .exec(function (err, user) {
        req.user = user;
        res.json(req.user || null);
    });
};

前端 - 角度

app.js：

$routeProvider
    .when('/users/:username', {
        templateUrl: function( params ){ return 'users/view/' + params.username; },
        controller: 'UsersCtrl'
    })

服务/ user.js的：

angular.module('app')
    .factory('User', function ($resource) {

        return $resource('/api/users/:username', {
            username: '@username'
        }, {
            update: {
                method: 'PUT',
                params: {}
            },
            get: {
                method: 'GET',
                params: {
                    username:'username'
                }
            }
        });
});

控制器/ users.js：

angular.module('app')
.controller('UsersCtrl', ['$scope', '$http', '$routeParams', '$route', 'User', function ($scope, $http, $routeParams, $route, User) {

        // this returns the error above
        $http.get( '/api/users/' + $routeParams.username )
            .success(function( user ) {
                $scope.user = user;
            })
            .error(function( err) {
                console.log( err );
            });
}]);

如果有帮助，我使用this setup

Answer 1

angular.module('app')
.controller('UsersCtrl', ['User', '$scope', '$route', '$routeParams', function ($scope,    $http, User, $route, $routeParams) {

您忘记在users.js文件中添加$ http

尝试这个

angular.module('app')
.controller('UsersCtrl', ['User', '$scope', '$http','$route', '$routeParams', function ($scope, $http, User, $route, $routeParams) {

Answer 2

首先，我们需要清理内联数组表示法（读取 - https://docs.angularjs.org/guide/di）。

基于此代码

angular.module('app')
.controller('UsersCtrl', ['User', '$scope', '$route', '$routeParams', function ($scope, $http, User, $route, $routeParams) {

        // this returns the error above
        $http.get( '/api/users/' + $route.username ).success(function( user ) {
            $scope.user = user;
        });
}]);

您的$ scope变量实际上是一些 User 服务，您的$ http实际上是您的 $ scope ，User实际上是 $ route ，$如果你没有使用编译器，route是 $ routeParams ，而$ routeParams实际上是 $ routeParams 。将此更改为以下内容并告诉我你得到了什么：

angular.module('app')
.controller('UsersCtrl', ['$scope', '$http', 'User', '$route', '$routeParams', function ($scope, $http, User, $route, $routeParams) {

        // this returns the error above
        $http.get( '/api/users/' + $route.username ).success(function( user ) {
            $scope.user = user;
        });
}]);

加载由MEAN堆栈中的URL参数（例如，/ users /：id）路由的视图

2 个答案: