在AngularJS中使用API​​ CRUD

时间:2015-10-14 09:50:52

标签: javascript angularjs

我在网址http://polls.apiblueprint.org/questions上有一个API,我必须使用它在angularjs中创建一个CRUD(创建读取更新删除)应用程序。网址应根据正在执行的操作而改变。我只是申请通过GET方法从API中检索所有问题。其他方法,即POST,PUT和DELETE不起作用。我尝试了一切都没有成功。我甚至尝试通过类似的例子来解决它而没有成功。愿有人帮助我走出这个洞。希尔是我的代码。

显示所有问题的主要HTML:

> <h2>List of all questions</h2>

<input type="button" class="btn btn-info" value="Create a question" style="float: right" ng-click="newQuestion()">
<table class="table table-striped" width="100%">
    <tr style="font-weight: bold">
        <td>Questions</td>
        <td>Options</td>
    </tr>
    <tr ng-repeat="questions in questionslist">
        <td style="margin-top: 2%; margin-bottom: 2%"><a href="#/questions/:question_id">{{questions.question}}</a></td>
        <td><input type="button" value="View" ng-click="view(questions.question_id)" class="btn btn-primary">
            <!--<input type="button" value="Delete" ng-click="erase(questionslist)" class="btn btn-danger">-->
            <input type="button" value="Löschen" ng-click="erase(questions.question_id)" class="btn btn-danger">
        </td>
    </tr>
</table>
<div>
</div>

调用所有问题的服务

'use strict';
var app = angular.module('formentationApp');
app.factory('questionsservices', function($resource){
  return $resource ('http://polls.apiblueprint.org/questions', {},{
    query:{
      method:'GET',
      isArray:true
    },
    save:{
      method:'POST'
    }
  });
});

定义所有问题调用的控制器

'use strict';
var app = angular.module('formentationApp');
    app.controller('questionController', function($scope, questionsservices, $location, questionseditservice, $routeParams){


    // Calling the list of questions
        $scope.questionslist = questionsservices.query();
        console.log('Calling all questions with success');
});

直到现在一切正常。现在这些方法不起作用。

帖子方法控制器

'use strict';
var app = angular.module('formentationApp');
app.controller('newController', function($scope, questionsservices, $location, questionseditservice, $routeParams){

    //Defining the post method, to add a new question

    $scope.add = function(){
            questionsservices.save($scope.question);
        $location.path('/questions');
        questionsservices.query();

    };
//Cancelling a process of addition

    $scope.abbrechen = function(){
        $location.path('/questions');
    };


});

POST方法HTML

<h2>Frage erstellen</h2>

<div style="margin-top: 4%">
    <table>
        <tr  style="margin-top: 2%">
            <td><label for="question">Frage : </label> <input ng-model="questions.question" id ="question" type="text" style="height: 30px; width:400px"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr>
                        <td><label for="1a">Wahl 1 :</label> <input ng-model="questions.choices.choice1" id="1a" type="text"></td>
                        <td><label for="1b">&nbsp;&nbsp;Stimme 1 :</label> <input ng-model="questions.choices.vote1" id="1b" type="text"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td><label for="2a">Wahl 2 : </label> <input ng-model="questions.choices.choice2" id="2a" type="text"></td>
                        <td><label for="2b">&nbsp;&nbsp;Stimme 2 :</label> <input ng-model="questions.choices.vote2" id="2b" type="text"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td><label for="3a">Wahl 3 :</label> <input ng-model="questions.choices.choice3" id="3a" type="text"></td>
                        <td><label for="3b">&nbsp;&nbsp;Stimme 3 :</label> <input ng-model="questions.choices.vote3" id ="3b" type="text"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td><label for="4a">Wahl 4 : </label> <input ng-model="questions.choices.choice4" id="4a" type="text"></td>
                        <td><label for="4b">&nbsp;&nbsp;Stimme 4 : </label> <input ng-model="questions.choices.vote4" id="4b" type="text"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td><label for="5a">Wahl 5 :  </label> <input ng-model="questions.choices.choice5" id="5a" type="text"></td>
                        <td><label for="5b">&nbsp;&nbsp;Stimme 5 :  </label> <input ng-model="questions.choices.vote5" id="5b" type="text"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td><label for="6a">Wahl 6 : </label> <input  ng-model="questions.choices.choice6" id="6a" type="text"></td>
                        <td><label for="6b">&nbsp;&nbsp;Stimme 6 : </label> <input ng-model="questions.choices.vote6" id="6b" type="text"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <div style="margin-top: 4%">
        <input type="button" class="btn btn-info" ng-click="add()" value="Add Question">
        <input type="button" class="btn btn-default" ng-click="abbrechen()" value="Cancel">
    </div>

</div>

DELETE和UPDATE方法服务

'use strict';
var app = angular.module('formentationApp');
app.factory('questionseditservice', function($resource){
    //return $resource('http://polls.apiblueprint.org/questions/id',{},
    return $resource('http://polls.apiblueprint.org/questions/:question_id',{},

        {
            show : { method: 'GET'},
            update: { method: 'PUT', params: {question_id: '@question_id'} },
            remove: { method: 'DELETE', params: {question_id: '@question_id'}}
        })
});

删除方法控制器

'use strict';
var app = angular.module('formentationApp');
    app.controller('questionController', function($scope, questionsservices, $location, questionseditservice, $routeParams){

$scope.erase = function(questionid){
             questionseditservice.delete({question_id:questionid});

 questionsservices.query();
});

UPDATE方法控制器

'use strict';
var app = angular.module('formentationApp');
    app.controller('questionController', function($scope, questionsservices,  $scope.view = function(questionid){
            console.log('Viewing a question`s details');
             $location.path('/questions/' + questionid);
           var variable =  $scope.questions;

        }; questionsservices.query();

 $scope.newQuestion = function(){
            $location.path('/questions-creation');
             };
});

很抱歉,代码可能不清楚,但我真的需要帮助。我是angularjs的新手。提前致谢

0 个答案:

没有答案