O que são serviços e por que eles são importantes?

Até agora, todos os valores exibidos na view foram adicionados por nós, mas eles são estáticos. Não mudam em tempo real.

Mas e se tivéssemos dados que se atualizam em tempo real, como bolsa de valores ou algo do tipo? Nossos exemplos não funcionariam mais para exibí-los.

A melhor solução é ler dados dinâmicos de um servidor. Vamos fazer isso criando um serviço no AngularJS.

Para adicionar um serviço, criamos uma pasta chamada services em js/. Lá, abra um documento vazio chamado forecast.js. Dentro desse arquivo, escrevemos o código abaixo. Usamos app.factory para criar o serviço forecast. O serviço precisa usar o recurso $http do AngularJS para buscar um arquivo JSON do servidor. Portanto, adicionamos $http como dependente de forecast, assim:

    app.factory('forecast', ['$http', function($http) { 
        return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json') 
            .success(function(data) { 
                return data; 
            }) 
            .error(function(err) { 
                return err; 
            }); 
    }]);

Agora, $http está disponível para uso dentro do nosso serviço forecast. Depois, criamos um http get dentro do nosso serviço para pedir as informações que queremos do servidor externo. Se conseguir, ele retorna esses dados. Senão, retorna um erro.

Após criar o serviço, temos que declará-lo no controlador js/controllers/nome_do_controlador.js usando o seguinte código:

    app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
        forecast.success(function(data) { 
        $scope.fiveDay = data; 
        });
    }]);

Desta forma, nosso serviço pode agora usar as informações pedidas ao servidor externo. Os dados vindos do servidor são guardados em $scope.fiveDay. A partir de agora, qualquer propriedade anexada a $scope poderá ser usada em view, o que significa que podemos mostrar os dados de um servidor externo através do nosso index.html:

    <div class="forecast" ng-repeat="day in fiveDay.days">
        <div class="day row">
            <!-- datetime -->
            <div class="weekday col-xs-4">
                <p>{{ day.datetime | date }}</p>
            </div>

            <!-- icon -->
            <div class="weather col-xs-3">
                <img ng-src="{{ day.icon }}">
                <p>{{ day.icon }}</p>
            </div>

            <div class="col-xs-1"></div>

            <!-- high -->
            <div class="high col-xs-2">
                <p>{{ day.high }}</p>
            </div>

            <!-- low -->
            <div class="low col-xs-2">
                <p>{{ day.low }}</p>
            </div>

        </div>
    </div>

Pronto! Agora as quatro propriedades (dateTime, icon, high e low) contidas em fiveDays.days estão sendo exibidas na view. Note que para exibir imagens, usamos a diretiva ng-src. Para mostrar cada propriedade, usamos {{ day.propriedade }}.

Nesta aula, vimos que os serviços são importantes porque assim não precisamos encher o código com requisição de dados de um servidor. É bem melhor mover este procedimento para um serviço, para que ele possa ser utilizado por outras partes do código futuramente.