freekrai/article.md

## article.md

      
    Raw
  

              article.md
            
          
    This days I’ve been playing with hello.js. Hello is a A client-side Javascript SDK for authenticating with OAuth2 web services.
It’s pretty straightforward to use and well explained at documentation. I want to use it within AngularJS projects. OK, I can include the library and use the global variable “hello”, but it isn’t cool.
Imagine one simple AngularJS application
(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 () {
            };
        })
})();
Now we can include our references within our bower.json file
"dependencies": {
    "hello": "~1.4.1"
  }
and append those references to our 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 src="js/ng-hello.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="G">
<div ui-view></div>
 
</body>
</html>
Our ng-hello is just a service provider that wraps 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);
That’s means that we configure the service in config callback and in our run callback we can set up events
(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 ($log, hello) {
            hello.on("auth.login", function (r) {
                $log.log(r.authResponse);
            });
        });
})();
And finally we can perform a twitter login within our controller
(function () {
    angular.module('G')
        .controller('LoginController', function ($scope, hello) {
            $scope.login = function () {
                hello('twitter').login();
            };
        })
    ;
})();
And that’s it.

  
## ng-hello.js
/*
Angular wrapper for using 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);
	/*
	Angular wrapper for using 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);