Как я могу создать фальшивый интерфейс в AngularJS?

Ответ 1

Вы можете использовать angular mocks для создания макетного кода.

Рабочая демонстрация plnkr.

В основном вы включаете angular -mocks после angular и используете код этот метод и вы сможете контролировать как запросы, так и ответы, включая заголовки и задержки поддельного ответа и т.д.

Пример:

    //When backend receives a request to the views folder, pass it through
    $httpBackend.whenGET( RegExp( regEsc( Config.view_dir ) ) ).passThrough(); 

    //Message should return a list og messages
    $httpBackend.whenGET(APIBase + 'messages').respond(function(method, url, data, headers) {
        return [200, messages.data, {/*headers*/}];
    });

    $httpBackend.whenPOST(APIBase + 'messages').respond(function(method, url, data, headers) {
        var message = angular.fromJson(data);

        messages.data.push(message);
        //You should consider having the back-end being responsible for creating new id tho!
        messages.index[message.id] = message; 

        return [200, message, {/*headers*/}];
    });

    //Message/id should return a message
    $httpBackend.whenGET( RegExp(regEsc(APIBase + 'messages') + '\d+$') ).respond(function(method, url, data, headers) {
        var id = url.match(/\d+$/)[0];
        return [200, messages.index[id] || null, {/*headers*/}];
    });

`` `

Вы также можете настроить URL-адреса, которые также должны передавать корыто на реальный сервер (проверьте passThrough())

Ответ 2

То, что я делаю в эти дни, - это apiary.io, бесплатно. Вы можете написать конечные точки API в качестве чертежа и просто запросить их так же, как запросить сервер REST. Вы также можете написать любой ответ, который хотите подавать. Полезно, когда сервер REST не готов, но ваш Front End.

Ответ 3

Вы можете использовать $httpBackend

Вот пример сайта AngularJS:

phones = [{name: 'phone1'}, {name: 'phone2'}];


// returns the current list of phones
$httpBackend.whenGET('/phones').respond(phones);

Ответ 4

Чтобы добавить к этим ответам: посмотрите https://github.com/mdasberg/ng-apimock

и https://www.npmjs.com/package/open-api-test-generator

ng-apimock - это переключатель сценариев для транспортира и разработки, а open-api-test-generator может генерировать mocks для этого инструмента. Довольно удобный материал, когда вы узнаете модули

Ответ 5

Для альтернативного более автоматизированного способа бэкэнда, насмехающегося, посмотрите swagger-api-mock, который отлично сочетается с rest-json. Эти модули вместе могут быть использованы для генерации ответов $httpBackend: rest-json.js как http-подобный доступ к данным json и swagger-api-mock/lib/mock-data.js в качестве генератора для json mock data objects на основе swagger (или json schema)

Ответ 6

Я ответил на этот вопрос Mock backend для приложения Angular/Gulp, который задает почти одинаковый вопрос. Проверьте это, он также позволяет легко реагировать задержки