Если вы только начинаете знакомиться с разработкой AngularJS, вы в конечном итоге достигнете точки, когда вы не сможете больше узнать без данных, которыми нужно манипулировать. Вы, наверное, осознали, что пытаться изучить Angular, а также учиться писать API и базу данных, может быть настоящей головной болью. Итак, как получить рабочие данные, не отвлекаясь от изучения Angular?

Рассмотрим простой пример: у вашего приложения есть пользователи, и вы хотите отобразить их имя и, возможно, дополнительную информацию о них. У вас нет базы данных или API, но вы все равно хотите конкретизировать бизнес-логику. С помощью Angular Services и данных JSON мы можем полностью сделать это возможным. Начнем с данных JSON.

Ваши данные JSON

Существует множество способов внедрить данные в ваши сервисы Angular - одни с открытым исходным кодом, а другие не очень. Для простоты в этом руководстве будут использоваться статические файлы JSON. Вот пример имитации пользовательских данных, которые вы, возможно, захотите включить в свое приложение:

[
    {
        “name”: “Andrew Owen”,
        “age” : “26”,
        “eyeColor” : “blue”
    },
    {
        “name”: “Susan Que”,
        “age” : “45”,
        “eyeColor”: “hazel”
    },
    {
        “name”: “John Doe”,
        “age” : “45”,
        “eyeColor”: “brown”
    }
]

Просто и мило - массив из трех пользователей, готовых к добавлению в наше приложение. Но как этого добиться?

Пользовательские сервисы Angular и $ HTTP

Чтобы получить наши данные в нашем приложении, нам нужно подключить их к Angular Service. Angular Services помогают нашему приложению, отделяя логику на стороне сервера от нашей бизнес-логики. В нашем случае мы будем использовать его для обработки запросов API, чтобы получить наши фиктивные данные. Это гарантирует, что мы сможем повторно использовать эти запросы, не допуская при этом этого кода к нашему контроллеру. Наш сервис, представляющий собой обычный файл javascript, выглядит так:

(function() {
    
    var app = angular.module(‘modusDemo’);
    app.service(‘userService’, function($http) {
        this.getUsers =function() {
            return $http.get(‘userData.json’);
        }
    })
})();

Как видите, app.service принимает два параметра: имя, чтобы мы могли ссылаться на него в нашем контроллере, и функцию, содержащую код, выполняемый нашей службой. Отсюда вы можете объявить любое количество функций, к которым ваш сервис должен иметь доступ. Вы даже можете включить в свою службу другие службы, чтобы вы могли использовать службы внутри своей службы (потому что, собачка, я слышал, что вам нравятся службы). Одна из этих служб - это та, которую мы используем в приведенном выше коде: `$ http`.

`$ http` - это основная служба angular, то есть она поставляется с Angular прямо из коробки; нет необходимости заранее определять, что он делает. Согласно собственной документации AngularJS, `$ http` облегчает связь с удаленными HTTP-серверами через объект XMLHttpRequest. Короче говоря, если вы передадите `$ http` URL-адрес или локальный файл с правильным методом ответа (в нашем случае` GET`), он вернет данные из этого места.

Связывание с вашим контроллером и HTML

Теперь, когда у нас есть сервис, нам нужно его использовать. Как упоминалось ранее, наш сервис теперь можно использовать в нашем проекте, и мы можем включить его в наш файл контроллера. Точно так же, как мы включили `$ http` в нашу службу, мы можем включить нашу службу в наш контроллер, передав его в качестве аргумента. Взгляните на настройку контроллера ниже:

(function() {
    var app = angular.module(‘modusDemo’);
    app.controller(‘todoCtrl’, function(userService) {
        
        var vm = this;
        userService.getUsers().then(function(res){
            console.log(res.data);
            vm.userData = res.data;
        });
    });
})();

С подключенным в качестве аргумента `userService` мы теперь можем использовать его методы непосредственно в нашем контроллере. После вызова службы она вернет данные, в данном случае наш файл JSON, и сохранит их в vm.userData. После этого достаточно просто включить контроллер в представление HTML и использовать vm.userData для отображения наших данных через ng-repeat. Этот код выглядит так:

<body ng-app=”modusDemo” ng-controller=”todoCtrl as user”>
    <h1>Users</h1>
    <div ng-repeat=”users in user.userData”>
        {{users.name}} 
    </div>
</body>

И вот оно; используя существующие базовые функции Angular, мы реализовали одну из основных служб Angular, создали нашу собственную службу, вызвали эту службу в нашем контроллере, а затем внедрили данные в наш HTML; и при этом никогда не беспокоиться о написании API или хранении нашей информации в базе данных. В Angular есть множество замечательных сервисов, и использование кастомных сервисов для имитации данных - это лишь малая часть того, что они действительно могут делать. Существует множество отличных ресурсов, которые помогут вам начать работу, если вы захотите расширить то, что здесь показано. Какие услуги вам нравятся больше всего? Как сервисы помогли вашим угловым проектам? Дайте мне знать, ответив ниже или напишите мне в Twitter!