Defining Module Dependencies
All AngularJS services, directives, and factories defined in controller.js or custom.js are modularized for better code management as specified below.
1. Define a module for each angular directive, factory, or service as shown below.
var module_name = angular.module('MODULE_NAME',[DEPENDENCIES]);
2. Provide a dependency for the module in the gadget. This can be done using Software AG Designer while creating the gadget or later while using the gadget definition editor.
3. Inject the module, services, or factories in the controller (in the $inject code) and use it appropriately.
4. In case of providers:
angular.module('MODULE_NAME',[DEPENDENCIES]).provider('PROVIDER_NAME',
function PROVIDER_FUNCTION(){
this.$get = [<INJECTABLES>,function (<INJECTED_OBJECTS>){
this.instance={};
this.instance.<providerFunction>= new function(){
//INJECTED OBJECTS CAN BE SET ON THE INSTANCE OBJECT
};
return this.instance;
}]
});
5. In case of factories:
angular.module('MODULE_NAME',[DEPENDENCIES]).factory(<INJECTABLES>,
[<INJECTED_OBJECTS>, function <FactoryFunction>() {
....
return <OBJECT>;
}]);
6. In case of services:
angular.module('MODULE_NAME',[DEPENDENCIES]).service('<SERVICE_NAME',
[<INJECTABLES>, new ServiceFunction(<INJECTED_OJECTS>){
//Service Code
}]);
In case of Directives,
module_name.directive('<DIRECTIVE_NAME>', function () {
return {
restrict: 'E, A, C',
link: function ($scope, element, attrs, controller) {
//Directive code goes here
}
};
});
An alternative way to create directive, services, or factories is by using modules to extend the classes function, and use the function name to link them. For example, see the directive below.
var ExampleDirective= Classes.extend({
$scope : null,
$attrs:null,
$controller:null,
/**
* Initialize Directive
*
* @param $scope,
* current scope
*/
init : function(scope,element, attrs, controller,) {
},
/**
* Initialize listeners needs to be overrided by the subclass.
Don't forget
* to call _super() to activate
*/
defineListeners : function() {
his.$scope.$on('$destroy', this.destroy.bind(this));
},
/**
* Use this function to define all scope objects. Give a way to
instantaly
* view whats available publicly on the scope.
*/
defineScope : function() {
},
});
angular.module('MODULE_NAME',[DEPENDENCIES]).directive('<DIRECTIVE_NAME>',
function () {
return {
restrict: 'E, A, C',
link: function ($scope, element, attrs, controller) {
//Directive code goes here
return new ExampleDirective();
}
};
});