Skip to content

Instantly share code, notes, and snippets.

@tancnle

tancnle/index.html

Created October 14, 2014 10:35
Show Gist options
  • Save tancnle/ff0cce73f8265f9c3dd2 to your computer and use it in GitHub Desktop.
Save tancnle/ff0cce73f8265f9c3dd2 to your computer and use it in GitHub Desktop.
Download ZIP
Angular controller calling multiple services (http://jsbin.com/zuvuwabolovu/7)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='testScope'>
<div ng-controller='BankController'>
<div transaction>
</div>
</div>
<script id="jsbin-javascript">
var app = angular.module('testScope', []);
app.controller('BankController', ['$scope', '$q', 'AccountService', 'UserService', function ($scope, $q, AccountService, UserService) {
var ctrl = this;
$q.all({
account: AccountService.load(),
user: UserService.load()
}).then(function (data) {
ctrl.updateUserAndAccount(data.account, data.user);
});
ctrl.updateUserAndAccount = function (account, user) {
$scope.account = account;
$scope.user = user;
};
}]);
app.service('AccountService', ['$q', '$timeout', function ($q, $timeout) {
var account;
return {
load: function() {
var deferred = $q.defer();
if (account) {
deferred.resolve(account);
} else {
$timeout(function () {
account = 1000000;
deferred.resolve(account);
}, 2000);
}
return deferred.promise;
}
};
}]);
app.service('UserService', ['$q', '$timeout', function ($q, $timeout) {
var user;
return {
load: function() {
var deferred = $q.defer();
if (user) {
deferred.resolve(user);
} else {
$timeout(function () {
user = 'Wil.i.am';
deferred.resolve(user);
}, 2000);
}
return deferred.promise;
}
};
}]);
app.directive('transaction', function () {
return {
restrict: 'A',
template: "<div>User: {{user}}</div><div>Account: {{account}}</div>"
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='testScope'>
<div ng-controller='BankController'>
<div transaction>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('testScope', []);
app.controller('BankController', ['$scope', '$q', 'AccountService', 'UserService', function ($scope, $q, AccountService, UserService) {
var ctrl = this;
$q.all({
account: AccountService.load(),
user: UserService.load()
}).then(function (data) {
ctrl.updateUserAndAccount(data.account, data.user);
});
ctrl.updateUserAndAccount = function (account, user) {
$scope.account = account;
$scope.user = user;
};
}]);
app.service('AccountService', ['$q', '$timeout', function ($q, $timeout) {
var account;
return {
load: function() {
var deferred = $q.defer();
if (account) {
deferred.resolve(account);
} else {
$timeout(function () {
account = 1000000;
deferred.resolve(account);
}, 2000);
}
return deferred.promise;
}
};
}]);
app.service('UserService', ['$q', '$timeout', function ($q, $timeout) {
var user;
return {
load: function() {
var deferred = $q.defer();
if (user) {
deferred.resolve(user);
} else {
$timeout(function () {
user = 'Wil.i.am';
deferred.resolve(user);
}, 2000);
}
return deferred.promise;
}
};
}]);
app.directive('transaction', function () {
return {
restrict: 'A',
template: "<div>User: {{user}}</div><div>Account: {{account}}</div>"
};
});</script></body>
</html>
Raw
jsbin.zuvuwabolovu.js
var app = angular.module('testScope', []);
app.controller('BankController', ['$scope', '$q', 'AccountService', 'UserService', function ($scope, $q, AccountService, UserService) {
var ctrl = this;
$q.all({
account: AccountService.load(),
user: UserService.load()
}).then(function (data) {
ctrl.updateUserAndAccount(data.account, data.user);
});
ctrl.updateUserAndAccount = function (account, user) {
$scope.account = account;
$scope.user = user;
};
}]);
app.service('AccountService', ['$q', '$timeout', function ($q, $timeout) {
var account;
return {
load: function() {
var deferred = $q.defer();
if (account) {
deferred.resolve(account);
} else {
$timeout(function () {
account = 1000000;
deferred.resolve(account);
}, 2000);
}
return deferred.promise;
}
};
}]);
app.service('UserService', ['$q', '$timeout', function ($q, $timeout) {
var user;
return {
load: function() {
var deferred = $q.defer();
if (user) {
deferred.resolve(user);
} else {
$timeout(function () {
user = 'Wil.i.am';
deferred.resolve(user);
}, 2000);
}
return deferred.promise;
}
};
}]);
app.directive('transaction', function () {
return {
restrict: 'A',
template: "<div>User: {{user}}</div><div>Account: {{account}}</div>"
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment