- Home
- .Net
- Java
- Php
- System
- Others
- Tutorials
- Utilities
- Hints
New version Angular 9
In this part we will discover how to setup base controllers for the standard operations and how to build an application in minutes.
The samples can be run with Firefox, in general or by running, into the directory,
The source for this part is here: 07_inherit.zip.
The image is roialty free... taken from freedigitalphotos.net, nothing on the UI changes with this step!
Given a controller with a service
myApp.service('myService',[function....]);
myApp.controller('BaseController',['$scope','$http','myService',function($scope,$http,myService){
...
}]);
I can create a controller that inherits all its behaviours, variables etc. But i must add the dependency from the $controller service.
Note that we pass an object to the base controller, the scope, that must be passed to keep the same context as the child controller. We don't pass the $http and myService services, since they will be resolved automatically by Angular dependency injection
myApp.controller('InheritedController',['$scope',function($scope){
$controller('BaseController',{$scope:$scope});
...
}]);
Our aim is to build generic CRUD controllers to avoid rewriting all the boring logic for ever and ever again.
First we will use this awesome library for the dialogs derived from the tutorial. Can be founded here following the installation instruction. We replace all call to modalDialogService to sgDialogService.
We define an "interface" that we will follow with all that is needed to manage our customers. Here we define
customers.service('customersDataService', [function() {
this.newTemplate='app/customers/new.html';
this.detailTemplate='app/customers/detail.html';
this.editTemplate='app/customers/edit.html';
this.deleteConfirm=function(item){ return "You want to delete customer n."+item.id+"?";}
this.detailMessage = function(item){return "Customer "+item.id;}
this.editMessage = function(item){return "Editing Customer "+item.id;}
this.createMessage = function(){return "Create Customer";}
this.list=function(){ return "/customers";};
this.get = function(item){ return '/customers/'+item.id;}
this.put = function(item){return '/customers/'+item.id;}
this.add = function(item){return '/customers';}
this.delete=function(item){return '/customers/'+item.id;}
}])
Then we add to all the customers controller a dependency on this service and we replace all the instances of the given string and replace them. For example the addNew
$scope.addNew = function(){
globalModalService.openModal(
{
template:'app/customers/new.html',
callback: function(){ $scope.loadData();}
})
}
Becomes the following, adding even the call to "loadData" to refresh the list automatically when adding items. Note the callback result
$scope.addNew = function(){
sgDialogService.openModal(
{
templateUrl:dataService.newTemplate,
callback: function(){ $scope.loadData();}
})
}
All the references to $scope.customer or $scope.customers will be changed to $scope.data.
At the same time when we iterate on the customers on the list, we will iterate on data, and when on the detail, edit and new we will use "data" as model.
Now we will create a new "controller.js" under the commons directory and we will move all the controllers there. The controllers will be created as children of the "commonModule" and their names will be transformed like CustomersListController in ListController and so on.
The dependency from the customersDataService will become a dependency on a generic "dataService".
We will now add our new controllers into the customers module! For example the following. Note that
The same must be done for all the controllers.
customers.controller('CustomersListController',['$scope','$http','globalMessagesService',
'$controller','customersDataService',
function($scope,$http,globalMessagesService,$controller,customersDataService){
$controller('ListController',{
$scope:$scope,
dataService:customersDataService
});
}]);
Since we are creating a library we must add callbacks to the base controller. We define another "interface". That we add as a dependency to all our base controllers.
commonControllersCallbacks={
postLoadData:function(data),
postGet:function(data),
preSave:function(data),
postSave:function(data),
postGetUpdate:function(data),
preUpdate:function(data),
postUpdate:function(data),
preDelete:function(data),
postDelete:function(data)
}
We define a default service that does nothing (to limit the code to write :P )
common.service('commonControllersCallbacks',[function(){
return {}
}]);
For example the edit controller becomes the following with the commonControllersCallback. (Note the name inside the parameter is changed for brevity to "callbacks", the important is the "string" name of the parameter)
All the functions are verified for the existence!!
common.controller('EditController',['$scope','$http','$location','$routeParams','globalMessagesService','modalInstance',
'dataService','commonControllersCallbacks',
function($scope,$http,$location,$routeParams,globalMessagesService,modalInstance,dataService,callbacks){
...
$http.get(dataService.get($scope.item)).
success(function(data, status, headers, config) {
...
//HERE IS ADDED THE CALLBACK
if(callbacks.postGetUpdate)callbacks.postGetUpdate($scope.data);
...
var update = function(){
//HERE IS ADDED THE CALLBACK
if(callbacks.preUpdate && !callbacks.preUpdate($scope.data))return;
$http.put(dataService.put($scope.data),$scope.data).
success(function(result, status, headers, config) {
//HERE IS ADDED THE CALLBACK
if(callbacks.postUpdate)callbacks.postUpdate($scope.data);
modalInstance.closeModal();
}).
And to add the callbacks we will simply do the following (if needed!)
customers.controller('CustomerEditController',['$scope','$http','$location','globalMessagesService',
'$controller','modalInstance','customersDataService',
function($scope,$http,$location,globalMessagesService,$controller,modalInstance,customersDataService){
$controller('EditController',{
$scope:$scope,
dataService:customersDataService,
modalInstance:modalInstance,
commonControllersCallbacks:{
postUpdate:function(item){ alert("Item updated!!");}
}
})
}]);