Статьи

Использование Breeze JS для использования OData веб-API ASP.NET в приложении Angular JS

Июль 24, 2018

В прошлом посте  мы увидели, как  Breeze JS   облегчает работу с сервисами OData. Будет очень интересно использовать эту великолепную библиотеку с нашей любимой средой SPA,  Angular JS  . В этом посте мы увидим, как соединить эти две библиотеки для создания приложений, насыщенных данными. 

Как говорилось в предыдущем посте, Breeze требовал data.js для понимания соглашений OData. Все функции, выполняющие операции CRUD в Breeze, возвращают    обещание Q. Любые изменения, внесенные в свойства $ scope внутри метода Q, не отслеживаются Angular автоматически, так как Q является неугловым компонентом. Чтобы сделать изменения видимыми, нам нужно явно вызвать $ scope. $ Apply (). Чтобы избежать этой трудности, команда Breeze создала расширение для преобразования  Q  до  $ q  . Название расширения  до $ q  , его можно найти на  GitHub  . 

Ниже приведен список сценариев, которые должны быть включены на страницу: 

<script src="scripts/q.js"></script>
<script src="scripts/datajs-1.1.1.js"></script>
<script src="scripts/breeze.debug.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/to$q.js"></script>

Нам больше не нужен  jQuery   , поскольку Breeze обнаруживает присутствие Angular и настраивает свой адаптер AJAX для использования  $ http  . ( Проверьте примечания к выпуску Breeze 1.4.4  ) 

Так как Angular и Breeze являются библиотеками JavaScript, их можно легко использовать вместе. Но мы не можем наслаждаться использованием, если мы не будем следовать архитектурным ограничениям Angular JS. В тот момент, когда мы включаем Breeze.js в HTML-страницу, объект JS «breeze» становится доступен в глобальной области видимости. Его можно использовать непосредственно в любом из компонентов JavaScript, контроллеры и сервисы Angular не являются исключением. Лучший способ использовать объект в любом угловом компоненте — это  внедрение зависимостей . Любой глобальный объект может быть введен путем создания значения. 

var app=angular.module(‘myApp’, []);
app.value(‘breeze’, breeze);
app.service(‘breezeDataSvc’, function(breeze){
 //logic in the service
});

Это делает сервис более тестируемым, так как входные объекты могут быть легко подделаны в модульных тестах. Поскольку Breeze требует некоторой начальной настройки, лучше обернуть все операции Breeze в единый сервис. Breeze должен быть настроен для работы со службой OData и использовать AJAX API от Angular вместо jQuery. Это делается следующим утверждением: 

breeze.config.initializeAdapterInstances({ dataService: "OData" });

Теперь все, что нам нужно сделать, это создать экземпляр EntityManager и начать запросы. Ниже приводится полная реализация службы, включая функцию, которая выполняет базовый запрос OData: 

app.service('breezeDataSvc', function (breeze, $q) {
    breeze.config.initializeAdapterInstances({ dataService: "OData" });
            
    var manager = new breeze.EntityManager("/odata/");
    var entityQuery = new breeze.EntityQuery();
            
    this.basicCustomerQuery = function () {
        return manager.executeQuery(entityQuery.from("Customers").where("FirstName", "contains", "M")).to$q();
    };
});

Ниже приведен простой контроллер, который использует вышеуказанную службу и устанавливает полученные результаты для свойства в области видимости: 

app.controller('SampleCtrl', function ($scope, breezeDataSvc) {
    function initialize() {
        breezeDataSvc.basicCustomerQuery().then(function (data) {
            $scope.customers = data.results;
        }, function (err) {
            alert(err.message);
        });
    };

    initialize();
});

Запустите эту страницу в браузере и посмотрите поведение. 

Удачного кодирования!

37
Share: