Construindo um provedor em AngularJS para a biblioteca hello.js

Tenho me divertido bastante com o hello.js, um SDK JavaScript client-side tipo A, para autenticação com web services OAuth2. É bem simples de usar e tem uma documentação muito bem explicada.

Eu quero usá-lo em projetos AngularJS. Ok, eu posso incluir a biblioteca e usar a variável global “hello”, mas isso não é legal. Quero criar um módulo reutilizável e disponível com o Bower. Vamos começar.

Imagine uma simples aplicação AngularJS

(function () {
    angular.module('G', [])
        .config(function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/");
            $stateProvider
                .state('login', {
                    url: "/",
                    templateUrl: "partials/home.html",
                    controller: "LoginController"
                })
                .state('home', {
                    url: "/login",
                    template: "partials/home.html"
                });
        })
 
        .controller('LoginController', function ($scope) {
            $scope.login = function () {
            };
        })
})();

Agora, podemos incluir referências em nosso arquivo bower.json

"dependencies": {
    "hello": "~1.4.1",
    "ng-hello": "*"
  }

e então anexar essas referências a nosso index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>G</title>
 
    <script type="text/javascript" src="assets/hello/dist/hello.all.js"></script>
    <script type="text/javascript" src="assets/ng-hello/dist/ng-hello.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="G">
<div ui-view></div>
 
</body>
</html>

Nosso ng-hello é apenas um provedor de serviços que faz um wrap no hello.js

(function (hello) {
    angular.module('ngHello', [])
        .provider('hello', function () {
            this.$get = function () {
                return hello;
            };
 
            this.init = function (services, options) {
                hello.init(services, options);
            };
        });
})(hello);

Isso significa que configuramos o serviço no callback config, e no callback run podemos setar os eventos.

(function () {
    angular.module('G', ['ngHello'])
        .config(function ($stateProvider, $urlRouterProvider, helloProvider) {
            helloProvider.init({
                twitter: 'myTwitterToken'
            });
 
            $urlRouterProvider.otherwise("/");
            $stateProvider
                .state('login', {
                    url: "/",
                    templateUrl: "partials/home.html",
                    controller: "LoginController"
                })
                .state('home', {
                    url: "/login",
                    template: "partials/home.html"
                });
        })
 
        .run(function ($ionicPlatform, $log, hello) {
            hello.on("auth.login", function (r) {
                $log.log(r.authResponse);
            });
        });
})();

Finalmente, podemos performar um login no twitter em nosso controller

(function () {
    angular.module('G')
        .controller('LoginController', function ($scope, hello) {
            $scope.login = function () {
                hello('twitter').login();
            };
        })
    ;
})();

E é isso. Você pode ver a biblioteca completa no meu GitHub.

***

Gonzalo Ayuso faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://gonzalo123.com/2015/03/02/building-a-angularjs-provider-for-hello-js-library/

De 0 a 10, o quanto você recomendaria este artigo para um amigo?