AngularJS SPA 使用 API 和 Mongoose

Posted

技术标签:

【中文标题】AngularJS SPA 使用 API 和 Mongoose【英文标题】:AngularJS SPA using API and Mongoose 【发布时间】:2015-07-03 23:50:21 【问题描述】:

我正在创建一个简单的 AngularJS SPA,使用 API 将数据加载到 Mongoose。

我的应用只是添加、显示和编辑成员列表。当我只是将成员存储在我的工厂服务中的数组中时它可以工作,但现在我想将其更改为通过 API 连接到 Mongoose。

工厂

app.factory('SimpleFactory', ['$http', function($http)

    var factory = ;

    var members =  $http.get('/api/members') 


    factory.getMembers = function () 
    
        return members = $http.get('/api/members');
    

   factory.getMember = function (index) 
        if (index >=0 && index < members.length ) 
           return  members[index] = $http.get('/api/members/' + member_id )
       
       return undefined
    


    factory.addMember = function(member) 
         return $http.post('/api/members',member)
    
    factory.updateMember = function(index,member) 
         $http.put('/api/members/' + member_id, member)
    

    return factory;
])

控制器

app.controller('MembersController', ['$scope','SimpleFactory',
   function ($scope,SimpleFactory) 


    SimpleFactory.getMembers()
    .success(function(members) 
    $scope.members = members;
    );


$scope.addMember = function()

    var member = 
        name: $scope.newMember.name,
        address: $scope.newMember.address,
        age : $scope.newMember.age,
        level : $scope.newMember.level,
        swimmer : $scope.newMember.swimmer,
        email : $scope.newMember.email,
        regdate : $scope.newMember.regdate,
                

      SimpleFactory.addMember(member)
      .success(function(added_member) 
       
         $scope.members.push(added_member);
         $scope.newMember =  
             );


])

但我不确定如何更改我的控制器以更新成员,它的编码如下以从我的出厂设置中的数组中获取成员,我如何对其进行编码以通过 API 从 Mongoose 中获取成员:

app.controller('MemberDetailController', ['$scope', '$location', '$routeParams', 'SimpleFactory',
    function($scope, $location, $routeParams, SimpleFactory) 

        $scope.member = 
            index: $routeParams.member_index,
            detail: SimpleFactory.getMember($routeParams.member_index)
        


        $scope.updateMember = function() 
            SimpleFactory.updateMember($scope.member.index,
                $scope.member.detail)
            $location.path('/members')
        

    
])

谁能帮忙,它不是一个复杂的应用程序,但我只是在学习,我被困在这里!

谢谢

【问题讨论】:

【参考方案1】:

你的$scope.member对象应该在getMember承诺成功后设置。

代码

SimpleFactory.getMember($routeParams.member_index).then(function(data)
    $scope.member =   
      index : $routeParams.member_index, 
      detail : data.user
    ;
);

除此之外,您需要确保getMember 方法在索引为 0 时始终返回一个承诺

   factory.getMember = function (index) 
        var deferred = $q.defer();
        if (index >=0 && index < members.length ) 
           return members[index] = $http.get('/api/members/' + member_id )
       
       deferred.resolve;
    

更新

要调用更新方法,您需要先进行更改服务,这将返回一个承诺

factory.updateMember = function(index,member) 
     return $http.put('/api/members/' + member_id, member)

然后调用 factory.updateMember 解决该承诺,然后执行 $location.path

$scope.updateMember = function() 
    SimpleFactory.updateMember($scope.member.index, $scope.member.detail)
    .then(function(data) 
        $location.path('/members')
    );
;

【讨论】:

感谢 pankajpakar,您认为 updateMember: 应该如何工作? "$scope.updateMember = function() SimpleFactory.updateMember($scope.member.index, $scope.member.detail) $location.path('/members') " @thirty 看看更新的答案,如果对你有帮助,请点赞,谢谢 :) 很高兴为您提供帮助..谢谢 :) 我还有另一个问题 pankajparkar 但还没有人试图回答!如果你有空,可以看看吗! 谢谢你***.com/questions/29876253/…

以上是关于AngularJS SPA 使用 API 和 Mongoose的主要内容,如果未能解决你的问题,请参考以下文章

angularjs和mvc5之间沟通的最佳方式是啥?

Web API系列教材1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)

从 Web Api 向 AngularJs 客户端返回权限

微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决

对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解

使用 AngularJS SPA 的服务器端路由