如何結合angularjs和MongoDB

Question

我在AngularJs和MongoDB世界初學者當編輯的數據（我今天開始學習！）

其實我想要做一些非常基本的：顯示的列表用每個記錄的添加按鈕和編輯鏈接進行錄製。

我使用這個庫https://github.com/pkozlowski-opensource/angularjs-mongolab連接到mongoweb。

其實我的數據顯示，當我嘗試添加一個記錄的作品，但問題是，當我嘗試顯示編輯表單！

這裏是我的index.html文件，其中我用形式來顯示數據添加一條記錄，並與編輯聯繫：

<div ng-controller="AppCtrl"> 
    <ul> 
     <li ng-repeat="team in teams"> 
      {{team.name}} 
      {{team.description}} 
      <a href="edit.html?id={{team._id.$oid}}">edit</a> 
     </li> 
    </ul> 

    <form ng-submit="addTeam()"> 
     <input type="text" ng-model="team.name" size="30" placeholder="add new team here"> 
     <input type="text" ng-model="team.description" size="30" placeholder="add new team here"> 
     <input class="btn-primary" type="submit" value="add"> 
     </form> 
</div> 

這裏是我的edit.html代碼，其顯示編輯表單：

<div ng-controller="EditCtrl"> 

    <form ng-submit="editTeam()"> 
     <input type="text" name="name" ng-model="team.name" size="30" placeholder="edit team here"> 
     <input type="text" name="description" ng-model="team.description" size="30" placeholder="edit team here"> 
     <input class="btn-primary" type="submit" value="validate edit"> 
     </form> 
</div> 

最後我的js代碼：

var app = angular.module('app', ['mongolabResource']); 

app.constant('API_KEY', '____________________________'); 
app.constant('DB_NAME', 'groups'); 

app.factory('Teams', function ($mongolabResource) { 
    return $mongolabResource('teams'); 
}); 

app.controller('AppCtrl', function ($scope, Teams) { 
    $scope.teams = Teams.query(); 
    $scope.addTeam = function() { 
     varteam = { 
      name: $scope.team.name, 
      description: $scope.team.description 
     }; 
     $scope.teams.push(varteam); 
     Teams.save($scope.team); 
     $scope.team.name = ''; 
     $scope.team.description = ''; 
    }; 

}); 

app.controller('EditCtrl', function ($scope, Teams) { 
    //???????? 
}); 

我AppCtrl工作perfecty，它DISP奠定了數據完美添加記錄。

現在我想添加編輯的JS代碼，但我甚至不知道表單從哪裏開始？我如何獲得URL中的ID參數？我如何告訴視圖從數據庫的值中填寫表單域？最後，我如何更新數據庫。

我知道我問了很多問題，但我真的迷路了！謝謝

Answer 1

當然有許多可能的解決方案。

一個解決方案是使用angularjs路由。有關教程，請參閱http://docs.angularjs.org/tutorial/step_07。

基本的東西，如更換您的UL名單：

<ul> 
    <li ng-repeat="team in teams"> 
     {{team.name}} 
     {{team.description}} 
     <a href="#teams/{{team._id.$oid}}">edit</a> 
    </li> 
</ul> 

然後你就可以創建responde到您的網址路徑：

yourApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/teams', { 
     templateUrl: 'partials/team-list.html', 
     controller: 'TeamListCtrl' 
     }). 
     when('/teams/:teamId', { 
     templateUrl: 'partials/team-detail.html', 
     controller: 'TeamDetailCtrl' 
     }). 
     otherwise({ 
     redirectTo: '/teams' 
     }); 
    }]); 

在從細節控制這種方式（將取代你的EditCtrl）你可以通過以下方式訪問ID參數：$routeParams.teamId

無論如何，我建議你好好學習所有的教程，以獲得更好的概述。