Skip to content

Instantly share code, notes, and snippets.

@MacKentoch

MacKentoch/Angular JS : provider - factory -config - good writing as object.html

Last active August 29, 2015 14:24
Show Gist options
  • Save MacKentoch/de44b0973100be66f75a to your computer and use it in GitHub Desktop.
Save MacKentoch/de44b0973100be66f75a to your computer and use it in GitHub Desktop.
Download ZIP
Angular JS : good way to write angular + provider + factory + config app
Raw
Angular JS : provider - factory -config - good writing as object.html
<!DOCTYPE html>
<html><head>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}</style>
<title>AngularJS Services</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js" type="text/javascript"></script>
<style type="text/css">
.container-custom{
margin-right: 2%;
margin-left: 2%;
padding-left: 15px;
padding-right: 15px;
}
code{
line-height: 1.1;
}
</style>
</head>
<body>
<div class="container-custom ng-scope" ng-app="myApp">
<h1>Good way (not the best but already nice) to write angular code (more object)</h1>
<hr>
<section class="ng-scope" id="left">
<div class="row">
<!-- from service / add-->
<div class="col-md-12" ng-controller="aController as vm">
<div class="panel panel-primary">
<div class="panel-heading">
<h3></h3>
</div>
<div class="panel-body">
<div>
<p>aProvidedSampleData</p>
<pre>{{vm.aProvidedSampleData | json}}</pre>
<hr/>
<p>aProvidedPrivateSampleData</p>
<pre>{{vm.privateSampleData}}</pre>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
;(function(){
'use strict';
/* ================================================================
*
* Application module
*
================================================================*/
angular.module('myApp', []);
/* ================================================================
*
* Provider module
*
================================================================*/
angular.module('myApp').provider('exampleConfigManager', [function(){
/////////////////////////////////////////////
// config injectable : before app run
// -----------------------------------------
//
// inject exampleConfigManagerProvider
// (note Provider added in name by convention)
/////////////////////////////////////////////
//public property
this.sampleData = [
'one',
'two',
'three',
];
//private property
var _privateSampleData = [
'a-a',
'b-b',
'c-c'
];
//methods
this.setSampleData = function(providedSampleDataConfig){
this.sampleData = [].concat(providedSampleDataConfig);
};
this.setPrivateSampleData = function(providedPrivateSampleData){
_privateSampleData = [].concat(providedPrivateSampleData);
};
/////////////////////////////////////////////
// service : after app run
// -----------------------------------------
//
// inject exampleConfigManager
// (note no more 'Provider' concatenated in name)
/////////////////////////////////////////////
this.$get = [function(){
var exampleConfigObject = {};
//--> WARNING : this way writing would expose theses properties since $get will return exampleConfigObject object :
//<code>exampleConfigObject.sampleData = this.sampleData;</code>
//<code>exampleConfigObject.property1 = this.property1;</code>
//-->BETTER : this way won't expose these properties :
var sampleData = this.sampleData;
var privateSampleData = _privateSampleData;
exampleConfigObject.getSampleData = function(){
///// "this" won't be accessible here so can't :
///// return this.sampleData;
///// so use property "sampleData" (= this.sampleData)
return sampleData;
};
exampleConfigObject.getPrivateSampleData = function(){
return privateSampleData;
};
return exampleConfigObject;
}
];
}]);
/* ================================================================
*
* config module (occurs before run
*
*
* — services not available here — only providers — constants
*
================================================================*/
angular.module('myApp').config(['exampleConfigManagerProvider',function(exampleConfigManagerProvider) {
//a public property
exampleConfigManagerProvider.setSampleData(['four','five','six']);
//as public property could do :
//exampleConfigManagerProvider.sampleData = [].concat(['seven','height','nine']);
//a private properties :
exampleConfigManagerProvider.setPrivateSampleData(['I can access ', 'like ', 'that']);
//can't : exampleConfigManagerProvider.privateSampleData = [].concat(['I ','cannot ','access ']);
}]);
/* ================================================================
*
* a controller module — using provider as service (all from $get)
*
================================================================*/
angular.module('myApp').controller('aController', [
'exampleConfigManager',
'aService',
function(exampleConfigManager,
aService){
//controller as syntax (in html, will be for example : <div ng-controller = "aController as vm">...)
//no more $scope!
//prefix public properties and methods with vm (as you would with $scope)
var vm = this;
vm.aProvidedSampleData = exampleConfigManager.getSampleData();
//-> ['four','five','six']
//after config phase, you use a service (resulting from $get) so you can't access :
//vm.aProvidedSampleData = exampleConfigManager.setSampleData('I can't access this method');
vm.privateSampleData = exampleConfigManager.getPrivateSampleData();
//use aService :
console.info('Will service \'aService\' be able to render a service? \nanswer : ' + aService.willYouRenderService());
}]);
/*
*
* service factory
*
*
*/
angular.module('myApp').factory('aService', [function(){
var aServiceObject = {};
aServiceObject.willYouRenderService = function(){
return 'yes';
};
return aServiceObject;
}]);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment