diff --git a/modules/claim/front/action/index.js b/modules/claim/front/action/index.js
index dc22cb4be..a847ef009 100644
--- a/modules/claim/front/action/index.js
+++ b/modules/claim/front/action/index.js
@@ -1,16 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $scope, $http, $translate, vnApp, $httpParamSerializer) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.$httpParamSerializer = $httpParamSerializer;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
-            where: {claimFk: $stateParams.id},
+            where: {claimFk: this.$params.id},
             include: [
                 {relation: 'sale',
                     scope: {
@@ -34,9 +30,7 @@ class Controller {
     }
 
     getClaimedSales() {
-        let json = encodeURIComponent(JSON.stringify(this.claim.id));
-
-        let query = `ClaimBeginnings/${json}`;
+        let query = `ClaimBeginnings/${this.claim.id}`;
         this.$http.get(query).then(res => {
             if (res.data)
                 this.claimedSales = res.data;
@@ -54,8 +48,7 @@ class Controller {
     }
 
     deleteClaimedSale(id) {
-        let json = encodeURIComponent(JSON.stringify(id));
-        let query = `ClaimEnds/${json}`;
+        let query = `ClaimEnds/${id}`;
         this.$http.delete(query).then(() => {
             this.$.model.refresh();
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -63,7 +56,7 @@ class Controller {
     }
 
     importToNewRefundTicket() {
-        let query = `ClaimBeginnings/${this.$stateParams.id}/importToNewRefundTicket`;
+        let query = `ClaimBeginnings/${this.$params.id}/importToNewRefundTicket`;
         return this.$http.post(query).then(() => {
             this.$.model.refresh();
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -112,7 +105,7 @@ class Controller {
     }
 
     importTicketLines(ticketFk) {
-        let data = {claimFk: this.$stateParams.id, ticketFk: ticketFk};
+        let data = {claimFk: this.$params.id, ticketFk: ticketFk};
 
         let query = `ClaimEnds/importTicketSales`;
         this.$http.post(query, data).then(() => {
@@ -123,7 +116,7 @@ class Controller {
     }
 
     regularize() {
-        let data = {claimFk: this.$stateParams.id};
+        let data = {claimFk: this.$params.id};
         let query = `Claims/regularizeClaim`;
         return this.$http.post(query, data).then(() => {
             if (this.claim.responsibility >= Math.ceil(this.maxResponsibility) / 2)
@@ -137,9 +130,8 @@ class Controller {
 
     getGreugeTypeId() {
         const params = {filter: {where: {code: 'freightPickUp'}}};
-        const serializedParams = this.$httpParamSerializer(params);
-        const query = `GreugeTypes/findOne?${serializedParams}`;
-        return this.$http.get(query).then(res => {
+        const query = `GreugeTypes/findOne`;
+        return this.$http.get(query, {params}).then(res => {
             this.greugeTypeFreightId = res.data.id;
 
             return res;
@@ -188,7 +180,7 @@ class Controller {
     }
 
     saveResponsibility(value) {
-        let query = `Claims/${this.$stateParams.id}/updateClaimAction`;
+        let query = `Claims/${this.$params.id}/updateClaimAction`;
 
         this.$http.post(query, {responsibility: value}).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -196,7 +188,7 @@ class Controller {
     }
 
     saveMana(value) {
-        let query = `Claims/${this.$stateParams.id}/updateClaimAction`;
+        let query = `Claims/${this.$params.id}/updateClaimAction`;
 
         this.$http.post(query, {isChargedToMana: value}).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -208,8 +200,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnApp', '$httpParamSerializer'];
-
 ngModule.component('vnClaimAction', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/action/index.spec.js b/modules/claim/front/action/index.spec.js
index c0bcea452..639e90827 100644
--- a/modules/claim/front/action/index.spec.js
+++ b/modules/claim/front/action/index.spec.js
@@ -18,7 +18,8 @@ describe('claim', () => {
             $state = _$state_;
             $state.params.id = 1;
 
-            controller = $componentController('vnClaimAction', {$state, $scope});
+            const $element = angular.element('<vn-claim-action></vn-claim-action>');
+            controller = $componentController('vnClaimAction', {$element, $scope});
             controller.claim = {ticketFk: 1};
             controller.$.model = {refresh: () => {}};
             controller.$.addSales = {
diff --git a/modules/claim/front/basic-data/index.html b/modules/claim/front/basic-data/index.html
index 9be04cb57..948ac6b18 100644
--- a/modules/claim/front/basic-data/index.html
+++ b/modules/claim/front/basic-data/index.html
@@ -2,7 +2,7 @@
     vn-id="watcher"
     data="$ctrl.claim"
     form="form"
-    url="Claims/{{$ctrl.$stateParams.id}}/updateClaim"
+    url="Claims/{{$ctrl.$params.id}}/updateClaim"
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-md">
@@ -55,6 +55,9 @@
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>
-        <vn-button label="Undo changes" ng-if="$ctrl.$scope.form.$dirty" ng-click="watcher.loadOriginalData()"></vn-button>
+        <vn-button label="Undo changes" 
+            ng-if="$ctrl.$.form.$dirty" 
+            ng-click="watcher.loadOriginalData()">
+        </vn-button>
     </vn-button-bar>
 </form>
diff --git a/modules/claim/front/basic-data/index.js b/modules/claim/front/basic-data/index.js
index bc616dd5c..c3eac92ff 100644
--- a/modules/claim/front/basic-data/index.js
+++ b/modules/claim/front/basic-data/index.js
@@ -1,24 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $state, aclService) {
-        this.$scope = $scope;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.aclService = aclService;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.submit().then(() => {
+        this.$.watcher.submit().then(() => {
             if (this.aclService.hasAny(['salesAssistant']))
                 this.$state.go('claim.card.detail');
         });
     }
 }
 
-Controller.$inject = ['$scope', '$state', 'aclService'];
-
 ngModule.component('vnClaimBasicData', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/basic-data/index.spec.js b/modules/claim/front/basic-data/index.spec.js
index 54b6e025d..65e934cb8 100644
--- a/modules/claim/front/basic-data/index.spec.js
+++ b/modules/claim/front/basic-data/index.spec.js
@@ -11,12 +11,13 @@ describe('Claim', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.watcher = watcher;
-            let aclService = {hasAny: () => true};
-            controller = $componentController('vnClaimBasicData', {$scope, aclService});
+            const $element = angular.element('<vn-claim-basic-data></vn-claim-basic-data>');
+            controller = $componentController('vnClaimBasicData', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
             it(`should redirect to 'claim.card.detail' state`, () => {
+                jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
                 jest.spyOn(controller.$state, 'go');
                 controller.onSubmit();
 
diff --git a/modules/claim/front/descriptor/index.js b/modules/claim/front/descriptor/index.js
index fd00368b8..55048c20c 100644
--- a/modules/claim/front/descriptor/index.js
+++ b/modules/claim/front/descriptor/index.js
@@ -2,8 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $httpParamSerializer) {
-        super($element, $scope);
+    constructor($element, $, $httpParamSerializer) {
+        super($element, $);
         this.$httpParamSerializer = $httpParamSerializer;
 
         this.moreOptions = [
diff --git a/modules/claim/front/detail/index.js b/modules/claim/front/detail/index.js
index 74033b565..33b348513 100644
--- a/modules/claim/front/detail/index.js
+++ b/modules/claim/front/detail/index.js
@@ -1,17 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($state, $, $http, $translate, vnApp, aclService) {
-        this.$state = $state;
-        this.$ = $;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.aclService = aclService;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.edit = {};
         this.filter = {
-            where: {claimFk: $state.params.id},
+            where: {claimFk: this.$params.id},
             include: [
                 {
                     relation: 'sale',
@@ -173,7 +169,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', '$http', '$translate', 'vnApp', 'aclService'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClaimDetail', {
     template: require('./index.html'),
diff --git a/modules/claim/front/detail/index.spec.js b/modules/claim/front/detail/index.spec.js
index a4d7878c5..922076b9f 100644
--- a/modules/claim/front/detail/index.spec.js
+++ b/modules/claim/front/detail/index.spec.js
@@ -6,12 +6,10 @@ describe('claim', () => {
         let $scope;
         let controller;
         let $httpBackend;
-        let $state;
-        let aclService;
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_, $rootScope) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.descriptor = {
                 show: () => {}
@@ -19,9 +17,8 @@ describe('claim', () => {
             $httpBackend = _$httpBackend_;
             $httpBackend.whenGET('Claims/ClaimBeginnings').respond({});
             $httpBackend.whenGET(`Tickets/1/isEditable`).respond(true);
-            $state = _$state_;
-            aclService = {hasAny: () => true};
-            controller = $componentController('vnClaimDetail', {$state, aclService, $scope});
+            const $element = angular.element('<vn-claim-detail></vn-claim-detail>');
+            controller = $componentController('vnClaimDetail', {$element, $scope});
             controller.claim = {ticketFk: 1};
             controller.salesToClaim = [{saleFk: 1}, {saleFk: 2}];
             controller.salesClaimed = [{id: 1, sale: {}}];
@@ -33,6 +30,7 @@ describe('claim', () => {
             controller.$.editPopover = {
                 hide: () => {}
             };
+            jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
         }));
 
         describe('openAddSalesDialog()', () => {
@@ -111,7 +109,6 @@ describe('claim', () => {
                     quantity: 10}};
                 controller.newDiscount = 10;
 
-
                 jest.spyOn(controller.vnApp, 'showSuccess');
                 jest.spyOn(controller, 'calculateTotals');
                 jest.spyOn(controller, 'clearDiscount');
diff --git a/modules/claim/front/development/index.html b/modules/claim/front/development/index.html
index 38082847a..2b504be11 100644
--- a/modules/claim/front/development/index.html
+++ b/modules/claim/front/development/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClaimDevelopments"
     fields="['id', 'claimFk', 'claimReasonFk', 'claimResultFk', 'claimResponsibleFk', 'workerFk', 'claimRedeliveryFk']"
-    link="{claimFk: $ctrl.$state.params.id}"
+    link="{claimFk: $ctrl.$params.id}"
     filter="$ctrl.filter"
     data="claimDevelopments"
     auto-load="true">
diff --git a/modules/claim/front/development/index.js b/modules/claim/front/development/index.js
index d6220fbca..cc86d5452 100644
--- a/modules/claim/front/development/index.js
+++ b/modules/claim/front/development/index.js
@@ -1,18 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($state, $scope, aclService) {
-        this.$state = $state;
-        this.$scope = $scope;
-        this.aclService = aclService;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.watcher.updateOriginalData();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
 
             if (this.aclService.hasAny(['salesAssistant']))
                 this.$state.go('claim.card.action');
@@ -20,8 +15,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', 'aclService'];
-
 ngModule.component('vnClaimDevelopment', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/development/index.spec.js b/modules/claim/front/development/index.spec.js
index 4d9ebdc7e..5708f82f2 100644
--- a/modules/claim/front/development/index.spec.js
+++ b/modules/claim/front/development/index.spec.js
@@ -6,7 +6,6 @@ describe('Claim', () => {
     describe('Component vnClaimDevelopment', () => {
         let controller;
         let $scope;
-        let aclService;
 
         beforeEach(ngModule('claim'));
 
@@ -14,13 +13,15 @@ describe('Claim', () => {
             $scope = $rootScope.$new();
             $scope.watcher = watcher;
             $scope.model = crudModel;
-            aclService = {hasAny: () => true};
-            controller = $componentController('vnClaimDevelopment', {$scope, aclService});
+            const $element = angular.element('<vn-claim-development></vn-claim-development>');
+            controller = $componentController('vnClaimDevelopment', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
             it(`should redirect to 'claim.card.action' state`, () => {
+                jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
                 jest.spyOn(controller.$state, 'go');
+
                 controller.onSubmit();
 
                 expect(controller.$state.go).toHaveBeenCalledWith('claim.card.action');
diff --git a/modules/claim/front/dms/style.scss b/modules/claim/front/dms/style.scss
deleted file mode 100644
index 28f9db6fc..000000000
--- a/modules/claim/front/dms/style.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import "./variables";
-
-vn-claim-dms-index {
-    .drop-zone {
-        color: $color-font-secondary;
-        box-sizing: border-box;
-        border-radius: 0.5em;
-        text-align: center;
-        min-height: 100%;
-        
-        .empty-rows {
-            padding: 5em $spacing-md;
-            font-size: 1.4em
-        }
-
-        vn-icon {
-            font-size: 3em
-        }
-    }
-
-    .photo-list {
-        
-        padding: $spacing-md;
-        min-height: 100%;
-
-        .photo {
-            width: 32em;
-            height: 18em;
-        }
-    }
-}
\ No newline at end of file
diff --git a/modules/claim/front/index/index.js b/modules/claim/front/index/index.js
index 1e9724987..df6d15b38 100644
--- a/modules/claim/front/index/index.js
+++ b/modules/claim/front/index/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope) {
-        this.$ = $scope;
-        this.ticketSelected = null;
-    }
-
+export default class Controller extends Section {
     stateColor(claim) {
         switch (claim.description) {
         case 'Pendiente':
@@ -45,8 +41,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnClaimIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/claim/front/photos/index.html b/modules/claim/front/photos/index.html
index 447538bd1..4a6e3e7b2 100644
--- a/modules/claim/front/photos/index.html
+++ b/modules/claim/front/photos/index.html
@@ -1,10 +1,9 @@
 <vn-crud-model vn-id="model" auto-load="true"
     url="ClaimDms"
-    link="{claimFk: $ctrl.$stateParams.id}"
+    link="{claimFk: $ctrl.$params.id}"
     limit="20"
     data="$ctrl.photos">
 </vn-crud-model>
-
 <vn-horizontal class="photo-list drop-zone" vn-droppable="$ctrl.onDrop($event)">
     <section class="empty-rows" ng-if="!$ctrl.photos.length">
         <section><vn-icon icon="image"></vn-icon></section>
@@ -12,8 +11,8 @@
     </section>
     <section class="photo" ng-repeat="photo in $ctrl.photos">
         <section class="image vn-shadow" on-error-src 
-            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
-            zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.vnToken.token + ')'}"
+            zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
         </section>
         <section class="actions">
             <vn-button
diff --git a/modules/claim/front/photos/index.js b/modules/claim/front/photos/index.js
index 61256aad1..baf5fd154 100644
--- a/modules/claim/front/photos/index.js
+++ b/modules/claim/front/photos/index.js
@@ -1,17 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $scope, $http, $translate, vnToken, vnApp, vnConfig) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
-    }
-
+class Controller extends Section {
     showWorkerDescriptor(event, workerFk) {
         event.preventDefault();
         event.stopImmediatePropagation();
@@ -106,8 +97,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnToken', 'vnApp', 'vnConfig'];
-
 ngModule.component('vnClaimPhotos', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/photos/index.spec.js b/modules/claim/front/photos/index.spec.js
index 81eab69ee..1172800f6 100644
--- a/modules/claim/front/photos/index.spec.js
+++ b/modules/claim/front/photos/index.spec.js
@@ -3,7 +3,6 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Claim', () => {
     describe('Component vnClaimPhotos', () => {
-        let $componentController;
         let $scope;
         let $httpBackend;
         let controller;
@@ -11,12 +10,12 @@ describe('Claim', () => {
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
             $httpParamSerializer = _$httpParamSerializer_;
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClaimPhotos', {$: $scope});
+            const $element = angular.element('<vn-claim-photos></vn-claim-photos>');
+            controller = $componentController('vnClaimPhotos', {$element, $scope});
             controller.$.model = crudModel;
             controller.claim = {
                 id: 1,
diff --git a/modules/claim/front/summary/index.html b/modules/claim/front/summary/index.html
index 20dca702b..6f639c709 100644
--- a/modules/claim/front/summary/index.html
+++ b/modules/claim/front/summary/index.html
@@ -86,8 +86,8 @@
             <vn-horizontal class="photo-list">
                 <section class="photo" ng-repeat="photo in photos">
                     <section class="image" on-error-src 
-                        ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
-                        zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.vnToken.token + ')'}"
+                        zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                     </section>
                 </section>
             </vn-horizontal>
diff --git a/modules/claim/front/summary/index.js b/modules/claim/front/summary/index.js
index 448ce9b38..094aa49fe 100644
--- a/modules/claim/front/summary/index.js
+++ b/modules/claim/front/summary/index.js
@@ -1,19 +1,17 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $stateParams, vnToken) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-        this.accessToken = vnToken.token;
+class Controller extends Section {
+    $onChanges() {
+        if (this.claim && this.claim.id)
+            this.getSummary();
     }
 
     get claim() {
         return this._claim;
     }
 
-
     set claim(value) {
         this._claim = value;
 
@@ -35,11 +33,6 @@ class Controller {
         });
     }
 
-    $onChanges() {
-        if (this.claim && this.claim.id)
-            this.getSummary();
-    }
-
     showItemDescriptor(event, itemFk) {
         this.$.itemDescriptor.itemFk = itemFk;
         this.$.itemDescriptor.parent = event.target;
@@ -59,8 +52,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams', 'vnToken'];
-
 ngModule.component('vnClaimSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/claim/front/summary/index.spec.js b/modules/claim/front/summary/index.spec.js
index f1897a3e0..b6e03d929 100644
--- a/modules/claim/front/summary/index.spec.js
+++ b/modules/claim/front/summary/index.spec.js
@@ -5,12 +5,15 @@ describe('Claim', () => {
     describe('Component summary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
+            $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClaimSummary');
+            const $element = angular.element('<vn-claim-summary></vn-claim-summary>');
+            controller = $componentController('vnClaimSummary', {$element, $scope});
             controller.claim = {id: 1};
             controller.$.model = crudModel;
         }));
@@ -29,6 +32,7 @@ describe('Claim', () => {
         describe('$onChanges()', () => {
             it('should call getSummary when item.id is defined', () => {
                 jest.spyOn(controller, 'getSummary');
+
                 controller.$onChanges();
 
                 expect(controller.getSummary).toHaveBeenCalledWith();
diff --git a/modules/client/front/address/create/index.html b/modules/client/front/address/create/index.html
index 519638d48..084af36e5 100644
--- a/modules/client/front/address/create/index.html
+++ b/modules/client/front/address/create/index.html
@@ -11,7 +11,7 @@
     vn-id="model"
     url="AddressObservations"
     fields="['id', 'addressFk', 'observationTypeFk', 'description']"
-    link="{addressFk: $ctrl.$stateParams.addressId}"
+    link="{addressFk: $ctrl.$params.addressId}"
     data="observations"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/client/front/address/create/index.js b/modules/client/front/address/create/index.js
index 9070c876f..69087f154 100644
--- a/modules/client/front/address/create/index.js
+++ b/modules/client/front/address/create/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     constructor($element, $) {
         super($element, $);
 
diff --git a/modules/client/front/address/edit/index.js b/modules/client/front/address/edit/index.js
index f310b7250..f2d660334 100644
--- a/modules/client/front/address/edit/index.js
+++ b/modules/client/front/address/edit/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     removeObservation(index) {
         this.$.watcher.setDirty();
         this.$.model.remove(index);
diff --git a/modules/client/front/address/index/index.html b/modules/client/front/address/index/index.html
index c78f51748..bdf4496ce 100644
--- a/modules/client/front/address/index/index.html
+++ b/modules/client/front/address/index/index.html
@@ -1,6 +1,6 @@
 <vn-crud-model
     vn-id="model"
-    url="Clients/{{$ctrl.$stateParams.id}}/addresses"
+    url="Clients/{{$ctrl.$params.id}}/addresses"
     filter="$ctrl.filter"
     limit="10"
     data="$ctrl.addresses"
diff --git a/modules/client/front/address/index/index.js b/modules/client/front/address/index/index.js
index a7b9bc23b..19f3524fb 100644
--- a/modules/client/front/address/index/index.js
+++ b/modules/client/front/address/index/index.js
@@ -1,13 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http, $scope, $stateParams, $translate, vnApp) {
-        this.$http = $http;
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             fields: [
                 'id',
@@ -47,7 +44,7 @@ class Controller {
     }
 
     setDefault(address) {
-        let query = `Clients/${this.$stateParams.id}`;
+        let query = `Clients/${this.$params.id}`;
         let params = {defaultAddressFk: address.id};
         this.$http.patch(query, params).then(res => {
             if (res.data) {
@@ -72,7 +69,7 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$http', '$scope', '$stateParams', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientAddressIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/address/index/index.spec.js b/modules/client/front/address/index/index.spec.js
index 1398f617f..d53abe8be 100644
--- a/modules/client/front/address/index/index.spec.js
+++ b/modules/client/front/address/index/index.spec.js
@@ -15,9 +15,10 @@ describe('Client', () => {
             $stateParams.id = 1;
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClientAddressIndex', {$stateParams, $scope});
+            const $element = angular.element('<vn-client-address-index></vn-client-address-index>');
+            controller = $componentController('vnClientAddressIndex', {$element, $scope});
             controller.client = {id: 101, defaultAddressFk: 121};
-            controller.$scope.model = crudModel;
+            controller.$.model = crudModel;
         }));
 
         describe('setDefault()', () => {
diff --git a/modules/client/front/balance/create/index.js b/modules/client/front/balance/create/index.js
index a480fac72..1a7d8b97b 100644
--- a/modules/client/front/balance/create/index.js
+++ b/modules/client/front/balance/create/index.js
@@ -1,19 +1,15 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $state, $http, vnApp, $translate, vnConfig) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$state = $state;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.receipt = {
             payed: new Date(),
-            clientFk: this.$state.params.id,
-            companyFk: vnConfig.companyFk,
-            bankFk: vnConfig.bankFk
+            clientFk: this.$params.id,
+            companyFk: this.vnConfig.companyFk,
+            bankFk: this.vnConfig.bankFk
         };
     }
 
@@ -57,7 +53,7 @@ class Controller {
     getAmountPaid() {
         let filter = {
             where: {
-                clientFk: this.$state.params.id,
+                clientFk: this.$params.id,
                 companyFk: this.receipt.companyFk
             }
         };
@@ -86,7 +82,6 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$scope', '$state', '$http', 'vnApp', '$translate', 'vnConfig'];
 
 ngModule.component('vnClientBalanceCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/balance/index/index.html b/modules/client/front/balance/index/index.html
index 8cdb5c971..1e26607d1 100644
--- a/modules/client/front/balance/index/index.html
+++ b/modules/client/front/balance/index/index.html
@@ -97,7 +97,7 @@
                     <vn-td center shrink>
                         <a ng-show="balance.hasPdf"
                             target="_blank"
-                            href="InvoiceOuts/{{::balance.id}}/download?access_token={{::$ctrl.accessToken}}">
+                            href="InvoiceOuts/{{::balance.id}}/download?access_token={{::$ctrl.vnToken.token}}">
                             <vn-icon-button
                                 icon="cloud_download"
                                 title="{{'Download PDF' | translate}}">
diff --git a/modules/client/front/balance/index/index.js b/modules/client/front/balance/index/index.js
index 5a5d0e0b2..13840af92 100644
--- a/modules/client/front/balance/index/index.js
+++ b/modules/client/front/balance/index/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $translate, $scope, vnToken, $http, vnConfig) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnConfig = vnConfig;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: {
                 relation: 'company',
@@ -46,17 +42,16 @@ class Controller {
 
     getData() {
         return this.$.model.applyFilter(null, {
-            clientId: this.$stateParams.id,
+            clientId: this.$params.id,
             companyId: this.companyId
         }).then(() => this.$.riskModel.applyFilter({
             where: {
-                clientFk: this.$stateParams.id,
+                clientFk: this.$params.id,
                 companyFk: this.companyId
             }
         })).then(() => this.getBalances());
     }
 
-
     getCurrentBalance() {
         const clientRisks = this.$.riskModel.data;
         const selectedCompany = this.companyId;
@@ -79,7 +74,6 @@ class Controller {
         });
     }
 
-
     openCreateDialog() {
         this.$.balanceCreateDialog.companyFk = this.companyId;
         this.$.balanceCreateDialog.onResponse = () => this.getData();
@@ -110,7 +104,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$translate', '$scope', 'vnToken', '$http', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientBalanceIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/balance/index/index.spec.js b/modules/client/front/balance/index/index.spec.js
index aaa12b2e3..6a7a6e321 100644
--- a/modules/client/front/balance/index/index.spec.js
+++ b/modules/client/front/balance/index/index.spec.js
@@ -2,15 +2,14 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientBalanceIndex', () => {
-        let $componentController;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             let $scope = $rootScope.$new();
-            controller = $componentController('vnClientBalanceIndex', {$scope});
+            const $element = angular.element('<vn-client-balance-index></vn-client-balance-index>');
+            controller = $componentController('vnClientBalanceIndex', {$element, $scope});
             controller.$.model = {applyFilter: () => {}};
             controller.$.riskModel = {
                 applyFilter: () => {},
@@ -30,7 +29,7 @@ describe('Client', () => {
         describe('getData()', () => {
             it('should apply the filters on he models and get the client balance', () => {
                 controller._companyId = 442;
-                controller.$stateParams.id = 101;
+                controller.$params.id = 101;
                 jest.spyOn(controller, 'getBalances').mockReturnThis();
                 jest.spyOn(controller.$.model, 'applyFilter').mockReturnValue(Promise.resolve());
                 jest.spyOn(controller.$.riskModel, 'applyFilter').mockReturnValue(Promise.resolve());
diff --git a/modules/client/front/basic-data/index.js b/modules/client/front/basic-data/index.js
index 093ef4bec..5d491ec75 100644
--- a/modules/client/front/basic-data/index.js
+++ b/modules/client/front/basic-data/index.js
@@ -1,7 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
 ngModule.component('vnClientBasicData', {
     template: require('./index.html'),
+    controller: Section,
     bindings: {
         client: '<'
     }
diff --git a/modules/client/front/contact/index.html b/modules/client/front/contact/index.html
index 2cefdd86d..664a59567 100644
--- a/modules/client/front/contact/index.html
+++ b/modules/client/front/contact/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientContacts"
     fields="['id', 'name', 'phone', 'clientFk']"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     data="contacts"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/client/front/contact/index.js b/modules/client/front/contact/index.js
index 4b0cc95ca..4f29ddb8c 100644
--- a/modules/client/front/contact/index.js
+++ b/modules/client/front/contact/index.js
@@ -1,14 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams, $translate) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-    }
-
+class Controller extends Section {
     add() {
-        this.$scope.model.insert({
+        this.$.model.insert({
             clientFk: this.client.id,
             name: this.$translate.instant('Phone'),
             phone: null
@@ -16,16 +11,14 @@ class Controller {
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams', '$translate'];
-
 ngModule.component('vnClientContact', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/create/index.js b/modules/client/front/create/index.js
index a663717d6..cce41b3bc 100644
--- a/modules/client/front/create/index.js
+++ b/modules/client/front/create/index.js
@@ -1,12 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state, $http, $translate, vnApp) {
-        this.$ = $scope;
-        this.$state = $state;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.client = {
             active: true
         };
@@ -78,7 +75,7 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/create/index.spec.js b/modules/client/front/create/index.spec.js
index c297b0545..804c0b961 100644
--- a/modules/client/front/create/index.spec.js
+++ b/modules/client/front/create/index.spec.js
@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-create></vn-client-create>');
+            controller = $componentController('vnClientCreate', {$element, $scope});
         }));
 
         it('should define and set scope, state and client properties', () => {
diff --git a/modules/client/front/credit-insurance/create/index.js b/modules/client/front/credit-insurance/create/index.js
index 86c067086..5ea2a8039 100644
--- a/modules/client/front/credit-insurance/create/index.js
+++ b/modules/client/front/credit-insurance/create/index.js
@@ -1,19 +1,16 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($http, $filter, $state, $scope, $translate, vnApp) {
-        this.$http = $http;
-        this.$state = $state;
-        this.$scope = $scope;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.creditClassification = {
-            started: $filter('date')(new Date(), 'yyyy-MM-dd HH:mm')
+            started: this.$filter('date')(new Date(), 'yyyy-MM-dd HH:mm')
         };
     }
 
     onSubmit() {
-        if (this.$scope.form.$invalid)
+        if (this.$.form.$invalid)
             return this.vnApp.showError(this.$translate.instant('Some fields are invalid'));
 
         let query = `creditClassifications/createWithInsurance`;
@@ -29,7 +26,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$filter', '$state', '$scope', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/credit-insurance/create/index.spec.js b/modules/client/front/credit-insurance/create/index.spec.js
index 1d1cd0e08..29bd2c11e 100644
--- a/modules/client/front/credit-insurance/create/index.spec.js
+++ b/modules/client/front/credit-insurance/create/index.spec.js
@@ -14,7 +14,8 @@ describe('Client', () => {
             $scope.form = {
                 $invalid: false
             };
-            controller = $componentController('vnClientCreditInsuranceCreate', {$scope});
+            const $element = angular.element('<vn-client-credit-insurance-create></vn-client-credit-insurance-create>');
+            controller = $componentController('vnClientCreditInsuranceCreate', {$element, $scope});
             controller.client = {id: 101};
             controller.card = {
                 reload: () => {}
diff --git a/modules/client/front/credit-insurance/index/index.js b/modules/client/front/credit-insurance/index/index.js
index accdc8c5d..e386444f4 100644
--- a/modules/client/front/credit-insurance/index/index.js
+++ b/modules/client/front/credit-insurance/index/index.js
@@ -1,12 +1,8 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http, $scope) {
-        this.$http = $http;
-        this.$scope = $scope;
-    }
-
+class Controller extends Section {
     $onChanges() {
         if (this.client && this.client.id)
             this._getClassifications(this.client.id);
@@ -52,7 +48,7 @@ class Controller {
 
     closeContract(classification) {
         this.classificationId = classification.id;
-        this.$scope.closeContract.show();
+        this.$.closeContract.show();
     }
 
     returnDialog(response) {
@@ -65,8 +61,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$scope'];
-
 ngModule.component('vnClientCreditInsuranceIndex', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/credit-insurance/index/index.spec.js b/modules/client/front/credit-insurance/index/index.spec.js
index 48403263e..bed58a7d6 100644
--- a/modules/client/front/credit-insurance/index/index.spec.js
+++ b/modules/client/front/credit-insurance/index/index.spec.js
@@ -4,12 +4,15 @@ describe('Client', () => {
     describe('Component vnClientCreditInsuranceIndex', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditInsuranceIndex');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-client-credit-insurance-index></vn-client-credit-insurance-index>');
+            controller = $componentController('vnClientCreditInsuranceIndex', {$element, $scope});
             controller.client = {id: 101};
         }));
 
@@ -59,14 +62,14 @@ describe('Client', () => {
 
         describe('closeContract()', () => {
             it('should define the classificationId property of the controller and then call the show method()', () => {
-                controller.$scope.closeContract = {show: () => {}};
-                jest.spyOn(controller.$scope.closeContract, 'show');
+                controller.$.closeContract = {show: () => {}};
+                jest.spyOn(controller.$.closeContract, 'show');
 
                 expect(controller.classificationId).toBeFalsy();
                 controller.closeContract({id: 1});
 
                 expect(controller.classificationId).toEqual(1);
-                expect(controller.$scope.closeContract.show).toHaveBeenCalledWith();
+                expect(controller.$.closeContract.show).toHaveBeenCalledWith();
             });
         });
 
diff --git a/modules/client/front/credit-insurance/insurance/create/index.js b/modules/client/front/credit-insurance/insurance/create/index.js
index 2c7670ff5..2363cac76 100644
--- a/modules/client/front/credit-insurance/insurance/create/index.js
+++ b/modules/client/front/credit-insurance/insurance/create/index.js
@@ -1,25 +1,25 @@
 import ngModule from '../../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state, $filter) {
-        this.$scope = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.insurance = {
-            created: $filter('date')(new Date(), 'yyyy-MM-dd HH:mm:ss')
+            created: this.$filter('date')(new Date(), 'yyyy-MM-dd HH:mm:ss')
         };
     }
 
     onSubmit() {
-        let params = {classificationId: this.$state.params.classificationId};
+        let params = {classificationId: this.$params.classificationId};
         let state = 'client.card.creditInsurance.insurance.index';
 
-        this.$scope.watcher.submitGo(state, params).then(() => {
+        this.$.watcher.submitGo(state, params).then(() => {
             this.card.reload();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceInsuranceCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/credit-insurance/insurance/index/index.html b/modules/client/front/credit-insurance/insurance/index/index.html
index 28f44f044..11c9935d0 100644
--- a/modules/client/front/credit-insurance/insurance/index/index.html
+++ b/modules/client/front/credit-insurance/insurance/index/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="CreditInsurances"
-    link="{creditClassification: $ctrl.$stateParams.classificationId}"
+    link="{creditClassification: $ctrl.$params.classificationId}"
     limit="20"
     data="insurances"
     auto-load="true">
@@ -30,7 +30,7 @@
 </div>
 <a 
     ng-if="!$ctrl.isClosed"
-    ui-sref="client.card.creditInsurance.insurance.create({classificationId: {{$ctrl.$stateParams.classificationId}}})" 
+    ui-sref="client.card.creditInsurance.insurance.create({classificationId: {{$ctrl.$params.classificationId}}})" 
     fixed-bottom-right
     vn-tooltip="New credit"
     vn-bind="+">
diff --git a/modules/client/front/credit-insurance/insurance/index/index.js b/modules/client/front/credit-insurance/insurance/index/index.js
index 4851bf200..f78d06785 100644
--- a/modules/client/front/credit-insurance/insurance/index/index.js
+++ b/modules/client/front/credit-insurance/insurance/index/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams, $http) {
-        this.$stateParams = $stateParams;
-        this.$http = $http;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.isClosed = true;
         this.filter = {
             include: [
@@ -15,7 +15,7 @@ class Controller {
     $onInit() {
         let filter = {
             fields: ['finished'],
-            where: {id: this.$stateParams.classificationId}
+            where: {id: this.$params.classificationId}
         };
         filter = encodeURIComponent(JSON.stringify(filter));
 
@@ -27,7 +27,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$http'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceInsuranceIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/credit-insurance/insurance/index/index.spec.js b/modules/client/front/credit-insurance/insurance/index/index.spec.js
index 8c3cdee83..490d6a924 100644
--- a/modules/client/front/credit-insurance/insurance/index/index.spec.js
+++ b/modules/client/front/credit-insurance/insurance/index/index.spec.js
@@ -4,13 +4,16 @@ describe('Client', () => {
     describe('Component vnClientCreditInsuranceInsuranceIndex', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
-            let $stateParams = {classificationId: 1};
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
+            $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditInsuranceInsuranceIndex', {$stateParams});
+            const $element = angular.element('<vn-client-credit-insurance-insurance-index></vn-client-credit-insurance-insurance-index>');
+            controller = $componentController('vnClientCreditInsuranceInsuranceIndex', {$element, $scope});
+            controller.$params = {classificationId: 1};
         }));
 
         describe('$onInit()', () => {
diff --git a/modules/client/front/credit/create/index.js b/modules/client/front/credit/create/index.js
index 7493073b6..049c206b3 100644
--- a/modules/client/front/credit/create/index.js
+++ b/modules/client/front/credit/create/index.js
@@ -1,17 +1,12 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($http, $scope, $state) {
-        this.$http = $http;
-        this.$scope = $scope;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$http.get(`Recoveries/${this.$state.params.id}/hasActiveRecovery`).then(res => {
+        this.$http.get(`Recoveries/${this.$params.id}/hasActiveRecovery`).then(res => {
             let activeRecovery = res.data;
             if (activeRecovery)
-                this.$scope.confirmation.show();
+                this.$.confirmation.show();
             else
                 this.addCredit();
         });
@@ -31,7 +26,7 @@ class Controller {
     }
 
     addCredit() {
-        this.$scope.watcher.submit().then(
+        this.$.watcher.submit().then(
             () => {
                 this.goToIndex();
             }
@@ -39,8 +34,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$scope', '$state'];
-
 ngModule.component('vnClientCreditCreate', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/credit/create/index.spec.js b/modules/client/front/credit/create/index.spec.js
index 13f034969..a69fb64a9 100644
--- a/modules/client/front/credit/create/index.spec.js
+++ b/modules/client/front/credit/create/index.spec.js
@@ -30,7 +30,8 @@ describe('Client', () => {
             $state = _$state_;
             $state.params.id = 101;
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditCreate', {$scope, $state});
+            const $element = angular.element('<vn-client-credit-create></vn-client-credit-create>');
+            controller = $componentController('vnClientCreditCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
@@ -42,13 +43,13 @@ describe('Client', () => {
             });
 
             it('should call show() method when the client have a recovery', () => {
-                jest.spyOn(controller.$scope.confirmation, 'show');
+                jest.spyOn(controller.$.confirmation, 'show');
                 $httpBackend.whenGET(`Recoveries/101/hasActiveRecovery`).respond(true);
                 $httpBackend.expectGET(`Recoveries/101/hasActiveRecovery`);
                 controller.onSubmit();
                 $httpBackend.flush();
 
-                expect(controller.$scope.confirmation.show).toHaveBeenCalledWith();
+                expect(controller.$.confirmation.show).toHaveBeenCalledWith();
             });
 
             it('should call addCredit() method when the client doesnt have a recovery', () => {
diff --git a/modules/client/front/credit/index/index.html b/modules/client/front/credit/index/index.html
index 03de6f0e7..6cb7f9e84 100644
--- a/modules/client/front/credit/index/index.html
+++ b/modules/client/front/credit/index/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientCredits"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="credits"
     order="created DESC"
diff --git a/modules/client/front/credit/index/index.js b/modules/client/front/credit/index/index.js
index e8fae8d9d..bea30b2d1 100644
--- a/modules/client/front/credit/index/index.js
+++ b/modules/client/front/credit/index/index.js
@@ -1,8 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams) {
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -22,7 +23,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/descriptor-popover/index.js b/modules/client/front/descriptor-popover/index.js
index 816eaf05e..1a1b41f76 100644
--- a/modules/client/front/descriptor-popover/index.js
+++ b/modules/client/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.client = null;
         this._quicklinks = {};
     }
@@ -59,7 +56,6 @@ class Controller extends Component {
         );
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnClientDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/client/front/dms/create/index.js b/modules/client/front/dms/create/index.js
index 46c4d7565..0422ab6a6 100644
--- a/modules/client/front/dms/create/index.js
+++ b/modules/client/front/dms/create/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp, vnConfig) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.dms = {
             files: [],
             hasFile: false,
@@ -106,7 +102,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientDmsCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/dms/create/index.spec.js b/modules/client/front/dms/create/index.spec.js
index 2c1215d6b..0f0e2cb09 100644
--- a/modules/client/front/dms/create/index.spec.js
+++ b/modules/client/front/dms/create/index.spec.js
@@ -13,7 +13,8 @@ describe('Client', () => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            controller = $componentController('vnClientDmsCreate', {$scope});
+            const $element = angular.element('<vn-client-create></vn-client-create>');
+            controller = $componentController('vnClientDmsCreate', {$element, $scope});
             controller._client = {id: 101, name: 'Bruce wayne'};
         }));
 
diff --git a/modules/client/front/dms/edit/index.js b/modules/client/front/dms/edit/index.js
index 460aa17a7..dedd67e3f 100644
--- a/modules/client/front/dms/edit/index.js
+++ b/modules/client/front/dms/edit/index.js
@@ -1,16 +1,8 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Section {
     get client() {
         return this._client;
     }
@@ -38,7 +30,7 @@ class Controller {
     }
 
     setDefaultParams() {
-        const path = `Dms/${this.$stateParams.dmsId}`;
+        const path = `Dms/${this.$params.dmsId}`;
         this.$http.get(path).then(res => {
             const dms = res.data && res.data;
             this.dms = {
@@ -55,7 +47,7 @@ class Controller {
     }
 
     onSubmit() {
-        const query = `dms/${this.$stateParams.dmsId}/updateFile`;
+        const query = `dms/${this.$params.dmsId}/updateFile`;
         const options = {
             method: 'POST',
             url: query,
@@ -93,8 +85,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp'];
-
 ngModule.component('vnClientDmsEdit', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/dms/edit/index.spec.js b/modules/client/front/dms/edit/index.spec.js
index 4d432cfd0..f4aaf52f8 100644
--- a/modules/client/front/dms/edit/index.spec.js
+++ b/modules/client/front/dms/edit/index.spec.js
@@ -5,16 +5,16 @@ describe('Client', () => {
         let controller;
         let $scope;
         let $httpBackend;
-        let $state;
 
         beforeEach(ngModule('client'));
 
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            $state = {params: {dmsId: 1}};
-            controller = $componentController('vnClientDmsEdit', {$scope, $state});
+            const $element = angular.element('<vn-client-dms-edit></vn-client-dms-edit>');
+            controller = $componentController('vnClientDmsEdit', {$element, $scope});
             controller._client = {id: 1};
+            controller.$params = {dmsId: 1};
         }));
 
         describe('client() setter', () => {
diff --git a/modules/client/front/dms/index/index.html b/modules/client/front/dms/index/index.html
index 78bc45b57..987613d72 100644
--- a/modules/client/front/dms/index/index.html
+++ b/modules/client/front/dms/index/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="ClientDms"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     limit="20"
     data="$ctrl.clientDms"
@@ -56,7 +56,7 @@
                 <vn-td shrink>
                     <a target="_blank"
                         title="{{'Download file' | translate}}"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         {{::document.dms.file}}
                     </a>
                 </vn-td>
@@ -70,7 +70,7 @@
                 </vn-td>
                 <vn-td shrink>
                     <a target="_blank"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         <vn-icon-button
                             icon="cloud_download"
                             title="{{'Download file' | translate}}">
diff --git a/modules/client/front/dms/index/index.js b/modules/client/front/dms/index/index.js
index 0f1c8a2dc..2b47c3e57 100644
--- a/modules/client/front/dms/index/index.js
+++ b/modules/client/front/dms/index/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $scope, vnToken, $http, vnApp, $translate) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.accessToken = vnToken.token;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: {
                 relation: 'dms',
@@ -71,7 +67,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', 'vnToken', '$http', 'vnApp', '$translate'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientDmsIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/dms/index/index.spec.js b/modules/client/front/dms/index/index.spec.js
index 49b6014c0..816e8a25d 100644
--- a/modules/client/front/dms/index/index.spec.js
+++ b/modules/client/front/dms/index/index.spec.js
@@ -3,18 +3,17 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Client', () => {
     describe('Component vnClientDmsIndex', () => {
-        let $componentController;
         let $scope;
         let $httpBackend;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClientDmsIndex', {$: $scope});
+            const $element = angular.element('<vn-client-dms-index></vn-client-dms-index>');
+            controller = $componentController('vnClientDmsIndex', {$element, $scope});
             controller.$.model = crudModel;
         }));
 
diff --git a/modules/client/front/fiscal-data/index.js b/modules/client/front/fiscal-data/index.js
index f302606dd..fdbb0fafc 100644
--- a/modules/client/front/fiscal-data/index.js
+++ b/modules/client/front/fiscal-data/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     onSubmit() {
         const orgData = this.$.watcher.orgData;
         delete this.client.despiteOfClient;
diff --git a/modules/client/front/greuge/create/index.js b/modules/client/front/greuge/create/index.js
index b0a2eec93..3154d15f0 100644
--- a/modules/client/front/greuge/create/index.js
+++ b/modules/client/front/greuge/create/index.js
@@ -1,12 +1,12 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state, $filter) {
-        this.$ = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.greuge = {
             shipped: new Date(),
-            clientFk: $state.params.id
+            clientFk: this.$params.id
         };
     }
 
@@ -26,7 +26,7 @@ class Controller {
         );
     }
 }
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientGreugeCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/greuge/create/index.spec.js b/modules/client/front/greuge/create/index.spec.js
index 73563ca3d..cb52ae2a7 100644
--- a/modules/client/front/greuge/create/index.spec.js
+++ b/modules/client/front/greuge/create/index.spec.js
@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientGreugeCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientGreugeCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-greuge-create></vn-client-greuge-create>');
+            controller = $componentController('vnClientGreugeCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
diff --git a/modules/client/front/greuge/index/index.html b/modules/client/front/greuge/index/index.html
index 683ac0afe..463ac6303 100644
--- a/modules/client/front/greuge/index/index.html
+++ b/modules/client/front/greuge/index/index.html
@@ -2,13 +2,13 @@
     vn-id="model"
     url="greuges"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="greuges"
     auto-load="true">
 </vn-crud-model>
 <mg-ajax 
-    path="greuges/{{$ctrl.$stateParams.id}}/sumAmount" 
+    path="greuges/{{$ctrl.$params.id}}/sumAmount" 
     options="mgEdit">
 </mg-ajax>
 <vn-data-viewer
diff --git a/modules/client/front/greuge/index/index.js b/modules/client/front/greuge/index/index.js
index b89b01d7e..bacb93544 100644
--- a/modules/client/front/greuge/index/index.js
+++ b/modules/client/front/greuge/index/index.js
@@ -1,8 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams) {
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -17,7 +18,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientGreugeIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/index/index.js b/modules/client/front/index/index.js
index 054944f9d..f5400e05a 100644
--- a/modules/client/front/index/index.js
+++ b/modules/client/front/index/index.js
@@ -1,12 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state) {
-        this.$ = $scope;
-        this.$state = $state;
-        this.clientSelected = null;
-    }
-
+export default class Controller extends Section {
     openSummary(client, event) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -25,7 +20,6 @@ export default class Controller {
             {q: JSON.stringify({clientFk: client.id})});
     }
 }
-Controller.$inject = ['$scope', '$state'];
 
 ngModule.component('vnClientIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/index/index.spec.js b/modules/client/front/index/index.spec.js
index 8b00381c7..110db5e6a 100644
--- a/modules/client/front/index/index.spec.js
+++ b/modules/client/front/index/index.spec.js
@@ -2,13 +2,16 @@ import './index';
 
 describe('Client index', () => {
     let $state;
+    let $scope;
     let controller;
 
     beforeEach(ngModule('client'));
 
-    beforeEach(angular.mock.inject(($componentController, _$state_) => {
+    beforeEach(angular.mock.inject(($componentController, _$state_, $rootScope) => {
         $state = _$state_;
-        controller = $componentController('vnClientIndex');
+        $scope = $rootScope.$new();
+        const $element = angular.element('<vn-client-index></vn-client-index>');
+        controller = $componentController('vnClientIndex', {$element, $scope});
     }));
 
     describe('filterTickets()', () => {
diff --git a/modules/client/front/log/index.html b/modules/client/front/log/index.html
index 90874d0cb..881d5c039 100644
--- a/modules/client/front/log/index.html
+++ b/modules/client/front/log/index.html
@@ -1 +1 @@
-<vn-log url="ClientLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="ClientLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/client/front/log/index.js b/modules/client/front/log/index.js
index 2f01d229c..e4cac6e58 100644
--- a/modules/client/front/log/index.js
+++ b/modules/client/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnClientLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/client/front/mandate/index.html b/modules/client/front/mandate/index.html
index 79016761f..3084646da 100644
--- a/modules/client/front/mandate/index.html
+++ b/modules/client/front/mandate/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="Mandates"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="mandates"
     order="created DESC"
diff --git a/modules/client/front/mandate/index.js b/modules/client/front/mandate/index.js
index 607bb335b..640678e42 100644
--- a/modules/client/front/mandate/index.js
+++ b/modules/client/front/mandate/index.js
@@ -1,8 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams) {
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -21,7 +22,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientMandate', {
     template: require('./index.html'),
diff --git a/modules/client/front/note/create/index.js b/modules/client/front/note/create/index.js
index 75c7ebc80..108aba407 100644
--- a/modules/client/front/note/create/index.js
+++ b/modules/client/front/note/create/index.js
@@ -1,19 +1,19 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($state) {
-        this.$state = $state;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.note = {
-            clientFk: parseInt($state.params.id),
+            clientFk: parseInt(this.$params.id),
             text: null
         };
     }
 
     cancel() {
-        this.$state.go('client.card.note.index', {id: this.$state.params.id});
+        this.$state.go('client.card.note.index', {id: this.$params.id});
     }
 }
-Controller.$inject = ['$state'];
 
 ngModule.component('vnNoteCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/note/create/index.spec.js b/modules/client/front/note/create/index.spec.js
index 5ac62efa3..0dc515b1e 100644
--- a/modules/client/front/note/create/index.spec.js
+++ b/modules/client/front/note/create/index.spec.js
@@ -2,17 +2,16 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnNoteCreate', () => {
-        let $componentController;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, _$state_) => {
             $state = _$state_;
             $state.params.id = '1234';
-            controller = $componentController('vnNoteCreate', {$state: $state});
+            const $element = angular.element('<vn-note-create></vn-note-create>');
+            controller = $componentController('vnNoteCreate', {$element, $state});
         }));
 
         it('should define clientFk using $state.params.id', () => {
diff --git a/modules/client/front/note/index/index.html b/modules/client/front/note/index/index.html
index a77362ff6..634a9c3ce 100644
--- a/modules/client/front/note/index/index.html
+++ b/modules/client/front/note/index/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="clientObservations"
     filter="$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     data="notes"
     auto-load="true">
 </vn-crud-model>
@@ -24,7 +24,7 @@
     </vn-card>
 </vn-data-viewer>
 <a vn-tooltip="New note"
-    ui-sref="client.card.note.create({id: $ctrl.$stateParams.id})" 
+    ui-sref="client.card.note.create({id: $ctrl.$params.id})" 
     vn-bind="+" 
     fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
diff --git a/modules/client/front/note/index/index.js b/modules/client/front/note/index/index.js
index ef1f0d5fb..654c460e4 100644
--- a/modules/client/front/note/index/index.js
+++ b/modules/client/front/note/index/index.js
@@ -1,16 +1,17 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-export default class Controller {
-    constructor($stateParams) {
-        this.$stateParams = $stateParams;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             order: 'created DESC',
         };
     }
 }
 
-Controller.$inject = ['$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientNote', {
     template: require('./index.html'),
diff --git a/modules/client/front/postcode/index.js b/modules/client/front/postcode/index.js
index 836ea9a81..c05ea0518 100644
--- a/modules/client/front/postcode/index.js
+++ b/modules/client/front/postcode/index.js
@@ -3,14 +3,6 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $translate, vnApp) {
-        super($element, $scope);
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
     get townSelection() {
         return this._townSelection;
     }
@@ -54,8 +46,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$http', '$translate', 'vnApp'];
-
 ngModule.component('vnClientPostcode', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/postcode/index.spec.js b/modules/client/front/postcode/index.spec.js
index a5e5db9d5..2cefb6985 100644
--- a/modules/client/front/postcode/index.spec.js
+++ b/modules/client/front/postcode/index.spec.js
@@ -4,14 +4,15 @@ describe('Client', () => {
     describe('Component vnClientPostcode', () => {
         let controller;
         let $httpBackend;
-        let $element;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            $element = angular.element('<vn-dialog></vn-dialog>');
-            controller = $componentController('vnClientPostcode', {$element});
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-dialog></vn-dialog>');
+            controller = $componentController('vnClientPostcode', {$element, $scope});
             controller.client = {id: 101};
         }));
 
diff --git a/modules/client/front/recovery/create/index.js b/modules/client/front/recovery/create/index.js
index ee69e0861..aa378203b 100644
--- a/modules/client/front/recovery/create/index.js
+++ b/modules/client/front/recovery/create/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state, $filter) {
-        this.$ = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.recovery = {
             started: new Date()
         };
@@ -18,7 +18,7 @@ class Controller {
     }
 
     onSubmit() {
-        this.recovery.clientFk = this.$state.params.id;
+        this.recovery.clientFk = this.$params.id;
         this.$.watcher.submit().then(
             () => {
                 this.goToIndex();
@@ -26,7 +26,7 @@ class Controller {
         );
     }
 }
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientRecoveryCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/recovery/create/index.spec.js b/modules/client/front/recovery/create/index.spec.js
index cf28cee8d..d2635ee8d 100644
--- a/modules/client/front/recovery/create/index.spec.js
+++ b/modules/client/front/recovery/create/index.spec.js
@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientRecoveryCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientRecoveryCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-recovery-create></vn-client-recovery-create>');
+            controller = $componentController('vnClientRecoveryCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
diff --git a/modules/client/front/recovery/index/index.html b/modules/client/front/recovery/index/index.html
index d5c28dc88..214dff822 100644
--- a/modules/client/front/recovery/index/index.html
+++ b/modules/client/front/recovery/index/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="Recoveries"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="recoveries"
     order="started DESC"
diff --git a/modules/client/front/recovery/index/index.js b/modules/client/front/recovery/index/index.js
index b291ddc04..f82430982 100644
--- a/modules/client/front/recovery/index/index.js
+++ b/modules/client/front/recovery/index/index.js
@@ -1,24 +1,17 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams, $scope, $http) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-        this.$http = $http;
-    }
-
+class Controller extends Section {
     setFinished(recovery) {
         if (!recovery.finished) {
             let params = {finished: Date.now()};
             this.$http.patch(`Recoveries/${recovery.id}`, params).then(
-                () => this.$scope.model.refresh()
+                () => this.$.model.refresh()
             );
         }
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http'];
-
 ngModule.component('vnClientRecoveryIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/client/front/sample/create/index.js b/modules/client/front/sample/create/index.js
index f478243c7..bfb0fd287 100644
--- a/modules/client/front/sample/create/index.js
+++ b/modules/client/front/sample/create/index.js
@@ -1,16 +1,13 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
-    constructor($element, $, vnApp, $httpParamSerializer, vnConfig) {
+class Controller extends Section {
+    constructor($element, $) {
         super($element, $);
-        this.vnApp = vnApp;
-        this.$httpParamSerializer = $httpParamSerializer;
-        this.vnConfig = vnConfig;
         this.clientSample = {
             clientFk: this.$params.id,
-            companyId: vnConfig.companyFk
+            companyId: this.vnConfig.companyFk
         };
     }
 
@@ -82,12 +79,11 @@ class Controller extends Component {
 
         if (isPreview) params.isPreview = true;
 
-        const serializedParams = this.$httpParamSerializer(params);
-        const query = `email/${sampleType.code}?${serializedParams}`;
-        this.$http.get(query).then(cb);
+        const query = `email/${sampleType.code}`;
+        this.$http.get(query, {params}).then(cb);
     }
 }
-Controller.$inject = ['$element', '$scope', 'vnApp', '$httpParamSerializer', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientSampleCreate', {
     template: require('./index.html'),
diff --git a/modules/client/front/sample/index/index.html b/modules/client/front/sample/index/index.html
index 4825d4121..dfd662ba5 100644
--- a/modules/client/front/sample/index/index.html
+++ b/modules/client/front/sample/index/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientSamples"
     filter="::$ctrl.filter"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="samples"
     order="created DESC"
diff --git a/modules/client/front/sample/index/index.js b/modules/client/front/sample/index/index.js
index 4ce12e27c..48f9319ce 100644
--- a/modules/client/front/sample/index/index.js
+++ b/modules/client/front/sample/index/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -45,7 +45,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientSampleIndex', {
     template: require('./index.html'),
diff --git a/modules/client/front/sms/index.js b/modules/client/front/sms/index.js
index c7d89e717..3dfdda8a3 100644
--- a/modules/client/front/sms/index.js
+++ b/modules/client/front/sms/index.js
@@ -1,23 +1,14 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
-    constructor($element, $scope, $http, $translate, vnApp) {
-        super($element, $scope);
-
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Section {
     open() {
-        this.$scope.SMSDialog.show();
+        this.$.SMSDialog.show();
     }
 
     charactersRemaining() {
-        const element = this.$scope.message;
+        const element = this.$.message;
         const value = element.input.value;
 
         const maxLength = 160;
diff --git a/modules/client/front/sms/index.spec.js b/modules/client/front/sms/index.spec.js
index 3958aec3b..a7b4cd3df 100644
--- a/modules/client/front/sms/index.spec.js
+++ b/modules/client/front/sms/index.spec.js
@@ -15,7 +15,7 @@ describe('Client', () => {
             controller = $componentController('vnClientSms', {$element, $scope});
             controller.client = {id: 101};
             controller.$params = {id: 101};
-            controller.$scope.message = {
+            controller.$.message = {
                 input: {
                     value: 'My SMS'
                 }
@@ -59,7 +59,7 @@ describe('Client', () => {
 
         describe('charactersRemaining()', () => {
             it('should return the characters remaining in a element', () => {
-                controller.$scope.message = {
+                controller.$.message = {
                     input: {
                         value: 'My message 0€'
                     }
diff --git a/modules/client/front/summary/index.js b/modules/client/front/summary/index.js
index fdf0984b7..4dd299903 100644
--- a/modules/client/front/summary/index.js
+++ b/modules/client/front/summary/index.js
@@ -1,11 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http) {
-        this.$http = $http;
-    }
-
+class Controller extends Section {
     $onChanges() {
         if (!this.client)
             return;
@@ -41,8 +38,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http'];
-
 ngModule.component('vnClientSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/client/front/summary/index.spec.js b/modules/client/front/summary/index.spec.js
index 15607008a..1c747d25a 100644
--- a/modules/client/front/summary/index.spec.js
+++ b/modules/client/front/summary/index.spec.js
@@ -4,12 +4,15 @@ describe('Client', () => {
     describe('Component vnClientSummary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientSummary');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-client-summary></vn-client-summary>');
+            controller = $componentController('vnClientSummary', {$element, $scope});
             controller.client = {id: 101};
         }));
 
diff --git a/modules/client/front/web-access/index.js b/modules/client/front/web-access/index.js
index bdd5375a3..3f7f46f04 100644
--- a/modules/client/front/web-access/index.js
+++ b/modules/client/front/web-access/index.js
@@ -1,11 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $http, vnApp, $translate) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.canChangePassword = false;
         this.canEnableCheckBox = true;
     }
@@ -64,7 +62,7 @@ export default class Controller {
         return true;
     }
 }
-Controller.$inject = ['$scope', '$http', 'vnApp', '$translate'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientWebAccess', {
     template: require('./index.html'),
diff --git a/modules/client/front/web-access/index.spec.js b/modules/client/front/web-access/index.spec.js
index 319d1d1dc..0ed3345d1 100644
--- a/modules/client/front/web-access/index.spec.js
+++ b/modules/client/front/web-access/index.spec.js
@@ -13,7 +13,8 @@ describe('Component VnClientWebAccess', () => {
         $httpBackend = _$httpBackend_;
         vnApp = _vnApp_;
         jest.spyOn(vnApp, 'showError');
-        controller = $componentController('vnClientWebAccess', {$scope});
+        const $element = angular.element('<vn-client-web-access></vn-client-web-access>');
+        controller = $componentController('vnClientWebAccess', {$element, $scope});
     }));
 
     describe('$onChanges()', () => {
diff --git a/modules/client/front/web-payment/index.html b/modules/client/front/web-payment/index.html
index 110f4a2bf..ef0e568c5 100644
--- a/modules/client/front/web-payment/index.html
+++ b/modules/client/front/web-payment/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="clients/getTransactions"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     limit="20"
     data="transactions"
     order="created DESC"
diff --git a/modules/client/front/web-payment/index.js b/modules/client/front/web-payment/index.js
index 4c379dcad..c68abf49e 100644
--- a/modules/client/front/web-payment/index.js
+++ b/modules/client/front/web-payment/index.js
@@ -1,18 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $stateParams) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$stateParams = $stateParams;
-    }
-
+class Controller extends Section {
     confirm(transaction) {
         const path = 'Clients/confirmTransaction';
         let data = {id: transaction.id};
         this.$http.post(path, data).then(res => {
-            this.$scope.model.refresh();
+            this.$.model.refresh();
         });
     }
 
@@ -26,8 +21,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams'];
-
 ngModule.component('vnClientWebPayment', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/client/front/web-payment/index.spec.js b/modules/client/front/web-payment/index.spec.js
index dc2d40b1a..ee07f2fff 100644
--- a/modules/client/front/web-payment/index.spec.js
+++ b/modules/client/front/web-payment/index.spec.js
@@ -15,7 +15,8 @@ describe('Component vnClientWebPayment', () => {
         $httpBackend = _$httpBackend_;
         vnApp = _vnApp_;
         jest.spyOn(vnApp, 'showError');
-        controller = $componentController('vnClientWebPayment', {$scope: $scope});
+        const $element = angular.element('<vn-client-web-payment></vn-client-web-payment>');
+        controller = $componentController('vnClientWebPayment', {$element, $scope});
     }));
 
     describe('confirm()', () => {
diff --git a/modules/entry/front/buy/index.js b/modules/entry/front/buy/index.js
index bc8788239..674243eb1 100644
--- a/modules/entry/front/buy/index.js
+++ b/modules/entry/front/buy/index.js
@@ -1,17 +1,9 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
-
-class Controller extends Component {
-    constructor($element, $) {
-        super($element, $);
-    }
-}
-
-Controller.$inject = ['$element', '$scope'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnEntryBuy', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
     bindings: {
         entry: '<'
     }
diff --git a/modules/entry/front/index/index.js b/modules/entry/front/index/index.js
index 7368cc05e..ab0a901b7 100644
--- a/modules/entry/front/index/index.js
+++ b/modules/entry/front/index/index.js
@@ -1,10 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
-export default class Controller {
-    constructor($scope) {
-        this.$ = $scope;
-    }
-
+export default class Controller extends Section {
     showTravelDescriptor(event, travelFk) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -16,8 +13,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnEntryIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/entry/front/log/index.html b/modules/entry/front/log/index.html
index 4932965d1..fd8ae7c2a 100644
--- a/modules/entry/front/log/index.html
+++ b/modules/entry/front/log/index.html
@@ -1 +1 @@
-<vn-log url="EntryLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="EntryLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/entry/front/log/index.js b/modules/entry/front/log/index.js
index a5fb6c668..d045f2035 100644
--- a/modules/entry/front/log/index.js
+++ b/modules/entry/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnEntryLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/entry/front/summary/index.js b/modules/entry/front/summary/index.js
index 3b26907d7..94eaf1791 100644
--- a/modules/entry/front/summary/index.js
+++ b/modules/entry/front/summary/index.js
@@ -1,13 +1,8 @@
 import ngModule from '../module';
 import './style.scss';
-import Component from 'core/lib/component';
-
-class Controller extends Component {
-    constructor($element, $, $httpParamSerializer) {
-        super($element, $);
-        this.$httpParamSerializer = $httpParamSerializer;
-    }
+import Section from 'salix/components/section';
 
+class Controller extends Section {
     get entry() {
         return this._entry;
     }
@@ -26,8 +21,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$httpParamSerializer'];
-
 ngModule.component('vnEntrySummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/entry/front/summary/index.spec.js b/modules/entry/front/summary/index.spec.js
index 64952cec1..a59bb8009 100644
--- a/modules/entry/front/summary/index.spec.js
+++ b/modules/entry/front/summary/index.spec.js
@@ -4,7 +4,6 @@ describe('component vnEntrySummary', () => {
     let controller;
     let $httpBackend;
     let $scope;
-    let $element;
 
     beforeEach(angular.mock.module('entry', $translateProvider => {
         $translateProvider.translations('en', {});
@@ -13,7 +12,7 @@ describe('component vnEntrySummary', () => {
     beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
         $httpBackend = _$httpBackend_;
         $scope = $rootScope.$new();
-        $element = angular.element(`<vn-entry-summary></vn-entry-summary>`);
+        const $element = angular.element(`<vn-entry-summary></vn-entry-summary>`);
         controller = $componentController('vnEntrySummary', {$element, $scope});
     }));
 
diff --git a/modules/invoiceOut/front/descriptor-popover/index.js b/modules/invoiceOut/front/descriptor-popover/index.js
index 2e3fb15fd..c530bdd0f 100644
--- a/modules/invoiceOut/front/descriptor-popover/index.js
+++ b/modules/invoiceOut/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $,) {
+        super($element, $);
         this.worker = null;
         this._quicklinks = {};
     }
@@ -69,7 +66,6 @@ class Controller extends Component {
         });
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnInvoiceOutDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/invoiceOut/front/descriptor/index.js b/modules/invoiceOut/front/descriptor/index.js
index a69f6ed8b..fea3c8bad 100644
--- a/modules/invoiceOut/front/descriptor/index.js
+++ b/modules/invoiceOut/front/descriptor/index.js
@@ -1,14 +1,9 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($scope, vnToken, vnApp, $state, $translate, $http, aclService) {
-        this.$scope = $scope;
-        this.accessToken = vnToken.token;
-        this.vnApp = vnApp;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.$http = $http;
-        this.aclService = aclService;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.moreOptions = [
             {callback: this.showInvoiceOutPdf, name: 'Show invoice PDF'},
             {callback: this.showDeleteInvoiceOutDialog, name: 'Delete Invoice', acl: 'invoicing'},
@@ -22,7 +17,7 @@ class Controller {
 
             return !hasAclProperty || (hasAclProperty && this.aclService.hasAny([option.acl]));
         });
-        this.$scope.moreButton.data = options;
+        this.$.moreButton.data = options;
     }
 
     onMoreChange(callback) {
@@ -58,11 +53,11 @@ class Controller {
     }
 
     showDeleteInvoiceOutDialog() {
-        this.$scope.deleteConfirmation.show();
+        this.$.deleteConfirmation.show();
     }
 
     showBookInvoiceOutDialog() {
-        this.$scope.bookConfirmation.show();
+        this.$.bookConfirmation.show();
     }
 
     deleteInvoiceOut(response) {
@@ -94,8 +89,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', 'vnToken', 'vnApp', '$state', '$translate', '$http', 'aclService'];
-
 ngModule.component('vnInvoiceOutDescriptor', {
     template: require('./index.html'),
     bindings: {
diff --git a/modules/invoiceOut/front/index/index.js b/modules/invoiceOut/front/index/index.js
index 46ad6bc3f..d5c0fde3a 100644
--- a/modules/invoiceOut/front/index/index.js
+++ b/modules/invoiceOut/front/index/index.js
@@ -1,12 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, vnToken) {
-        this.accessToken = vnToken.token;
-        this.$ = $scope;
-        this.selectedInvoiceOut = null;
-    }
-
+export default class Controller extends Section {
     showClientDescriptor(event, clientFk) {
         this.$.clientDescriptor.clientFk = clientFk;
         this.$.clientDescriptor.parent = event.target;
@@ -27,15 +22,13 @@ export default class Controller {
     }
 
     openPdf(id, event) {
-        let url = `api/InvoiceOuts/${id}/download?access_token=${this.accessToken}`;
+        let url = `api/InvoiceOuts/${id}/download?access_token=${this.vnToken.token}`;
         window.open(url, '_blank');
         event.preventDefault();
         event.stopImmediatePropagation();
     }
 }
 
-Controller.$inject = ['$scope', 'vnToken'];
-
 ngModule.component('vnInvoiceOutIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/invoiceOut/front/summary/index.js b/modules/invoiceOut/front/summary/index.js
index 0596c616f..7b9bb9efd 100644
--- a/modules/invoiceOut/front/summary/index.js
+++ b/modules/invoiceOut/front/summary/index.js
@@ -1,13 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, vnToken) {
-        this.accessToken = vnToken.token;
-        this.$http = $http;
-        this.$ = $scope;
-    }
-
+class Controller extends Section {
     set invoiceOut(value) {
         this._invoiceOut = value;
         if (value && value.id)
@@ -45,8 +40,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', 'vnToken'];
-
 ngModule.component('vnInvoiceOutSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/invoiceOut/front/summary/index.spec.js b/modules/invoiceOut/front/summary/index.spec.js
index f6ab4cb91..ac6c40bcf 100644
--- a/modules/invoiceOut/front/summary/index.spec.js
+++ b/modules/invoiceOut/front/summary/index.spec.js
@@ -4,12 +4,15 @@ describe('InvoiceOut', () => {
     describe('Component summary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('invoiceOut'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnInvoiceOutSummary');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-invoice-out-summary></vn-invoice-out-summary>');
+            controller = $componentController('vnInvoiceOutSummary', {$element, $scope});
             controller.invoiceOut = {id: 1};
         }));
 
diff --git a/modules/item/front/barcode/index.html b/modules/item/front/barcode/index.html
index dba745d28..ade4c2f7d 100644
--- a/modules/item/front/barcode/index.html
+++ b/modules/item/front/barcode/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ItemBarcodes"
     fields="['id', 'itemFk', 'code']"
-    link="{itemFk: $ctrl.$stateParams.id}"
+    link="{itemFk: $ctrl.$params.id}"
     data="barcodes"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/item/front/barcode/index.js b/modules/item/front/barcode/index.js
index 4096ab7eb..d9e17a42a 100644
--- a/modules/item/front/barcode/index.js
+++ b/modules/item/front/barcode/index.js
@@ -1,22 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($stateParams, $scope) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-    }
-
+export default class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope'];
-
 ngModule.component('vnItemBarcode', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/item/front/basic-data/index.js b/modules/item/front/basic-data/index.js
index 33a60b32d..fb80c5178 100644
--- a/modules/item/front/basic-data/index.js
+++ b/modules/item/front/basic-data/index.js
@@ -1,6 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
-class Controller extends Component {
+import Section from 'salix/components/section';
+
+class Controller extends Section {
     showIntrastat(event) {
         if (event.defaultPrevented) return;
         event.preventDefault();
diff --git a/modules/item/front/basic-data/index.spec.js b/modules/item/front/basic-data/index.spec.js
index 178fac278..fd7be5d93 100644
--- a/modules/item/front/basic-data/index.spec.js
+++ b/modules/item/front/basic-data/index.spec.js
@@ -5,14 +5,13 @@ describe('vnItemBasicData', () => {
         let $httpBackend;
         let $scope;
         let controller;
-        let $element;
 
         beforeEach(ngModule('item'));
 
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            $element = angular.element('<vn-item-basic-data></vn-item-basic-data>');
+            const $element = angular.element('<vn-item-basic-data></vn-item-basic-data>');
             controller = $componentController('vnItemBasicData', {$element, $scope});
             controller.$.watcher = {};
             controller.$params.id = 1;
diff --git a/modules/item/front/botanical/index.js b/modules/item/front/botanical/index.js
index 51161d53a..03c62a0e3 100644
--- a/modules/item/front/botanical/index.js
+++ b/modules/item/front/botanical/index.js
@@ -1,17 +1,17 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($http, $state) {
-        this.$http = $http;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.botanical = {
-            itemFk: this.$state.params.id
+            itemFk: this.$params.id
         };
     }
 
     _getBotanical() {
         let filter = {
-            where: {itemFk: this.$state.params.id},
+            where: {itemFk: this.$params.id},
             include: [{relation: 'genus'}, {relation: 'specie'}]
         };
         this.$http.get(`ItemBotanicals?filter=${JSON.stringify(filter)}`)
@@ -26,8 +26,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$state'];
-
 ngModule.component('vnItemBotanical', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/item/front/botanical/index.spec.js b/modules/item/front/botanical/index.spec.js
index f4b6fa3c2..1cf79bbb3 100644
--- a/modules/item/front/botanical/index.spec.js
+++ b/modules/item/front/botanical/index.spec.js
@@ -3,19 +3,17 @@ import './index.js';
 describe('ItemBotanical', () => {
     describe('Component vnItemBotanical', () => {
         let $httpBackend;
-        let $state;
+        let $scope;
         let controller;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            $state = {
-                params: {
-                    id: 123
-                }
-            };
-            controller = $componentController('vnItemBotanical', {$state});
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-item-botanical></vn-item-botanical>');
+            controller = $componentController('vnItemBotanical', {$element, $scope});
+            controller.$params = {id: 123};
         }));
 
         describe('_getBotanical()', () => {
diff --git a/modules/item/front/create/index.js b/modules/item/front/create/index.js
index 646baa8cd..ab51b0734 100644
--- a/modules/item/front/create/index.js
+++ b/modules/item/front/create/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state) {
-        this.$ = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.item = {
             relevancy: 0
         };
@@ -16,7 +16,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemCreate', {
     template: require('./index.html'),
diff --git a/modules/item/front/create/index.spec.js b/modules/item/front/create/index.spec.js
index cd5197305..518d5f78b 100644
--- a/modules/item/front/create/index.spec.js
+++ b/modules/item/front/create/index.spec.js
@@ -2,15 +2,13 @@ import './index.js';
 
 describe('Item', () => {
     describe('Component vnItemCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Item', () => {
                     };
                 }
             };
-            controller = $componentController('vnItemCreate', {$scope: $scope});
+            const $element = angular.element('<vn-item-create></vn-item-create>');
+            controller = $componentController('vnItemCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
diff --git a/modules/item/front/descriptor-popover/index.js b/modules/item/front/descriptor-popover/index.js
index 42886fd58..c7a62baae 100644
--- a/modules/item/front/descriptor-popover/index.js
+++ b/modules/item/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.item = null;
         this._quicklinks = {};
     }
@@ -68,7 +65,7 @@ class Controller extends Component {
         );
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/item/front/descriptor-popover/index.spec.js b/modules/item/front/descriptor-popover/index.spec.js
index eb09bf7d9..dfc673b0b 100644
--- a/modules/item/front/descriptor-popover/index.spec.js
+++ b/modules/item/front/descriptor-popover/index.spec.js
@@ -5,7 +5,6 @@ describe('Item', () => {
         let $httpBackend;
         let $scope;
         let controller;
-        let $element;
         let $timeout;
 
         beforeEach(ngModule('item'));
@@ -13,10 +12,10 @@ describe('Item', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$timeout_) => {
             $httpBackend = _$httpBackend_;
             $timeout = _$timeout_;
-            $element = angular.element(`<div></div>`);
             $scope = $rootScope.$new();
             $scope.popover = {relocate: () => {}, show: () => {}};
-            controller = $componentController('vnItemDescriptorPopover', {$scope, $element});
+            const $element = angular.element('<vn-item-descriptor-popover></vn-item-descriptor-popover>');
+            controller = $componentController('vnItemDescriptorPopover', {$element, $scope});
         }));
 
         describe('itemFk()', () => {
diff --git a/modules/item/front/descriptor/index.js b/modules/item/front/descriptor/index.js
index c4e66dfe3..e04fdb595 100644
--- a/modules/item/front/descriptor/index.js
+++ b/modules/item/front/descriptor/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
-class Controller {
-    constructor($state, $scope, $http, vnApp, $translate, vnConfig) {
-        this.$state = $state;
-        this.$scope = $scope;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.vnConfig = vnConfig;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.moreOptions = [
             {callback: this.showRegularizeDialog, name: 'Regularize stock'}
         ];
@@ -64,7 +60,7 @@ class Controller {
     }
 
     showRegularizeDialog() {
-        this.$scope.regularize.show();
+        this.$.regularize.show();
     }
 
     set quicklinks(value = {}) {
@@ -94,7 +90,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', '$http', 'vnApp', '$translate', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemDescriptor', {
     template: require('./index.html'),
diff --git a/modules/item/front/diary/index.js b/modules/item/front/diary/index.js
index 6d9f80641..e77ad1c2c 100644
--- a/modules/item/front/diary/index.js
+++ b/modules/item/front/diary/index.js
@@ -1,16 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $state, $window, $translate, $stateParams) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$stateParams = $stateParams;
-        this.$window = $window;
-        this.$translate = $translate;
-    }
-
+class Controller extends Section {
     get item() {
         return this._item;
     }
@@ -19,17 +11,17 @@ class Controller {
         this._item = value;
 
         this.filter = {
-            where: {itemFk: this.$stateParams.id}
+            where: {itemFk: this.$params.id}
         };
 
-        this.$scope.$applyAsync(() => {
-            if (this.$stateParams.warehouseFk)
-                this.warehouseFk = this.$stateParams.warehouseFk;
+        this.$.$applyAsync(() => {
+            if (this.$params.warehouseFk)
+                this.warehouseFk = this.$params.warehouseFk;
             else if (value)
                 this.warehouseFk = value.itemType.warehouseFk;
 
-            if (this.$stateParams.ticketFk)
-                this.ticketFk = this.$stateParams.ticketFk;
+            if (this.$params.ticketFk)
+                this.ticketFk = this.$params.ticketFk;
         });
     }
 
@@ -42,7 +34,7 @@ class Controller {
             });
 
             this.filter.where.warehouseFk = value;
-            this.$scope.model.refresh();
+            this.$.model.refresh();
         }
     }
 
@@ -51,27 +43,25 @@ class Controller {
     }
 
     get freeLineIndex() {
-        let lines = this.$scope.model.data;
+        let lines = this.$.model.data;
         let minDate = new Date();
         minDate.setHours(0, 0, 0, 0);
 
         let maxDate = new Date();
         maxDate.setHours(23, 59, 59, 59);
 
-
         for (let i = 0; i < lines.length; i++) {
             const dated = new Date(lines[i].date);
 
             let isForFuture = dated > maxDate;
             let isForToday = (dated >= minDate && dated <= maxDate);
-
             if (isForFuture || isForToday)
                 return i;
         }
     }
 
     get onPreparationLineIndex() {
-        let lines = this.$scope.model.data;
+        let lines = this.$.model.data;
         for (let i = this.freeLineIndex; i >= 0; i--) {
             let line = lines[i];
 
@@ -87,7 +77,7 @@ class Controller {
     }
 
     get givenTicketIndex() {
-        let lines = this.$scope.model.data;
+        let lines = this.$.model.data;
 
         for (let i = lines.length - 1; i > 0; i--) {
             let line = lines[i];
@@ -102,15 +92,12 @@ class Controller {
         let selectedTicketLineIndex = this.givenTicketIndex;
         let lineIndex = this.onPreparationLineIndex;
 
-
         let lines = body.querySelector('vn-tbody').children;
 
         if (lineIndex == undefined || !lines.length) return;
 
-
         let onPreparationLine = lines[lineIndex];
 
-
         let balance = onPreparationLine.querySelector('.balanceSpan');
         balance.classList.add('message');
         balance.title = this.$translate.instant('Visible quantity');
@@ -150,9 +137,9 @@ class Controller {
     showDescriptor(event, sale) {
         if (!sale.isTicket) return;
 
-        this.$scope.descriptor.ticketFk = sale.origin;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.ticketFk = sale.origin;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
 
         event.preventDefault();
     }
@@ -160,20 +147,18 @@ class Controller {
     showClientDescriptor(event, sale) {
         if (!sale.isTicket) return;
 
-        this.$scope.clientDescriptor.clientFk = sale.clientFk;
-        this.$scope.clientDescriptor.parent = event.target;
-        this.$scope.clientDescriptor.show();
+        this.$.clientDescriptor.clientFk = sale.clientFk;
+        this.$.clientDescriptor.parent = event.target;
+        this.$.clientDescriptor.show();
 
         event.preventDefault();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$window', '$translate', '$stateParams'];
-
 ngModule.component('vnItemDiary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/item/front/diary/index.spec.js b/modules/item/front/diary/index.spec.js
index 9e7f0cf0c..94458a569 100644
--- a/modules/item/front/diary/index.spec.js
+++ b/modules/item/front/diary/index.spec.js
@@ -3,18 +3,17 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Item', () => {
     describe('Component vnItemDiary', () => {
-        let $stateParams;
         let $scope;
         let controller;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject(($componentController, $rootScope, _$stateParams_) => {
-            $stateParams = _$stateParams_;
-            $stateParams.id = 1;
+        beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             $scope = $rootScope.$new();
-            controller = $componentController('vnItemDiary', {$scope, $stateParams});
-            controller.$scope.model = crudModel;
+            const $element = angular.element('<vn-item-diary></vn-item-diary>');
+            controller = $componentController('vnItemDiary', {$element, $scope});
+            controller.$.model = crudModel;
+            controller.$params = {id: 1};
         }));
 
         describe('isToday()', () => {
@@ -40,7 +39,7 @@ describe('Item', () => {
                 let currentDate = new Date();
                 currentDate.setDate(currentDate.getDate() + 1);
 
-                controller.$scope.model = {data: [
+                controller.$.model = {data: [
                     {name: 'My item 1', alertLevel: 3, date: '2018-05-02'},
                     {name: 'My item 2', alertLevel: 1, date: '2018-05-03'},
                     {name: 'My item 3', alertLevel: 0, date: currentDate}]
@@ -55,7 +54,7 @@ describe('Item', () => {
             it(`should call onPreparationLineIndex() and return an index from line with alertLevel 1 and isPicked true`, () => {
                 let currentDate = new Date();
                 currentDate.setDate(currentDate.getDate() + 1);
-                controller.$scope.model = {data: [
+                controller.$.model = {data: [
                     {name: 'My item 1', alertLevel: 3, isPicked: true, date: currentDate},
                     {name: 'My item 3', alertLevel: 1, isPicked: true, date: currentDate},
                     {name: 'My item 4', alertLevel: 1, isPicked: false, date: currentDate},
@@ -69,10 +68,10 @@ describe('Item', () => {
 
         describe('set item()', () => {
             it('should set warehouseFk property based on itemType warehouseFk', () => {
-                jest.spyOn(controller.$scope, '$applyAsync');
+                jest.spyOn(controller.$, '$applyAsync');
                 controller.item = {id: 1, itemType: {warehouseFk: 1}};
 
-                expect(controller.$scope.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
+                expect(controller.$.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
                 $scope.$apply();
 
                 expect(controller.warehouseFk).toEqual(1);
@@ -80,11 +79,11 @@ describe('Item', () => {
             });
 
             it(`should set warehouseFk property based on url query warehouseFk`, () => {
-                jest.spyOn(controller.$scope, '$applyAsync');
-                controller.$stateParams.warehouseFk = 4;
+                jest.spyOn(controller.$, '$applyAsync');
+                controller.$params.warehouseFk = 4;
                 controller.item = {id: 1, itemType: {warehouseFk: 1}};
 
-                expect(controller.$scope.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
+                expect(controller.$.$applyAsync).toHaveBeenCalledWith(jasmine.any(Function));
                 $scope.$apply();
 
                 expect(controller.warehouseFk).toEqual(4);
@@ -94,7 +93,7 @@ describe('Item', () => {
 
         describe('givenTicketIndex() setter', () => {
             it(`should return the index position of the line of a given ticket fk`, () => {
-                controller.$scope.model = {data: [
+                controller.$.model = {data: [
                     {name: 'My item 1', origin: 1, alertLevel: 3, isPicked: true, date: '2018-05-02'},
                     {name: 'My item 3', origin: 2, alertLevel: 1, isPicked: true, date: '2018-05-03'},
                     {name: 'My item 4', origin: 3, alertLevel: 1, isPicked: false, date: '2018-05-03'}]
@@ -103,7 +102,7 @@ describe('Item', () => {
 
                 let index = controller.givenTicketIndex;
 
-                expect(controller.$scope.model.data[index].origin).toEqual(2);
+                expect(controller.$.model.data[index].origin).toEqual(2);
             });
         });
     });
diff --git a/modules/item/front/fetched-tags/index.js b/modules/item/front/fetched-tags/index.js
index b88e853b4..9140abcf4 100644
--- a/modules/item/front/fetched-tags/index.js
+++ b/modules/item/front/fetched-tags/index.js
@@ -1,8 +1,10 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
 ngModule.component('vnFetchedTags', {
     template: require('./index.html'),
+    controller: Component,
     bindings: {
         maxLength: '<',
         item: '<',
diff --git a/modules/item/front/index/index.js b/modules/item/front/index/index.js
index 968c7b027..ad978e0aa 100644
--- a/modules/item/front/index/index.js
+++ b/modules/item/front/index/index.js
@@ -1,15 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http, $state, $scope, aclService) {
-        this.aclService = aclService;
-        this.$http = $http;
-        this.$state = $state;
-        this.$ = $scope;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.itemSelected = null;
         this.imagesPath = '//verdnatura.es/vn-image-data/catalog';
-
         this.showFields = {
             id: false,
             actions: false
@@ -33,7 +30,7 @@ class Controller {
     }
 
     showWorkerDescriptor(event, workerFk) {
-        if (event.defaultPrevented) return;
+        if (event.defaltPrevented) return;
 
         event.preventDefault();
         event.stopPropagation();
@@ -67,7 +64,8 @@ class Controller {
         this.$.preview.show();
     }
 }
-Controller.$inject = ['$http', '$state', '$scope', 'aclService'];
+
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemIndex', {
     template: require('./index.html'),
diff --git a/modules/item/front/index/index.spec.js b/modules/item/front/index/index.spec.js
index aa8523b79..de07cd04d 100644
--- a/modules/item/front/index/index.spec.js
+++ b/modules/item/front/index/index.spec.js
@@ -2,16 +2,17 @@ import './index.js';
 
 describe('Item', () => {
     describe('Component vnItemIndex', () => {
-        let $state;
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_) => {
-            $state = _$state_;
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnItemIndex', {$state});
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-item-index></vn-item-index>');
+            controller = $componentController('vnItemIndex', {$element, $scope});
         }));
 
         describe('onCloneAccept()', () => {
diff --git a/modules/item/front/last-entries/index.js b/modules/item/front/last-entries/index.js
index 3ef89f086..752f1b035 100644
--- a/modules/item/front/last-entries/index.js
+++ b/modules/item/front/last-entries/index.js
@@ -1,10 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
 
         let defaultDate = new Date();
         defaultDate.setDate(defaultDate.getDate() - 75);
@@ -12,7 +12,7 @@ class Controller {
 
         this.filter = {
             where: {
-                itemFk: $stateParams.id,
+                itemFk: this.$params.id,
                 date: defaultDate
             }
         };
@@ -25,7 +25,7 @@ class Controller {
         if (!value) return;
 
         this.filter.where.date = value;
-        this.$scope.model.refresh();
+        this.$.model.refresh();
     }
 
     get date() {
@@ -33,7 +33,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnItemLastEntries', {
     template: require('./index.html'),
diff --git a/modules/item/front/log/index.html b/modules/item/front/log/index.html
index 3a6bb92ad..280a2b839 100644
--- a/modules/item/front/log/index.html
+++ b/modules/item/front/log/index.html
@@ -1 +1 @@
-<vn-log url="ItemLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="ItemLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/item/front/log/index.js b/modules/item/front/log/index.js
index 9253147c7..4433b2460 100644
--- a/modules/item/front/log/index.js
+++ b/modules/item/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnItemLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/item/front/niche/index.html b/modules/item/front/niche/index.html
index 70dabe671..572d81a2e 100644
--- a/modules/item/front/niche/index.html
+++ b/modules/item/front/niche/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ItemNiches"
     fields="['id', 'itemFk', 'warehouseFk', 'code']"
-    link="{itemFk: $ctrl.$stateParams.id}"
+    link="{itemFk: $ctrl.$params.id}"
     data="niches"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/item/front/niche/index.js b/modules/item/front/niche/index.js
index 5d2442c58..f4e7cd0be 100644
--- a/modules/item/front/niche/index.js
+++ b/modules/item/front/niche/index.js
@@ -1,22 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($stateParams, $scope) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-    }
-
+export default class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope'];
-
 ngModule.component('vnItemNiche', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/item/front/request/index.spec.js b/modules/item/front/request/index.spec.js
index c988627ea..042b20996 100644
--- a/modules/item/front/request/index.spec.js
+++ b/modules/item/front/request/index.spec.js
@@ -4,7 +4,6 @@ import crudModel from 'core/mocks/crud-model';
 describe('Item', () => {
     describe('Component vnItemRequest', () => {
         let $scope;
-        let $element;
         let controller;
         let $httpBackend;
 
@@ -15,7 +14,7 @@ describe('Item', () => {
             $scope = $rootScope.$new();
             $scope.model = crudModel;
             $scope.denyReason = {hide: () => {}};
-            $element = angular.element('<vn-item-request></vn-item-request>');
+            const $element = angular.element('<vn-item-request></vn-item-request>');
             controller = $componentController('vnItemRequest', {$element, $scope});
         }));
 
diff --git a/modules/item/front/summary/index.js b/modules/item/front/summary/index.js
index 7e12abda0..d38f1f29a 100644
--- a/modules/item/front/summary/index.js
+++ b/modules/item/front/summary/index.js
@@ -1,11 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http) {
-        this.$http = $http;
-    }
-
+class Controller extends Section {
     getSummary() {
         this.$http.get(`Items/${this.item.id}/getSummary`).then(response => {
             this.summary = response.data;
@@ -18,8 +15,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http'];
-
 ngModule.component('vnItemSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/item/front/summary/index.spec.js b/modules/item/front/summary/index.spec.js
index 8058ece10..069c24512 100644
--- a/modules/item/front/summary/index.spec.js
+++ b/modules/item/front/summary/index.spec.js
@@ -4,12 +4,15 @@ describe('Item', () => {
     describe('Component summary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('item'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnItemSummary');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-item-summary></vn-item-summary>');
+            controller = $componentController('vnItemSummary', {$element, $scope});
             controller.item = {id: 1};
         }));
 
diff --git a/modules/item/front/tags/index.html b/modules/item/front/tags/index.html
index 834d4c977..888efd8d0 100644
--- a/modules/item/front/tags/index.html
+++ b/modules/item/front/tags/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="ItemTags"
     fields="['id', 'itemFk', 'tagFk', 'value', 'priority']"
-    link="{itemFk: $ctrl.$stateParams.id}"
+    link="{itemFk: $ctrl.$params.id}"
     include="$ctrl.include"
     order="priority ASC"
     data="$ctrl.itemTags"
diff --git a/modules/item/front/tags/index.js b/modules/item/front/tags/index.js
index c12e1b9b5..8737aeed4 100644
--- a/modules/item/front/tags/index.js
+++ b/modules/item/front/tags/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams, $scope) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.include = {
             relation: 'tag',
             scope: {
@@ -47,15 +47,15 @@ class Controller {
     }
 
     add() {
-        this.$scope.model.insert({
-            itemFk: this.$stateParams.id,
+        this.$.model.insert({
+            itemFk: this.$params.id,
             priority: this.getHighestPriority()
         });
     }
 
     getHighestPriority() {
         let max = 0;
-        this.$scope.model.data.forEach(tag => {
+        this.$.model.data.forEach(tag => {
             if (tag.priority > max)
                 max = tag.priority;
         });
@@ -63,17 +63,15 @@ class Controller {
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.watcher.updateOriginalData();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
             this.card.reload();
         });
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope'];
-
 ngModule.component('vnItemTags', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/item/front/tags/index.spec.js b/modules/item/front/tags/index.spec.js
index a59f0b6e0..10128e4f0 100644
--- a/modules/item/front/tags/index.spec.js
+++ b/modules/item/front/tags/index.spec.js
@@ -12,7 +12,8 @@ describe('Item', () => {
             $scope = $rootScope.$new();
             $scope.model = crudModel;
             $scope.model.data = [{priority: 1}, {priority: 2}, {priority: 1}];
-            controller = $componentController('vnItemTags', {$scope});
+            const $element = angular.element('<vn-item-tags></vn-item-tags>');
+            controller = $componentController('vnItemTags', {$element, $scope});
         }));
 
         describe('itemTags setter', () => {
diff --git a/modules/item/front/tax/index.js b/modules/item/front/tax/index.js
index e0c2428de..251e0802d 100644
--- a/modules/item/front/tax/index.js
+++ b/modules/item/front/tax/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($stateParams, $http, $translate, $scope) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$stateParams = $stateParams;
-        this._ = $translate;
-    }
-
+export default class Controller extends Section {
     $onInit() {
         this.getTaxes();
     }
@@ -21,7 +15,7 @@ export default class Controller {
             }]
         };
 
-        let url = `Items/${this.$stateParams.id}/taxes`;
+        let url = `Items/${this.$params.id}/taxes`;
         this.$http.get(url, {params: {filter}}).then(json => {
             this.taxes = json.data;
         });
@@ -41,8 +35,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$http', '$translate', '$scope'];
-
 ngModule.component('vnItemTax', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/item/front/waste/index.js b/modules/item/front/waste/index.js
index 9344c2222..d1a10fbf4 100644
--- a/modules/item/front/waste/index.js
+++ b/modules/item/front/waste/index.js
@@ -1,8 +1,8 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
 ngModule.component('vnItemWaste', {
     template: require('./index.html'),
-    controller: Component
+    controller: Section
 });
diff --git a/modules/order/front/basic-data/index.js b/modules/order/front/basic-data/index.js
index 81aef8304..d1f1fc225 100644
--- a/modules/order/front/basic-data/index.js
+++ b/modules/order/front/basic-data/index.js
@@ -1,18 +1,20 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope) {
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         let isDirty = false;
-        $scope.$watch('$ctrl.selection', newValue => {
+        this.$.$watch('$ctrl.selection', newValue => {
             if (newValue) {
-                $scope.addressModel.where = {clientFk: newValue.id};
-                $scope.addressModel.refresh();
+                this.$.addressModel.where = {clientFk: newValue.id};
+                this.$.addressModel.refresh();
                 if (isDirty)
                     this.order.addressFk = newValue.defaultAddressFk;
                 isDirty = true;
             } else {
-                $scope.addressModel.clear();
+                this.$.addressModel.clear();
                 if (isDirty)
                     this.order.addressFk = null;
             }
@@ -20,8 +22,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnOrderBasicData', {
     controller: Controller,
     template: require('./index.html'),
diff --git a/modules/order/front/catalog-view/index.js b/modules/order/front/catalog-view/index.js
index fe1f1c712..838da05ea 100644
--- a/modules/order/front/catalog-view/index.js
+++ b/modules/order/front/catalog-view/index.js
@@ -2,7 +2,6 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 import './style.scss';
 
-
 class Controller extends Component {
     preview(event, item) {
         event.preventDefault();
diff --git a/modules/order/front/catalog/index.html b/modules/order/front/catalog/index.html
index 06ccfb1dd..f9c2c40bd 100644
--- a/modules/order/front/catalog/index.html
+++ b/modules/order/front/catalog/index.html
@@ -7,7 +7,7 @@
 <vn-crud-model
     vn-id="model"
     url="Orders/CatalogFilter"
-    params="{orderFk: $ctrl.$state.params.id}"
+    params="{orderFk: $ctrl.$params.id}"
     limit="50"
     data="$ctrl.items">
 </vn-crud-model>
diff --git a/modules/order/front/catalog/index.js b/modules/order/front/catalog/index.js
index 00913caa4..69a0429ca 100644
--- a/modules/order/front/catalog/index.js
+++ b/modules/order/front/catalog/index.js
@@ -3,9 +3,8 @@ import Section from 'salix/components/section';
 import './style.scss';
 
 class Controller extends Section {
-    constructor($element, $, $transitions) {
+    constructor($element, $) {
         super($element, $);
-        this.$transitions = $transitions;
         this.itemTypes = [];
         this._tags = [];
 
@@ -345,8 +344,6 @@ class Controller extends Section {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$transitions'];
-
 ngModule.component('vnOrderCatalog', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/order/front/catalog/index.spec.js b/modules/order/front/catalog/index.spec.js
index 9a9742f7f..f7635665a 100644
--- a/modules/order/front/catalog/index.spec.js
+++ b/modules/order/front/catalog/index.spec.js
@@ -19,7 +19,7 @@ describe('Order', () => {
             $state = _$state_;
             $state.current.name = 'my.current.state';
             const $element = angular.element('<vn-order-catalog></vn-order-catalog>');
-            controller = $componentController('vnOrderCatalog', {$element, $scope, $state});
+            controller = $componentController('vnOrderCatalog', {$element, $scope});
             controller._order = {id: 4};
             controller.$params = {
                 categoryId: 1,
diff --git a/modules/order/front/create/card.js b/modules/order/front/create/card.js
index 7f1bb6133..158ad9a10 100644
--- a/modules/order/front/create/card.js
+++ b/modules/order/front/create/card.js
@@ -1,19 +1,16 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($http, vnApp, $translate, $state, $stateParams) {
-        this.$stateParams = $stateParams;
-        this.$http = $http;
-        this.translate = $translate;
-        this.vnApp = vnApp;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.order = {};
-        this.$state = $state;
-        this.clientFk = $stateParams.clientFk;
+        this.clientFk = this.$params.clientFk;
     }
 
     $onInit() {
-        if (this.$stateParams && this.$stateParams.clientFk)
-            this.clientFk = this.$stateParams.clientFk;
+        if (this.$params && this.$params.clientFk)
+            this.clientFk = this.$params.clientFk;
     }
 
     set order(value) {
@@ -102,14 +99,12 @@ class Controller {
             agencyModeId: this.order.agencyModeFk
         };
         this.$http.post(`Orders/new`, params).then(res => {
-            this.vnApp.showSuccess(this.translate.instant('Data saved!'));
+            this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
             this.$state.go('order.card.catalog', {id: res.data});
         });
     }
 }
 
-Controller.$inject = ['$http', 'vnApp', '$translate', '$state', '$stateParams'];
-
 ngModule.component('vnOrderCreateCard', {
     template: require('./card.html'),
     controller: Controller,
diff --git a/modules/order/front/create/card.spec.js b/modules/order/front/create/card.spec.js
index ef2bba529..f8f0653a7 100644
--- a/modules/order/front/create/card.spec.js
+++ b/modules/order/front/create/card.spec.js
@@ -4,12 +4,15 @@ describe('Order', () => {
     describe('Component vnOrderCreateCard', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('order'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, _vnApp_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, _vnApp_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnOrderCreateCard');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-order-create-card></vn-order-create-card>');
+            controller = $componentController('vnOrderCreateCard', {$element, $scope});
             controller.item = {id: 3};
         }));
 
diff --git a/modules/order/front/create/index.js b/modules/order/front/create/index.js
index 9c8d7ce6b..5c02e8225 100644
--- a/modules/order/front/create/index.js
+++ b/modules/order/front/create/index.js
@@ -1,18 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     async onSubmit() {
         let newOrderID = await this.$.card.createOrder();
         this.$state.go('order.card.summary', {id: newOrderID});
     }
 }
-Controller.$inject = ['$scope', '$http', '$state'];
 
 ngModule.component('vnOrderCreate', {
     template: require('./index.html'),
diff --git a/modules/order/front/create/index.spec.js b/modules/order/front/create/index.spec.js
index 80a8341ec..82834a987 100644
--- a/modules/order/front/create/index.spec.js
+++ b/modules/order/front/create/index.spec.js
@@ -10,7 +10,8 @@ describe('Order', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.card = {createOrder: () => {}};
-            controller = $componentController('vnOrderCreate', {$scope});
+            const $element = angular.element('<vn-order-create></vn-order-create>');
+            controller = $componentController('vnOrderCreate', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
diff --git a/modules/order/front/descriptor/index.js b/modules/order/front/descriptor/index.js
index 0d8a1e14a..b9d1e7973 100644
--- a/modules/order/front/descriptor/index.js
+++ b/modules/order/front/descriptor/index.js
@@ -1,12 +1,9 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($translate, $scope, vnApp, $http, $state) {
-        this.$state = $state;
-        this.$scope = $scope;
-        this.vnApp = vnApp;
-        this.$http = $http;
-        this.$translate = $translate;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.moreOptions = [
             {name: 'Delete order', callback: () => this.showDeleteOrderDialog()}
         ];
@@ -55,12 +52,10 @@ class Controller {
     }
 
     showDeleteOrderDialog() {
-        this.$scope.deleteOrderConfirmation.show();
+        this.$.deleteOrderConfirmation.show();
     }
 }
 
-Controller.$inject = ['$translate', '$scope', 'vnApp', '$http', '$state'];
-
 ngModule.component('vnOrderDescriptor', {
     template: require('./index.html'),
     bindings: {
diff --git a/modules/order/front/descriptor/index.spec.js b/modules/order/front/descriptor/index.spec.js
index 924ea4a97..5bb2ac087 100644
--- a/modules/order/front/descriptor/index.spec.js
+++ b/modules/order/front/descriptor/index.spec.js
@@ -2,13 +2,16 @@ import './index.js';
 
 describe('Order Component vnOrderDescriptor', () => {
     let $httpBackend;
+    let $scope;
     let controller;
 
-        beforeEach(ngModule('order'));
+    beforeEach(ngModule('order'));
 
-    beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+    beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
         $httpBackend = _$httpBackend_;
-        controller = $componentController('vnOrderDescriptor');
+        $scope = $rootScope.$new();
+        const $element = angular.element('<vn-order-descriptor></vn-order-descriptor>');
+        controller = $componentController('vnOrderDescriptor', {$element, $scope});
         controller.order = {id: 1};
     }));
 
diff --git a/modules/order/front/index/index.js b/modules/order/front/index/index.js
index 10940eb27..99f00733e 100644
--- a/modules/order/front/index/index.js
+++ b/modules/order/front/index/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state, $stateParams) {
-        this.$stateParams = $stateParams;
-        this.$state = $state;
-        this.$ = $scope;
-        this.ticketSelected = null;
-    }
-
+export default class Controller extends Section {
     showClientDescriptor(event, clientFk) {
         this.$.clientDescriptor.clientFk = clientFk;
         this.$.clientDescriptor.parent = event.target;
@@ -36,8 +30,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$stateParams'];
-
 ngModule.component('vnOrderIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/order/front/prices-popover/index.js b/modules/order/front/prices-popover/index.js
index b732f2090..307cbc8d6 100644
--- a/modules/order/front/prices-popover/index.js
+++ b/modules/order/front/prices-popover/index.js
@@ -103,7 +103,6 @@ class Controller extends Component {
             return;
         }
 
-
         let params = {
             orderFk: this.order.id,
             items: filledLines
diff --git a/modules/order/front/summary/index.js b/modules/order/front/summary/index.js
index 42b71d90e..ca6c29522 100644
--- a/modules/order/front/summary/index.js
+++ b/modules/order/front/summary/index.js
@@ -1,14 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $state) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.order = {};
-    }
-
+class Controller extends Section {
     setSummary() {
         this.$http.get(`Orders/${this.order.id}/summary`).then(res => {
             if (res && res.data)
@@ -17,7 +11,7 @@ class Controller {
     }
 
     get formattedAddress() {
-        if (!this.summary) return;
+        if (!this.summary) return null;
 
         let address = this.summary.address;
         let province = address.province ? `(${address.province.name})` : '';
@@ -31,18 +25,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state'];
-
 ngModule.component('vnOrderSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/order/front/summary/index.spec.js b/modules/order/front/summary/index.spec.js
index f693db35d..2fa7c1c93 100644
--- a/modules/order/front/summary/index.spec.js
+++ b/modules/order/front/summary/index.spec.js
@@ -9,7 +9,8 @@ describe('Order', () => {
 
         beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnOrderSummary');
+            const $element = angular.element('<vn-order-summary></vn-order-summary>');
+            controller = $componentController('vnOrderSummary', {$element});
             controller.order = {id: 1};
         }));
 
diff --git a/modules/order/front/volume/index.html b/modules/order/front/volume/index.html
index 9dc1b811f..36451f517 100644
--- a/modules/order/front/volume/index.html
+++ b/modules/order/front/volume/index.html
@@ -3,12 +3,12 @@
     vn-id="model"
     url="OrderRows"
     filter="::$ctrl.filter"
-    link="{orderFk: $ctrl.$stateParams.id}"
+    link="{orderFk: $ctrl.$params.id}"
     limit="20"
     data="rows"
     on-data-change="$ctrl.onDataChange()">
 </vn-crud-model>
-<mg-ajax path="Orders/{{$ctrl.$stateParams.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
+<mg-ajax path="Orders/{{$ctrl.$params.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
 <vn-data-viewer model="model" class="header vn-w-lg">
     <vn-card class="vn-pa-lg">
         <vn-label-value
diff --git a/modules/order/front/volume/index.js b/modules/order/front/volume/index.js
index ef5232366..f28763612 100644
--- a/modules/order/front/volume/index.js
+++ b/modules/order/front/volume/index.js
@@ -1,11 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $stateParams) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [{
                 relation: 'item'
@@ -16,31 +15,30 @@ class Controller {
     }
 
     onDataChange() {
-        this.$http.get(`Orders/${this.$stateParams.id}/getVolumes`)
+        this.$http.get(`Orders/${this.$params.id}/getVolumes`)
             .then(response => {
-                if (response.data)
-                    this.$scope.model.data.forEach(order => {
+                if (response.data) {
+                    this.$.model.data.forEach(order => {
                         response.data.volumes.forEach(volume => {
                             if (order.itemFk === volume.itemFk)
                                 order.volume = volume.volume;
                         });
                     });
+                }
             });
     }
 
     showDescriptor(event, itemFk) {
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams'];
-
 ngModule.component('vnOrderVolume', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/order/front/volume/index.spec.js b/modules/order/front/volume/index.spec.js
index c5fe0f2cf..194592406 100644
--- a/modules/order/front/volume/index.spec.js
+++ b/modules/order/front/volume/index.spec.js
@@ -21,7 +21,8 @@ describe('Order', () => {
             $scope.popover = {relocate: () => {}};
             $state = _$state_;
             $state.params.id = 1;
-            controller = $componentController('vnOrderVolume', {$scope}, {$httpBackend}, {$state});
+            const $element = angular.element('<vn-order-volume></vn-order-volume>');
+            controller = $componentController('vnOrderVolume', {$element, $scope});
         }));
 
         it('should join the sale volumes to its respective sale', () => {
@@ -31,29 +32,29 @@ describe('Order', () => {
             controller.onDataChange();
             $httpBackend.flush();
 
-            expect(controller.$scope.model.data[0].volume).toBe(0.008);
-            expect(controller.$scope.model.data[1].volume).toBe(0.003);
+            expect(controller.$.model.data[0].volume).toBe(0.008);
+            expect(controller.$.model.data[1].volume).toBe(0.003);
         });
 
         describe('showDescriptor()', () => {
             it('should set $scope.descriptor.itemFk, $scope.descriptor.parent and call $scope.descriptor.show()', () => {
                 let event = {target: 1};
                 let itemFk = 1;
-                jest.spyOn(controller.$scope.descriptor, 'show');
+                jest.spyOn(controller.$.descriptor, 'show');
                 controller.showDescriptor(event, itemFk);
 
-                expect(controller.$scope.descriptor.itemFk).toBe(1);
-                expect(controller.$scope.descriptor.parent).toBe(1);
-                expect(controller.$scope.descriptor.show).toHaveBeenCalledWith();
+                expect(controller.$.descriptor.itemFk).toBe(1);
+                expect(controller.$.descriptor.parent).toBe(1);
+                expect(controller.$.descriptor.show).toHaveBeenCalledWith();
             });
         });
 
         describe('onDescriptorLoad()', () => {
             it('should call $scope.popover.relocate()', () => {
-                jest.spyOn(controller.$scope.popover, 'relocate');
+                jest.spyOn(controller.$.popover, 'relocate');
                 controller.onDescriptorLoad();
 
-                expect(controller.$scope.popover.relocate).toHaveBeenCalledWith();
+                expect(controller.$.popover.relocate).toHaveBeenCalledWith();
             });
         });
     });
diff --git a/modules/route/front/basic-data/index.js b/modules/route/front/basic-data/index.js
index d4a481dc5..cced46f55 100644
--- a/modules/route/front/basic-data/index.js
+++ b/modules/route/front/basic-data/index.js
@@ -1,19 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, vnApp, $translate) {
-        this.$ = $scope;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$.watcher.submit().then(() => {
-            this.card.reload();
-        });
+        this.$.watcher.submit().then(() =>
+            this.card.reload()
+        );
     }
 }
-Controller.$inject = ['$scope', 'vnApp', '$translate'];
 
 ngModule.component('vnRouteBasicData', {
     template: require('./index.html'),
diff --git a/modules/route/front/create/index.js b/modules/route/front/create/index.js
index 03fe574fc..703ecb49a 100644
--- a/modules/route/front/create/index.js
+++ b/modules/route/front/create/index.js
@@ -1,18 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state) {
-        this.$scope = $scope;
-        this.$state = $state;
-    }
-
+export default class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.submit().then(
+        this.$.watcher.submit().then(
             res => this.$state.go('route.card.summary', {id: res.data.id})
         );
     }
 }
-Controller.$inject = ['$scope', '$state'];
 
 ngModule.component('vnRouteCreate', {
     template: require('./index.html'),
diff --git a/modules/route/front/descriptor-popover/index.js b/modules/route/front/descriptor-popover/index.js
index 7d5cd3d91..a0363839f 100644
--- a/modules/route/front/descriptor-popover/index.js
+++ b/modules/route/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.route = null;
         this._quicklinks = {};
     }
@@ -118,7 +115,6 @@ class Controller extends Component {
         });
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnRouteDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/route/front/descriptor/index.js b/modules/route/front/descriptor/index.js
index 51ca23a92..558d236b7 100644
--- a/modules/route/front/descriptor/index.js
+++ b/modules/route/front/descriptor/index.js
@@ -2,8 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $httpParamSerializer) {
-        super($element, $scope);
+    constructor($element, $, $httpParamSerializer) {
+        super($element, $);
 
         this.$httpParamSerializer = $httpParamSerializer;
         this.moreOptions = [
diff --git a/modules/route/front/index/index.js b/modules/route/front/index/index.js
index 735581265..0349af293 100644
--- a/modules/route/front/index/index.js
+++ b/modules/route/front/index/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, vnToken) {
-        this.$ = $scope;
-        this.accessToken = vnToken.token;
-    }
-
+export default class Controller extends Section {
     showWorkerDescriptor(event, workerFk) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -25,7 +21,6 @@ export default class Controller {
         this.$.summary.show();
     }
 }
-Controller.$inject = ['$scope', 'vnToken'];
 
 ngModule.component('vnRouteIndex', {
     template: require('./index.html'),
diff --git a/modules/route/front/log/index.html b/modules/route/front/log/index.html
index 6a6adf250..7df2e30ae 100644
--- a/modules/route/front/log/index.html
+++ b/modules/route/front/log/index.html
@@ -1 +1 @@
-<vn-log url="RouteLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="RouteLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/route/front/log/index.js b/modules/route/front/log/index.js
index ff0a2a9d1..b7d456b23 100644
--- a/modules/route/front/log/index.js
+++ b/modules/route/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnRouteLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/route/front/summary/index.js b/modules/route/front/summary/index.js
index b1d42e6f1..a922ad008 100644
--- a/modules/route/front/summary/index.js
+++ b/modules/route/front/summary/index.js
@@ -1,12 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http) {
-        this.$http = $http;
-        this.$ = $scope;
-    }
-
+class Controller extends Section {
     set route(value) {
         this._route = value;
         if (value && value.id)
@@ -47,8 +43,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http'];
-
 ngModule.component('vnRouteSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/route/front/summary/index.spec.js b/modules/route/front/summary/index.spec.js
index 0dfc016b4..99c029394 100644
--- a/modules/route/front/summary/index.spec.js
+++ b/modules/route/front/summary/index.spec.js
@@ -9,7 +9,8 @@ describe('Route', () => {
 
         beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnRouteSummary');
+            const $element = angular.element('<vn-route-summary></vn-route-summary>');
+            controller = $componentController('vnRouteSummary', {$element});
             controller.route = {id: 1};
         }));
 
diff --git a/modules/route/front/tickets/index.js b/modules/route/front/tickets/index.js
index f36330235..556ad0b6c 100644
--- a/modules/route/front/tickets/index.js
+++ b/modules/route/front/tickets/index.js
@@ -3,12 +3,6 @@ import Section from 'salix/components/section';
 import './style.scss';
 
 class Controller extends Section {
-    constructor($element, $scope, $filter) {
-        super($element, $scope);
-
-        this.$filter = $filter;
-    }
-
     get route() {
         return this._route;
     }
@@ -200,8 +194,6 @@ class Controller extends Section {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$filter'];
-
 ngModule.component('vnRouteTickets', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/basic-data/index.js b/modules/ticket/front/basic-data/index.js
index 4965ee61e..4deebff17 100644
--- a/modules/ticket/front/basic-data/index.js
+++ b/modules/ticket/front/basic-data/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state) {
-        this.$scope = $scope;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     set ticket(data) {
         if (!data) return;
 
@@ -25,8 +21,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state'];
-
 ngModule.component('vnTicketBasicData', {
     template: require('./index.html'),
     bindings: {
diff --git a/modules/ticket/front/basic-data/step-one/index.js b/modules/ticket/front/basic-data/step-one/index.js
index b8fffd2c1..f6655a221 100644
--- a/modules/ticket/front/basic-data/step-one/index.js
+++ b/modules/ticket/front/basic-data/step-one/index.js
@@ -1,14 +1,8 @@
 import ngModule from '../../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $http, $translate, vnApp) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Component {
     $onInit() {
         this.basicData.registerChild(this);
     }
@@ -247,8 +241,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$translate', 'vnApp'];
-
 ngModule.component('vnTicketBasicDataStepOne', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/basic-data/step-one/index.spec.js b/modules/ticket/front/basic-data/step-one/index.spec.js
index b1931d0bb..a0673cbbe 100644
--- a/modules/ticket/front/basic-data/step-one/index.spec.js
+++ b/modules/ticket/front/basic-data/step-one/index.spec.js
@@ -13,7 +13,8 @@ describe('Ticket', () => {
             $state = _$state_;
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            controller = $componentController('vnTicketBasicDataStepOne', {$state});
+            const $element = angular.element('<vn-ticket-basic-data-step-one></vn-ticket-basic-data-step-one>');
+            controller = $componentController('vnTicketBasicDataStepOne', {$element});
             controller.ticket = {
                 addressFk: 121,
                 agencyModeFk: 7,
diff --git a/modules/ticket/front/basic-data/step-two/index.js b/modules/ticket/front/basic-data/step-two/index.js
index f766f5726..00556350b 100644
--- a/modules/ticket/front/basic-data/step-two/index.js
+++ b/modules/ticket/front/basic-data/step-two/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($http, $state, $translate, vnApp) {
-        this.$http = $http;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Component {
     $onInit() {
         this.data.registerChild(this);
     }
@@ -92,13 +86,11 @@ class Controller {
                 this.$translate.instant(`The ticket has been unrouted`)
             );
             this.card.reload();
-            this.$state.go('ticket.card.summary', {id: this.$state.params.id});
+            this.$state.go('ticket.card.summary', {id: this.$params.id});
         });
     }
 }
 
-Controller.$inject = ['$http', '$state', '$translate', 'vnApp'];
-
 ngModule.component('vnTicketBasicDataStepTwo', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/basic-data/step-two/index.spec.js b/modules/ticket/front/basic-data/step-two/index.spec.js
index 1ca89fd90..e67389f9d 100644
--- a/modules/ticket/front/basic-data/step-two/index.spec.js
+++ b/modules/ticket/front/basic-data/step-two/index.spec.js
@@ -7,7 +7,8 @@ describe('Ticket', () => {
         beforeEach(ngModule('ticket'));
 
         beforeEach(angular.mock.inject($componentController => {
-            controller = $componentController('vnTicketBasicDataStepTwo');
+            const $element = angular.element('<vn-ticket-basic-data-step-two><vn-ticket-basic-data-step-two>');
+            controller = $componentController('vnTicketBasicDataStepTwo', {$element});
         }));
 
         describe('getTotalPrice()', () => {
diff --git a/modules/ticket/front/component/index.html b/modules/ticket/front/component/index.html
index 16db43a2e..e555eb8d7 100644
--- a/modules/ticket/front/component/index.html
+++ b/modules/ticket/front/component/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model 
     vn-id="model"
     url="Sales"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     data="components"
     auto-load="true">
diff --git a/modules/ticket/front/component/index.js b/modules/ticket/front/component/index.js
index 027fdad77..d0b6ed880 100644
--- a/modules/ticket/front/component/index.js
+++ b/modules/ticket/front/component/index.js
@@ -1,10 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             order: 'concept ASC',
             include: [{
@@ -32,7 +32,7 @@ class Controller {
     }
 
     base() {
-        let sales = this.$scope.model.data;
+        let sales = this.$.model.data;
         let sum = 0;
 
         if (!sales) return;
@@ -59,18 +59,16 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketComponents', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/component/index.spec.js b/modules/ticket/front/component/index.spec.js
index 4dd361b27..3547a4905 100644
--- a/modules/ticket/front/component/index.spec.js
+++ b/modules/ticket/front/component/index.spec.js
@@ -75,7 +75,8 @@ describe('ticket', () => {
                 ],
                 quantity: 5
             }];
-            controller = $componentController('vnTicketComponents', {$scope});
+            const $element = angular.element('<vn-ticket-components></vn-ticket-components>');
+            controller = $componentController('vnTicketComponents', {$element, $scope});
         }));
 
         describe('base()', () => {
diff --git a/modules/ticket/front/create/card.js b/modules/ticket/front/create/card.js
index 54cc56c68..01c5da4c9 100644
--- a/modules/ticket/front/create/card.js
+++ b/modules/ticket/front/create/card.js
@@ -1,20 +1,16 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($http, vnApp, $translate, $state, $stateParams, vnConfig) {
-        this.$stateParams = $stateParams;
-        this.$http = $http;
-        this.translate = $translate;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
+class Controller extends Component {
+    constructor($element, $) {
+        super($element, $);
         this.ticket = {};
-        this.$state = $state;
-        this.clientFk = $stateParams.clientFk;
+        this.clientFk = this.$params.clientFk;
     }
 
     $onInit() {
-        if (this.$stateParams && this.$stateParams.clientFk)
-            this.clientId = parseInt(this.$stateParams.clientFk);
+        if (this.$params && this.$params.clientFk)
+            this.clientId = parseInt(this.$params.clientFk);
 
         this.warehouseId = this.vnConfig.warehouseFk;
     }
@@ -124,14 +120,12 @@ class Controller {
             warehouseId: this.ticket.warehouseFk,
         };
         this.$http.post(`Tickets/new`, params).then(res => {
-            this.vnApp.showSuccess(this.translate.instant('Data saved!'));
+            this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
             this.$state.go('ticket.card.summary', {id: res.data.id});
         });
     }
 }
 
-Controller.$inject = ['$http', 'vnApp', '$translate', '$state', '$stateParams', 'vnConfig'];
-
 ngModule.component('vnTicketCreateCard', {
     template: require('./card.html'),
     controller: Controller,
diff --git a/modules/ticket/front/create/index.js b/modules/ticket/front/create/index.js
index bb9b4c76e..c93051d7a 100644
--- a/modules/ticket/front/create/index.js
+++ b/modules/ticket/front/create/index.js
@@ -1,18 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     async onSubmit() {
         let newTicketID = await this.$.card.createTicket();
         this.$state.go('ticket.card.summary', {id: newTicketID});
     }
 }
-Controller.$inject = ['$scope', '$http', '$state'];
 
 ngModule.component('vnTicketCreate', {
     template: require('./index.html'),
diff --git a/modules/ticket/front/descriptor-popover/index.js b/modules/ticket/front/descriptor-popover/index.js
index 5b94f3c14..822296c5b 100644
--- a/modules/ticket/front/descriptor-popover/index.js
+++ b/modules/ticket/front/descriptor-popover/index.js
@@ -3,11 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.ticket = null;
         this._quicklinks = {};
     }
@@ -106,7 +103,6 @@ class Controller extends Component {
         );
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnTicketDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/ticket/front/descriptor/addStowaway.html b/modules/ticket/front/descriptor/addStowaway.html
index ec7005e79..d15d7185d 100644
--- a/modules/ticket/front/descriptor/addStowaway.html
+++ b/modules/ticket/front/descriptor/addStowaway.html
@@ -1,5 +1,5 @@
 <vn-crud-model vn-id="model"
-    url="Tickets/{{$ctrl.$stateParams.id}}/getPossibleStowaways"
+    url="Tickets/{{$ctrl.$params.id}}/getPossibleStowaways"
     data="possibleStowaways">
 </vn-crud-model>
 <vn-dialog
diff --git a/modules/ticket/front/descriptor/addStowaway.js b/modules/ticket/front/descriptor/addStowaway.js
index 7a5670576..28286386b 100644
--- a/modules/ticket/front/descriptor/addStowaway.js
+++ b/modules/ticket/front/descriptor/addStowaway.js
@@ -1,15 +1,8 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $, $http, vnApp, $translate) {
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$ = $;
-        this.$stateParams = $stateParams;
-        this.$http = $http;
-    }
-
+class Controller extends Component {
     addStowaway(stowaway) {
         let params = {id: stowaway.id, shipFk: this.ticket.id};
         this.$http.post(`Stowaways/`, params)
@@ -29,8 +22,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', 'vnApp', '$translate'];
-
 ngModule.component('vnAddStowaway', {
     template: require('./addStowaway.html'),
     controller: Controller,
diff --git a/modules/ticket/front/descriptor/index.js b/modules/ticket/front/descriptor/index.js
index 6ea2d1892..d60e2ce67 100644
--- a/modules/ticket/front/descriptor/index.js
+++ b/modules/ticket/front/descriptor/index.js
@@ -235,8 +235,7 @@ class Controller extends Component {
             clientId: this.ticket.client.id,
             ticketId: this.ticket.id
         };
-        const serializedParams = this.$httpParamSerializer(params);
-        this.$http.get(`email/delivery-note?${serializedParams}`).then(
+        this.$http.get(`email/delivery-note`, {params}).then(
             () => this.vnApp.showMessage(this.$translate.instant('Notification sent!'))
         );
     }
diff --git a/modules/ticket/front/dms/create/index.js b/modules/ticket/front/dms/create/index.js
index f1b59f6c0..e745d98b8 100644
--- a/modules/ticket/front/dms/create/index.js
+++ b/modules/ticket/front/dms/create/index.js
@@ -1,13 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp, vnConfig) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.dms = {
             files: [],
             hasFile: false,
@@ -103,8 +99,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp', 'vnConfig'];
-
 ngModule.component('vnTicketDmsCreate', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/dms/create/index.spec.js b/modules/ticket/front/dms/create/index.spec.js
index f0d7ad7c5..c6cb1da5a 100644
--- a/modules/ticket/front/dms/create/index.spec.js
+++ b/modules/ticket/front/dms/create/index.spec.js
@@ -13,7 +13,8 @@ describe('Ticket', () => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            controller = $componentController('vnTicketDmsCreate', {$scope});
+            const $element = angular.element('<vn-ticket-dms-create></vn-ticket-dms-create>');
+            controller = $componentController('vnTicketDmsCreate', {$element});
             controller._ticket = {
                 id: 15,
                 client: {id: 101, name: 'Bruce wayne'},
diff --git a/modules/ticket/front/dms/edit/index.js b/modules/ticket/front/dms/edit/index.js
index 9ff967816..44e3890f8 100644
--- a/modules/ticket/front/dms/edit/index.js
+++ b/modules/ticket/front/dms/edit/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
+class Controller extends Section {
     get ticket() {
         return this._ticket;
     }
@@ -37,7 +29,7 @@ class Controller {
     }
 
     setDefaultParams() {
-        const path = `Dms/${this.$stateParams.dmsId}`;
+        const path = `Dms/${this.$params.dmsId}`;
         this.$http.get(path).then(res => {
             const dms = res.data && res.data;
             this.dms = {
@@ -54,7 +46,7 @@ class Controller {
     }
 
     onSubmit() {
-        const query = `dms/${this.$stateParams.dmsId}/updateFile`;
+        const query = `dms/${this.$params.dmsId}/updateFile`;
         const options = {
             method: 'POST',
             url: query,
@@ -92,8 +84,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp'];
-
 ngModule.component('vnTicketDmsEdit', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/dms/edit/index.spec.js b/modules/ticket/front/dms/edit/index.spec.js
index 757ca24ef..20224a4b9 100644
--- a/modules/ticket/front/dms/edit/index.spec.js
+++ b/modules/ticket/front/dms/edit/index.spec.js
@@ -5,16 +5,16 @@ describe('Ticket', () => {
         let controller;
         let $scope;
         let $httpBackend;
-        let $state;
 
         beforeEach(ngModule('ticket'));
 
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            $state = {params: {dmsId: 1}};
-            controller = $componentController('vnTicketDmsEdit', {$scope, $state});
+            const $element = angular.element('<vn-ticket-dms-edit></vn-ticket-dms-edit>');
+            controller = $componentController('vnTicketDmsEdit', {$element});
             controller._ticket = {id: 1, ticketFk: 16};
+            controller.$params = {dmsId: 1};
         }));
 
         describe('ticket() setter', () => {
diff --git a/modules/ticket/front/dms/index/index.html b/modules/ticket/front/dms/index/index.html
index 4e4834510..3b690cfd3 100644
--- a/modules/ticket/front/dms/index/index.html
+++ b/modules/ticket/front/dms/index/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="TicketDms"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     limit="20"
     data="$ctrl.ticketDms"
@@ -54,7 +54,7 @@
                 <vn-td shrink>
                     <a target="_blank"
                         title="{{'Download file' | translate}}"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         {{::document.dms.file}}
                     </a>
                 </vn-td>
@@ -68,7 +68,7 @@
                 </vn-td>
                 <vn-td shrink>
                     <a target="_blank"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         <vn-icon-button
                             icon="cloud_download"
                             title="{{'Download file' | translate}}">
diff --git a/modules/ticket/front/dms/index/index.js b/modules/ticket/front/dms/index/index.js
index c6ceb6b0d..a37d15426 100644
--- a/modules/ticket/front/dms/index/index.js
+++ b/modules/ticket/front/dms/index/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($stateParams, $scope, $http, $translate, vnToken, vnApp) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnApp = vnApp;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: {
                 relation: 'dms',
@@ -71,8 +67,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnToken', 'vnApp'];
-
 ngModule.component('vnTicketDmsIndex', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/dms/index/index.spec.js b/modules/ticket/front/dms/index/index.spec.js
index 8916a5c63..cd1fd0125 100644
--- a/modules/ticket/front/dms/index/index.spec.js
+++ b/modules/ticket/front/dms/index/index.spec.js
@@ -3,18 +3,15 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Ticket', () => {
     describe('Component vnTicketDmsIndex', () => {
-        let $componentController;
-        let $scope;
         let $httpBackend;
         let controller;
 
         beforeEach(ngModule('ticket'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
-            $scope = $rootScope.$new();
-            controller = $componentController('vnTicketDmsIndex', {$: $scope});
+            const $element = angular.element('<vn-ticket-dms-index></vn-ticket-dms-index>');
+            controller = $componentController('vnTicketDmsIndex', {$element});
             controller.$.model = crudModel;
         }));
 
diff --git a/modules/ticket/front/expedition/index.html b/modules/ticket/front/expedition/index.html
index b2e859970..a90d48670 100644
--- a/modules/ticket/front/expedition/index.html
+++ b/modules/ticket/front/expedition/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="Expeditions/filter"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     limit="20"
     data="expeditions"
     order="created DESC"
diff --git a/modules/ticket/front/expedition/index.js b/modules/ticket/front/expedition/index.js
index 5b8a71581..1079e0b21 100644
--- a/modules/ticket/front/expedition/index.js
+++ b/modules/ticket/front/expedition/index.js
@@ -1,12 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams, $http) {
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-        this.$http = $http;
-    }
-
+class Controller extends Section {
     deleteExpedition(expedition) {
         this.expeditionId = expedition.id;
         this.$.deleteExpedition.show();
@@ -51,8 +46,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams', '$http'];
-
 ngModule.component('vnTicketExpedition', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/expedition/index.spec.js b/modules/ticket/front/expedition/index.spec.js
index 2985f698c..839108df7 100644
--- a/modules/ticket/front/expedition/index.spec.js
+++ b/modules/ticket/front/expedition/index.spec.js
@@ -4,19 +4,18 @@ describe('Ticket', () => {
     describe('Component vnTicketExpedition', () => {
         let controller;
         let $scope;
-        let $state;
         let $httpBackend;
 
         beforeEach(ngModule('ticket'));
 
-        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_, _$httpBackend_) => {
-            $state = _$state_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
             $scope.model = {
                 refresh: () => {}
             };
-            controller = $componentController('vnTicketExpedition', {$state, $scope});
+            const $element = angular.element('<vn-ticket-expedition></vn-ticket-expedition>');
+            controller = $componentController('vnTicketExpedition', {$element, $scope});
         }));
 
         describe('returnDialog()', () => {
diff --git a/modules/ticket/front/index/index.js b/modules/ticket/front/index/index.js
index e9f522839..7d6163086 100644
--- a/modules/ticket/front/index/index.js
+++ b/modules/ticket/front/index/index.js
@@ -1,17 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import UserError from 'core/lib/user-error';
 import './style.scss';
 
-export default class Controller {
-    constructor($scope, $state, $stateParams, $translate, $http) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.$stateParams = $stateParams;
-        this.$state = $state;
-        this.selectedTicket = null;
-    }
-
+export default class Controller extends Section {
     openBalanceDialog() {
         const checkedTickets = this.checked;
         const description = [];
@@ -123,8 +115,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$stateParams', '$translate', '$http'];
-
 ngModule.component('vnTicketIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/index/index.spec.js b/modules/ticket/front/index/index.spec.js
index 6b0b42ffd..1cb57926b 100644
--- a/modules/ticket/front/index/index.spec.js
+++ b/modules/ticket/front/index/index.spec.js
@@ -23,7 +23,8 @@ describe('Component vnTicketIndex', () => {
 
     beforeEach(inject(($componentController, _$window_) => {
         $window = _$window_;
-        controller = $componentController('vnTicketIndex');
+        const $element = angular.element('<vn-ticket-index></vn-ticket-index>');
+        controller = $componentController('vnTicketIndex', {$element});
     }));
 
     describe('compareDate()', () => {
diff --git a/modules/ticket/front/log/index.html b/modules/ticket/front/log/index.html
index 4fe26c871..91109d3eb 100644
--- a/modules/ticket/front/log/index.html
+++ b/modules/ticket/front/log/index.html
@@ -1 +1 @@
-<vn-log url="TicketLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="TicketLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/ticket/front/log/index.js b/modules/ticket/front/log/index.js
index 6a486d3d0..df2584481 100644
--- a/modules/ticket/front/log/index.js
+++ b/modules/ticket/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnTicketLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/ticket/front/note/index.html b/modules/ticket/front/note/index.html
index 617cf2f7d..32d93c630 100644
--- a/modules/ticket/front/note/index.html
+++ b/modules/ticket/front/note/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="TicketObservations"
     fields="['id', 'ticketFk', 'observationTypeFk', 'description']"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     data="observations"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/ticket/front/note/index.js b/modules/ticket/front/note/index.js
index 4a74b3b98..3eda4561b 100644
--- a/modules/ticket/front/note/index.js
+++ b/modules/ticket/front/note/index.js
@@ -1,22 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($stateParams, $scope) {
-        this.$stateParams = $stateParams;
-        this.$scope = $scope;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope'];
-
 ngModule.component('vnTicketObservation', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/package/index.html b/modules/ticket/front/package/index.html
index 12ac13862..84d79fce3 100644
--- a/modules/ticket/front/package/index.html
+++ b/modules/ticket/front/package/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="TicketPackagings"
     fields="['id', 'ticketFk', 'packagingFk', 'quantity', 'created']"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     data="packages"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/ticket/front/package/index.js b/modules/ticket/front/package/index.js
index d73c000c7..df0b9a503 100644
--- a/modules/ticket/front/package/index.js
+++ b/modules/ticket/front/package/index.js
@@ -1,31 +1,25 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-
+class Controller extends Section {
     add() {
-        this.$scope.model.insert({
+        this.$.model.insert({
             packagingFk: null,
             quantity: null,
             created: new Date(),
-            ticketFk: this.$stateParams.id
+            ticketFk: this.$params.id
         });
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.watcher.check();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketPackage', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/picture/index.html b/modules/ticket/front/picture/index.html
index 67ce5464e..58e13a451 100644
--- a/modules/ticket/front/picture/index.html
+++ b/modules/ticket/front/picture/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="sales"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     limit="20"
     data="sales"
diff --git a/modules/ticket/front/picture/index.js b/modules/ticket/front/picture/index.js
index a68e69d52..257a53e6c 100644
--- a/modules/ticket/front/picture/index.js
+++ b/modules/ticket/front/picture/index.js
@@ -1,10 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams, $http) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$http = $http;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: {
                 relation: 'item',
@@ -16,18 +15,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams', '$http'];
-
 ngModule.component('vnTicketPicture', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/request/create/index.js b/modules/ticket/front/request/create/index.js
index fac89be8b..2d432e637 100644
--- a/modules/ticket/front/request/create/index.js
+++ b/modules/ticket/front/request/create/index.js
@@ -1,24 +1,22 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($state, $scope) {
-        this.$ = $scope;
-        this.$state = $state;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.ticketRequest = {
-            ticketFk: $state.params.id
+            ticketFk: this.$params.id
         };
     }
 
     onSubmit() {
-        this.$.watcher.submit().then(
-            json => this.$state.go('ticket.card.request.index', {id: this.$state.params.id})
+        this.$.watcher.submit().then(() =>
+            this.$state.go('ticket.card.request.index', {id: this.$params.id})
         );
     }
 }
 
-Controller.$inject = ['$state', '$scope'];
-
 ngModule.component('vnTicketRequestCreate', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/request/index/index.html b/modules/ticket/front/request/index/index.html
index 395338116..0acb661e3 100644
--- a/modules/ticket/front/request/index/index.html
+++ b/modules/ticket/front/request/index/index.html
@@ -3,7 +3,7 @@
     url="TicketRequests"
     fields="['id', 'description', 'created', 'requesterFk', 'attenderFk', 'quantity', 'price', 'saleFk', 'isOk']"
     order="created ASC"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     filter="::$ctrl.filter"
     data="purchaseRequests"
     auto-load="true">
diff --git a/modules/ticket/front/request/index/index.js b/modules/ticket/front/request/index/index.js
index e8cb54f22..c2e6dc123 100644
--- a/modules/ticket/front/request/index/index.js
+++ b/modules/ticket/front/request/index/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -50,7 +50,7 @@ class Controller {
                 icon: 'icon-transaction',
                 state: `item.card.diary({
                         id: ${itemFk}, 
-                        ticketFk: ${this.$stateParams.id}
+                        ticketFk: ${this.$params.id}
                     })`,
                 tooltip: 'Item diary'
             }
@@ -94,8 +94,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketRequestIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/request/index/index.spec.js b/modules/ticket/front/request/index/index.spec.js
index 90d71f062..17f085010 100644
--- a/modules/ticket/front/request/index/index.spec.js
+++ b/modules/ticket/front/request/index/index.spec.js
@@ -3,14 +3,12 @@ import './index';
 describe('Ticket', () => {
     describe('Component vnTicketRequestIndex', () => {
         let controller;
-        let $scope;
 
         beforeEach(ngModule('ticket'));
 
-        beforeEach(angular.mock.inject(($componentController, $rootScope) => {
-            $scope = $rootScope.$new();
-
-            controller = $componentController('vnTicketRequestIndex', {$scope});
+        beforeEach(angular.mock.inject($componentController => {
+            const $element = angular.element('<vn-ticket-request-index></vn-ticket-request-index>');
+            controller = $componentController('vnTicketRequestIndex', {$element});
         }));
 
         describe('getRequestState()', () => {
diff --git a/modules/ticket/front/sale-checked/index.html b/modules/ticket/front/sale-checked/index.html
index c7e060e4e..a2afd3b8f 100644
--- a/modules/ticket/front/sale-checked/index.html
+++ b/modules/ticket/front/sale-checked/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="sales"
     filter="::$ctrl.filter"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     limit="20"
     data="sales"
     order="concept ASC"
diff --git a/modules/ticket/front/sale-checked/index.js b/modules/ticket/front/sale-checked/index.js
index 08157bc9d..1fd9b662b 100644
--- a/modules/ticket/front/sale-checked/index.js
+++ b/modules/ticket/front/sale-checked/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [{
                 relation: 'item'
@@ -29,18 +29,16 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketSaleChecked', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sale-tracking/index.html b/modules/ticket/front/sale-tracking/index.html
index 0186fb935..b365ef1ca 100644
--- a/modules/ticket/front/sale-tracking/index.html
+++ b/modules/ticket/front/sale-tracking/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="SaleTrackings/listSaleTracking"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     limit="20"
     data="sales"
     order="itemFk DESC"
diff --git a/modules/ticket/front/sale-tracking/index.js b/modules/ticket/front/sale-tracking/index.js
index 41ff12a4a..8dca9c026 100644
--- a/modules/ticket/front/sale-tracking/index.js
+++ b/modules/ticket/front/sale-tracking/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-    }
-
+class Controller extends Section {
     showItemDescriptor(event, itemFk) {
         this.quicklinks = {
             btnThree: {
@@ -36,8 +32,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketSaleTracking', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sale/editDiscount.js b/modules/ticket/front/sale/editDiscount.js
index 6011f77bf..825f71777 100644
--- a/modules/ticket/front/sale/editDiscount.js
+++ b/modules/ticket/front/sale/editDiscount.js
@@ -1,14 +1,7 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($scope, $http, $state, vnApp, $translate) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-    }
-
+class Controller extends Component {
     set edit(value) {
         this._edit = value;
         this.clearDiscount();
@@ -59,7 +52,7 @@ class Controller {
 
         if (modified) {
             const params = {salesIds: salesIds, newDiscount: this.newDiscount};
-            const query = `Tickets/${this.$state.params.id}/updateDiscount`;
+            const query = `Tickets/${this.$params.id}/updateDiscount`;
             this.$http.post(query, params).then(() => {
                 this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
                 this.clearDiscount();
@@ -79,8 +72,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', 'vnApp', '$translate'];
-
 ngModule.component('vnTicketSaleEditDiscount', {
     template: require('./editDiscount.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sale/index.html b/modules/ticket/front/sale/index.html
index b050d3579..e120ad942 100644
--- a/modules/ticket/front/sale/index.html
+++ b/modules/ticket/front/sale/index.html
@@ -1,6 +1,6 @@
 <vn-crud-model auto-load="false"
     vn-id="model"
-    url="Tickets/{{$ctrl.$stateParams.id}}/getSales"
+    url="Tickets/{{$ctrl.$params.id}}/getSales"
     data="$ctrl.sales">
 </vn-crud-model>
 <vn-watcher
diff --git a/modules/ticket/front/sale/index.js b/modules/ticket/front/sale/index.js
index c5e947d23..fe19696f3 100644
--- a/modules/ticket/front/sale/index.js
+++ b/modules/ticket/front/sale/index.js
@@ -1,14 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $state, $http, vnApp, $translate) {
-        this.$scope = $scope;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.$http = $http;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.edit = {};
         this.moreOptions = [
             {
@@ -73,8 +69,8 @@ class Controller {
     }
 
     loadSubTotal() {
-        if (!this.$stateParams.id || !this.sales) return;
-        this.$http.get(`Tickets/${this.$stateParams.id}/subtotal`).then(res => {
+        if (!this.$params.id || !this.sales) return;
+        this.$http.get(`Tickets/${this.$params.id}/subtotal`).then(res => {
             this.subtotal = res.data || 0.0;
         });
     }
@@ -88,8 +84,8 @@ class Controller {
 
     loadVAT() {
         this.VAT = 0.0;
-        if (!this.$stateParams.id || !this.sales) return;
-        this.$http.get(`Tickets/${this.$stateParams.id}/getVAT`).then(res => {
+        if (!this.$params.id || !this.sales) return;
+        this.$http.get(`Tickets/${this.$params.id}/getVAT`).then(res => {
             this.VAT = res.data || 0.0;
         });
     }
@@ -106,7 +102,7 @@ class Controller {
 
             return (shouldShow && (option.always || this.isChecked));
         });
-        this.$scope.moreButton.data = options;
+        this.$.moreButton.data = options;
     }
 
     onMoreChange(callback) {
@@ -191,7 +187,7 @@ class Controller {
         });
 
         if (this.newInstances().length === 0)
-            this.$scope.watcher.updateOriginalData();
+            this.$.watcher.updateOriginalData();
 
         this.refreshTotal();
     }
@@ -211,7 +207,7 @@ class Controller {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -234,13 +230,13 @@ class Controller {
     }
 
     showRemoveLinesDialog() {
-        this.$scope.deleteLines.show();
+        this.$.deleteLines.show();
     }
 
     showTransferPopover(event) {
         this.setTransferParams();
-        this.$scope.transfer.parent = event.target;
-        this.$scope.transfer.show();
+        this.$.transfer.parent = event.target;
+        this.$.transfer.show();
     }
 
     setTransferParams() {
@@ -264,7 +260,7 @@ class Controller {
             sales: this.transfer.sales
         };
 
-        this.$scope.watcher.updateOriginalData();
+        this.$.watcher.updateOriginalData();
 
         const query = `tickets/${this.ticket.id}/transferSales`;
         this.$http.post(query, params).then(res => {
@@ -281,7 +277,7 @@ class Controller {
         const sales = this.checkedLines();
 
         if (this.newInstances().length === 0)
-            this.$scope.watcher.updateOriginalData();
+            this.$.watcher.updateOriginalData();
 
         this.$http.post(`Claims/createFromSales`, {claim: claim, sales: sales}).then(res => {
             this.$state.go('claim.card.basicData', {id: res.data.id});
@@ -312,13 +308,13 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 
     showEditPricePopover(event, sale) {
@@ -330,8 +326,8 @@ class Controller {
             id: sale.id,
             quantity: sale.quantity
         };
-        this.$scope.editPricePopover.parent = event.target;
-        this.$scope.editPricePopover.show();
+        this.$.editPricePopover.parent = event.target;
+        this.$.editPricePopover.show();
     }
 
     updatePrice() {
@@ -342,11 +338,11 @@ class Controller {
                 this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
             }).finally(() => {
                 if (this.newInstances().length === 0)
-                    this.$scope.watcher.updateOriginalData();
+                    this.$.watcher.updateOriginalData();
             });
         }
 
-        this.$scope.editPricePopover.hide();
+        this.$.editPricePopover.hide();
     }
 
     updateNewPrice() {
@@ -364,23 +360,23 @@ class Controller {
             price: sale.price,
             discount: sale.discount
         }];
-        this.$scope.editPopover.parent = event.target;
-        this.$scope.editPopover.show();
+        this.$.editPopover.parent = event.target;
+        this.$.editPopover.show();
     }
 
     showEditDialog() {
         this.edit = this.checkedLines();
-        this.$scope.editDialog.show();
+        this.$.editDialog.show();
     }
 
     hideEditDialog() {
-        this.$scope.model.refresh();
-        this.$scope.editDialog.hide();
+        this.$.model.refresh();
+        this.$.editDialog.hide();
     }
 
     hideEditPopover() {
-        this.$scope.model.refresh();
-        this.$scope.editPopover.hide();
+        this.$.model.refresh();
+        this.$.editPopover.hide();
     }
 
     /*
@@ -416,7 +412,7 @@ class Controller {
             });
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -449,14 +445,14 @@ class Controller {
             destination: phone,
             message: this.$translate.instant('Product not available', params)
         };
-        this.$scope.sms.open();
+        this.$.sms.open();
     }
 
     /**
      * Inserts a new instance
      */
     add() {
-        this.$scope.model.insert({});
+        this.$.model.insert({});
     }
 
     /*
@@ -481,11 +477,11 @@ class Controller {
         this.$http.post(query, data).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
         }).catch(e => {
-            this.$scope.model.refresh();
+            this.$.model.refresh();
             throw e;
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -498,11 +494,11 @@ class Controller {
         this.$http.post(query, data).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
         }).catch(e => {
-            this.$scope.model.refresh();
+            this.$.model.refresh();
             throw e;
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -532,7 +528,7 @@ class Controller {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
         }).finally(() => {
             if (this.newInstances().length === 0)
-                this.$scope.watcher.updateOriginalData();
+                this.$.watcher.updateOriginalData();
         });
     }
 
@@ -559,7 +555,7 @@ class Controller {
         const query = `Sales/${sale.id}/recalculatePrice`;
         this.$http.post(query).then(res => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
-            this.$scope.model.refresh();
+            this.$.model.refresh();
         });
     }
 
@@ -570,8 +566,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http', 'vnApp', '$translate'];
-
 ngModule.component('vnTicketSale', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sale/specs/editDiscount.spec.js b/modules/ticket/front/sale/specs/editDiscount.spec.js
index 8937d25c6..8eccfe74f 100644
--- a/modules/ticket/front/sale/specs/editDiscount.spec.js
+++ b/modules/ticket/front/sale/specs/editDiscount.spec.js
@@ -19,7 +19,8 @@ describe('Ticket', () => {
             }};
             $state = _$state_;
             $state.params.id = 11;
-            controller = $componentController('vnTicketSaleEditDiscount', {$scope, $state});
+            const $element = angular.element('<vn-ticket-sale-edit-discount></vn-ticket-sale-edit-discount>');
+            controller = $componentController('vnTicketSaleEditDiscount', {$element, $scope});
             controller._edit = [{id: 3}];
             controller.onHide = () => {};
         }));
diff --git a/modules/ticket/front/sale/specs/index.spec.js b/modules/ticket/front/sale/specs/index.spec.js
index 3b0f04a82..1c8fbda53 100644
--- a/modules/ticket/front/sale/specs/index.spec.js
+++ b/modules/ticket/front/sale/specs/index.spec.js
@@ -53,7 +53,8 @@ describe('Ticket', () => {
                     writable: false
                 }
             });
-            controller = $componentController('vnTicketSale', {$scope, $state});
+            const $element = angular.element('<vn-ticket-sale></vn-ticket-sale>');
+            controller = $componentController('vnTicketSale', {$element, $scope});
             controller.card = {reload: () => {}};
             controller.ticket = ticket;
             controller.sales = sales;
@@ -196,12 +197,12 @@ describe('Ticket', () => {
 
         describe('showSMSDialog()', () => {
             it('should open an SMS dialog with specified data', () => {
-                jest.spyOn(controller.$scope.sms, 'open');
+                jest.spyOn(controller.$.sms, 'open');
 
                 controller.sales[0].checked = true;
                 controller.showSMSDialog();
 
-                expect(controller.$scope.sms.open).toHaveBeenCalledWith();
+                expect(controller.$.sms.open).toHaveBeenCalledWith();
                 expect(controller.newSMS.destination).toEqual(111111111);
                 expect(controller.newSMS.message).not.toEqual('');
             });
@@ -242,7 +243,7 @@ describe('Ticket', () => {
 
         describe('updateQuantity()', () => {
             it('should make a POST query saving sale quantity', () => {
-                jest.spyOn(controller.$scope.watcher, 'updateOriginalData');
+                jest.spyOn(controller.$.watcher, 'updateOriginalData');
                 const data = {quantity: 10};
                 const sale = sales[0];
                 sale.quantity = 10;
@@ -256,13 +257,13 @@ describe('Ticket', () => {
                 controller.updateQuantity(sale);
                 $httpBackend.flush();
 
-                expect(controller.$scope.watcher.updateOriginalData).toHaveBeenCalledWith();
+                expect(controller.$.watcher.updateOriginalData).toHaveBeenCalledWith();
             });
         });
 
         describe('updateConcept()', () => {
             it('should make a POST query saving sale concept', () => {
-                jest.spyOn(controller.$scope.watcher, 'updateOriginalData');
+                jest.spyOn(controller.$.watcher, 'updateOriginalData');
                 const data = {newConcept: 'My new weapon'};
                 const sale = sales[0];
                 sale.concept = 'My new weapon';
@@ -276,13 +277,13 @@ describe('Ticket', () => {
                 controller.updateConcept(sale);
                 $httpBackend.flush();
 
-                expect(controller.$scope.watcher.updateOriginalData).toHaveBeenCalledWith();
+                expect(controller.$.watcher.updateOriginalData).toHaveBeenCalledWith();
             });
         });
 
         describe('addSale()', () => {
             it('should make a POST query adding a new sale', () => {
-                jest.spyOn(controller.$scope.watcher, 'updateOriginalData');
+                jest.spyOn(controller.$.watcher, 'updateOriginalData');
                 const newSale = {itemFk: 4, quantity: 10};
                 const params = {itemId: 4, quantity: 10};
 
@@ -307,7 +308,7 @@ describe('Ticket', () => {
                 controller.addSale(newSale);
                 $httpBackend.flush();
 
-                expect(controller.$scope.watcher.updateOriginalData).toHaveBeenCalledWith();
+                expect(controller.$.watcher.updateOriginalData).toHaveBeenCalledWith();
             });
         });
 
diff --git a/modules/ticket/front/services/index.html b/modules/ticket/front/services/index.html
index 0cbcbe5df..419110eac 100644
--- a/modules/ticket/front/services/index.html
+++ b/modules/ticket/front/services/index.html
@@ -1,7 +1,7 @@
 <vn-crud-model 
     vn-id="model"
     url="TicketServices"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     data="$ctrl.services"
     auto-load="true">
 </vn-crud-model>
diff --git a/modules/ticket/front/services/index.js b/modules/ticket/front/services/index.js
index fca4cd070..8627360c6 100644
--- a/modules/ticket/front/services/index.js
+++ b/modules/ticket/front/services/index.js
@@ -1,18 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import UserError from 'core/lib/user-error';
 
-class Controller {
-    constructor($http, $scope, $stateParams, vnApp, $translate, $element) {
-        this.$http = $http;
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$element = $element;
-        this.services = [];
-    }
-
+class Controller extends Section {
     $onInit() {
+        this.services = [];
         this.getDefaultTaxClass();
     }
 
@@ -26,10 +18,10 @@ class Controller {
 
     add() {
         if (this.defaultTaxClass) {
-            this.$scope.model.insert({
+            this.$.model.insert({
                 taxClassFk: this.defaultTaxClass.id,
                 quantity: 1,
-                ticketFk: this.$stateParams.id
+                ticketFk: this.$params.id
             });
         }
     }
@@ -40,7 +32,7 @@ class Controller {
 
     newServiceTypeDialog(elementIndex, event) {
         event.preventDefault();
-        this.$scope.createServiceTypeDialog.show();
+        this.$.createServiceTypeDialog.show();
         this.currentServiceIndex = elementIndex;
     }
 
@@ -56,17 +48,15 @@ class Controller {
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
+        this.$.watcher.check();
 
-        this.$scope.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
-            this.$scope.model.refresh();
+        this.$.model.save().then(() => {
+            this.$.watcher.notifySaved();
+            this.$.model.refresh();
         });
     }
 }
 
-Controller.$inject = ['$http', '$scope', '$stateParams', 'vnApp', '$translate', '$element'];
-
 ngModule.component('vnTicketService', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/sms/index.js b/modules/ticket/front/sms/index.js
index ac1131513..56959e3ee 100644
--- a/modules/ticket/front/sms/index.js
+++ b/modules/ticket/front/sms/index.js
@@ -3,21 +3,12 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $translate, vnApp) {
-        super($element, $scope);
-
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-    }
-
     open() {
-        this.$scope.SMSDialog.show();
+        this.$.SMSDialog.show();
     }
 
     charactersRemaining() {
-        const element = this.$scope.message;
+        const element = this.$.message;
         const value = element.input.value;
 
         const maxLength = 160;
@@ -49,8 +40,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$http', '$translate', 'vnApp'];
-
 ngModule.component('vnTicketSms', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/sms/index.spec.js b/modules/ticket/front/sms/index.spec.js
index cd397b9fa..45e7765d1 100644
--- a/modules/ticket/front/sms/index.spec.js
+++ b/modules/ticket/front/sms/index.spec.js
@@ -4,17 +4,16 @@ describe('Ticket', () => {
     describe('Component vnTicketSms', () => {
         let controller;
         let $httpBackend;
-        let $element;
 
         beforeEach(ngModule('ticket'));
 
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             let $scope = $rootScope.$new();
-            $element = angular.element('<vn-dialog></vn-dialog>');
+            const $element = angular.element('<vn-dialog></vn-dialog>');
             controller = $componentController('vnTicketSms', {$element, $scope});
             controller.$params = {id: 11};
-            controller.$scope.message = {
+            controller.$.message = {
                 input: {
                     value: 'My SMS'
                 }
@@ -58,7 +57,7 @@ describe('Ticket', () => {
 
         describe('charactersRemaining()', () => {
             it('should return the characters remaining in a element', () => {
-                controller.$scope.message = {
+                controller.$.message = {
                     input: {
                         value: 'My message 0€'
                     }
diff --git a/modules/ticket/front/summary/index.js b/modules/ticket/front/summary/index.js
index 010110340..7e892b265 100644
--- a/modules/ticket/front/summary/index.js
+++ b/modules/ticket/front/summary/index.js
@@ -1,15 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($scope, $state, $http, vnApp, $translate) {
-        this.$scope = $scope;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$http = $http;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     get ticket() {
         return this._ticket;
     }
@@ -46,9 +39,9 @@ class Controller {
                 tooltip: 'Route summary'
             }
         };
-        this.$scope.routeDescriptor.routeFk = this.summary.routeFk;
-        this.$scope.routeDescriptor.parent = event.target;
-        this.$scope.routeDescriptor.show();
+        this.$.routeDescriptor.routeFk = this.summary.routeFk;
+        this.$.routeDescriptor.parent = event.target;
+        this.$.routeDescriptor.show();
     }
 
     showDescriptor(event, itemFk) {
@@ -63,13 +56,13 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 
     get isEditable() {
@@ -83,10 +76,10 @@ class Controller {
     setOkState() {
         let params = {};
 
-        if (this.$state.params.id)
-            params = {ticketFk: this.$state.params.id};
+        if (this.$params.id)
+            params = {ticketFk: this.$params.id};
 
-        if (!this.$state.params.id)
+        if (!this.$params.id)
             params = {ticketFk: this.ticket.id};
 
         params.code = 'OK';
@@ -112,8 +105,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http', 'vnApp', '$translate'];
-
 ngModule.component('vnTicketSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/summary/index.spec.js b/modules/ticket/front/summary/index.spec.js
index 08557e36e..e1f0e8836 100644
--- a/modules/ticket/front/summary/index.spec.js
+++ b/modules/ticket/front/summary/index.spec.js
@@ -9,7 +9,8 @@ describe('Ticket', () => {
 
         beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnTicketSummary');
+            const $element = angular.element('<vn-ticket-summary></vn-ticket-summary>');
+            controller = $componentController('vnTicketSummary', {$element});
             controller.ticket = {id: 1};
         }));
 
diff --git a/modules/ticket/front/tracking/edit/index.js b/modules/ticket/front/tracking/edit/index.js
index 03c5c6c0f..f2de08389 100644
--- a/modules/ticket/front/tracking/edit/index.js
+++ b/modules/ticket/front/tracking/edit/index.js
@@ -1,16 +1,13 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state, vnApp, $translate, $http) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$state = $state;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.ticket = {
-            ticketFk: $state.params.id
+            ticketFk: this.$params.id
         };
-        this.params = {ticketFk: $state.params.id};
+        this.params = {ticketFk: this.$params.id};
     }
 
     $onInit() {
@@ -64,7 +61,6 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$scope', '$state', 'vnApp', '$translate', '$http'];
 
 ngModule.component('vnTicketTrackingEdit', {
     template: require('./index.html'),
diff --git a/modules/ticket/front/tracking/edit/index.spec.js b/modules/ticket/front/tracking/edit/index.spec.js
index 313a25b73..cf8036814 100644
--- a/modules/ticket/front/tracking/edit/index.spec.js
+++ b/modules/ticket/front/tracking/edit/index.spec.js
@@ -9,7 +9,8 @@ describe('Ticket', () => {
 
         beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $translate, vnApp) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnTicketTrackingEdit');
+            const $element = angular.element('<vn-ticket-tracking-edit></vn-ticket-tracking-edit>');
+            controller = $componentController('vnTicketTrackingEdit', {$element});
             controller.ticket = {id: 1};
             controller.$ = {watcher: {updateOriginalData: () => {}}};
             controller.card = {reload: () => {}};
diff --git a/modules/ticket/front/tracking/index/index.html b/modules/ticket/front/tracking/index/index.html
index 8398a0602..f66c62449 100644
--- a/modules/ticket/front/tracking/index/index.html
+++ b/modules/ticket/front/tracking/index/index.html
@@ -2,7 +2,7 @@
     vn-id="model"
     url="TicketTrackings"
     filter="::$ctrl.filter"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     limit="20"
     data="trackings"
     order="created DESC"
diff --git a/modules/ticket/front/tracking/index/index.js b/modules/ticket/front/tracking/index/index.js
index adc1ac5a2..e58dc4300 100644
--- a/modules/ticket/front/tracking/index/index.js
+++ b/modules/ticket/front/tracking/index/index.js
@@ -1,9 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [
                 {
@@ -37,8 +37,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams'];
-
 ngModule.component('vnTicketTrackingIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/ticket/front/volume/index.html b/modules/ticket/front/volume/index.html
index 0006b8854..977f76513 100644
--- a/modules/ticket/front/volume/index.html
+++ b/modules/ticket/front/volume/index.html
@@ -2,15 +2,15 @@
     vn-id="model"
     url="sales"
     filter="::$ctrl.filter"
-    link="{ticketFk: $ctrl.$stateParams.id}"
+    link="{ticketFk: $ctrl.$params.id}"
     data="$ctrl.sales"
     limit="20">
 </vn-crud-model>
 <vn-crud-model auto-load="true"
-    url="tickets/{{$ctrl.$stateParams.id}}/getVolume"
+    url="tickets/{{$ctrl.$params.id}}/getVolume"
     data="$ctrl.volumes">
 </vn-crud-model>
-<mg-ajax path="tickets/{{$ctrl.$stateParams.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
+<mg-ajax path="tickets/{{$ctrl.$params.id}}/getTotalVolume" options="mgEdit"></mg-ajax>
 <vn-vertical>
     <vn-card class="vn-pa-lg">
         <vn-horizontal>
diff --git a/modules/ticket/front/volume/index.js b/modules/ticket/front/volume/index.js
index 914c9819d..bf616cb24 100644
--- a/modules/ticket/front/volume/index.js
+++ b/modules/ticket/front/volume/index.js
@@ -1,10 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $stateParams) {
-        this.$scope = $scope;
-        this.$http = $http;
-        this.$stateParams = $stateParams;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.filter = {
             include: [{
                 relation: 'item'
@@ -34,7 +33,6 @@ class Controller {
         if (value) this.applyVolumes();
     }
 
-
     applyVolumes() {
         if (!this.sales || !this.volumes) return;
 
@@ -58,18 +56,16 @@ class Controller {
                 tooltip: 'Item diary'
             }
         };
-        this.$scope.descriptor.itemFk = itemFk;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
     }
 
     onDescriptorLoad() {
-        this.$scope.popover.relocate();
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams'];
-
 ngModule.component('vnTicketVolume', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/ticket/front/volume/index.spec.js b/modules/ticket/front/volume/index.spec.js
index 6c2a808eb..2f6efee21 100644
--- a/modules/ticket/front/volume/index.spec.js
+++ b/modules/ticket/front/volume/index.spec.js
@@ -19,7 +19,8 @@ describe('ticket', () => {
             }};
             $state = _$state_;
             $state.params.id = 101;
-            controller = $componentController('vnTicketVolume', {$scope, $httpBackend, $state});
+            const $element = angular.element('<vn-ticket-volume></vn-ticket-volume>');
+            controller = $componentController('vnTicketVolume', {$element, $scope});
         }));
 
         describe('sales() setter', () => {
diff --git a/modules/ticket/front/weekly/index.js b/modules/ticket/front/weekly/index.js
index f15576e9f..edc68aadb 100644
--- a/modules/ticket/front/weekly/index.js
+++ b/modules/ticket/front/weekly/index.js
@@ -1,14 +1,11 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, vnApp, $translate, $http) {
-        this.$ = $scope;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-        this.$http = $http;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
 
         this.ticketSelected = null;
-
         this.weekdays = [
             {id: 0, name: 'Monday'},
             {id: 1, name: 'Tuesday'},
@@ -77,8 +74,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', 'vnApp', '$translate', '$http'];
-
 ngModule.component('vnTicketWeeklyIndex', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/travel/front/basic-data/index.js b/modules/travel/front/basic-data/index.js
index 7406598b0..139ef46e8 100644
--- a/modules/travel/front/basic-data/index.js
+++ b/modules/travel/front/basic-data/index.js
@@ -1,17 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope) {
-        this.$ = $scope;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        return this.$.watcher.submit().then(() => {
-            this.card.reload();
-        });
+        return this.$.watcher.submit().then(() =>
+            this.card.reload()
+        );
     }
 }
-Controller.$inject = ['$scope'];
 
 ngModule.component('vnTravelBasicData', {
     template: require('./index.html'),
diff --git a/modules/travel/front/basic-data/index.spec.js b/modules/travel/front/basic-data/index.spec.js
index ed874d7e8..aaad487ef 100644
--- a/modules/travel/front/basic-data/index.spec.js
+++ b/modules/travel/front/basic-data/index.spec.js
@@ -2,14 +2,14 @@ import './index.js';
 
 describe('Travel Component vnTravelBasicData', () => {
     let controller;
-    let $scope;
+
     beforeEach(angular.mock.module('travel', $translateProvider => {
         $translateProvider.translations('en', {});
     }));
 
-    beforeEach(angular.mock.inject(($componentController, $rootScope) => {
-        $scope = $rootScope.$new();
-        controller = $componentController('vnTravelBasicData', $scope);
+    beforeEach(angular.mock.inject($componentController => {
+        const $element = angular.element('<vn-travel-basic-data></vn-travel-basic-data>');
+        controller = $componentController('vnTravelBasicData', {$element});
         controller.card = {reload: () => {}};
         controller.$.watcher = {submit: () => {}};
     }));
diff --git a/modules/travel/front/create/index.js b/modules/travel/front/create/index.js
index 0d5a2cc01..286d508de 100644
--- a/modules/travel/front/create/index.js
+++ b/modules/travel/front/create/index.js
@@ -2,14 +2,9 @@ import ngModule from '../module';
 import Section from 'salix/components/section';
 
 class Controller extends Section {
-    constructor($element, $, $stateParams) {
-        super($element, $);
-        this.$stateParams = $stateParams;
-    }
-
     $onChanges() {
-        if (this.$stateParams && this.$stateParams.q)
-            this.travel = JSON.parse(this.$stateParams.q);
+        if (this.$params && this.$params.q)
+            this.travel = JSON.parse(this.$params.q);
     }
 
     onSubmit() {
@@ -19,8 +14,6 @@ class Controller extends Section {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$stateParams'];
-
 ngModule.component('vnTravelCreate', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/travel/front/create/index.spec.js b/modules/travel/front/create/index.spec.js
index a6fa5a9b1..e47f30bd3 100644
--- a/modules/travel/front/create/index.spec.js
+++ b/modules/travel/front/create/index.spec.js
@@ -2,7 +2,6 @@ import './index';
 import watcher from 'core/mocks/watcher';
 
 describe('Travel Component vnTravelCreate', () => {
-    let $element;
     let $scope;
     let $state;
     let controller;
@@ -13,7 +12,7 @@ describe('Travel Component vnTravelCreate', () => {
         $scope = $rootScope.$new();
         $state = _$state_;
         $scope.watcher = watcher;
-        $element = angular.element('<div></div>');
+        const $element = angular.element('<vn-travel-create></vn-travel-create>');
         controller = $componentController('vnTravelCreate', {$element, $scope});
     }));
 
@@ -28,8 +27,8 @@ describe('Travel Component vnTravelCreate', () => {
     });
 
     describe('$onChanges()', () => {
-        it('should update the travel data when stateParams.q is defined', () => {
-            controller.$stateParams = {q: '{"ref": 1,"agencyModeFk": 1}'};
+        it('should update the travel data when $params.q is defined', () => {
+            controller.$params = {q: '{"ref": 1,"agencyModeFk": 1}'};
 
             const params = {q: '{"ref": 1, "agencyModeFk": 1}'};
             const json = JSON.parse(params.q);
diff --git a/modules/travel/front/descriptor-popover/index.js b/modules/travel/front/descriptor-popover/index.js
index cb13d7f06..cb7e29bda 100644
--- a/modules/travel/front/descriptor-popover/index.js
+++ b/modules/travel/front/descriptor-popover/index.js
@@ -2,11 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.travel = null;
         this._quicklinks = {};
     }
@@ -76,7 +73,6 @@ class Controller extends Component {
         });
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnTravelDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/travel/front/descriptor/index.js b/modules/travel/front/descriptor/index.js
index 187a7ed8f..911cae010 100644
--- a/modules/travel/front/descriptor/index.js
+++ b/modules/travel/front/descriptor/index.js
@@ -1,20 +1,13 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope) {
-        this.$ = $scope;
-    }
-}
-
-Controller.$inject = ['$scope'];
+import Component from 'core/lib/component';
 
 ngModule.component('vnTravelDescriptor', {
     template: require('./index.html'),
+    controller: Component,
     bindings: {
         travel: '<'
     },
     require: {
         card: '^?vnTravelCard'
     },
-    controller: Controller
 });
diff --git a/modules/travel/front/index/index.spec.js b/modules/travel/front/index/index.spec.js
index e49100d67..4b018dea6 100644
--- a/modules/travel/front/index/index.spec.js
+++ b/modules/travel/front/index/index.spec.js
@@ -11,10 +11,9 @@ describe('Travel Component vnTravelIndex', () => {
 
     beforeEach(ngModule('travel'));
 
-    beforeEach(angular.mock.inject(($componentController, $rootScope) => {
-        let $scope = $rootScope.$new();
-        let $element = angular.element('<div></div>');
-        controller = $componentController('vnTravelIndex', {$element, $scope});
+    beforeEach(angular.mock.inject($componentController => {
+        const $element = angular.element('<vn-travel-index></vn-travel-index>');
+        controller = $componentController('vnTravelIndex', {$element});
         controller.$.summary = {show: jasmine.createSpy('show')};
     }));
 
diff --git a/modules/travel/front/log/index.html b/modules/travel/front/log/index.html
index 8b442f671..fc4622e5a 100644
--- a/modules/travel/front/log/index.html
+++ b/modules/travel/front/log/index.html
@@ -1 +1 @@
-<vn-log url="TravelLogs" origin-id="$ctrl.$stateParams.id"></vn-log>
\ No newline at end of file
+<vn-log url="TravelLogs" origin-id="$ctrl.$params.id"></vn-log>
\ No newline at end of file
diff --git a/modules/travel/front/log/index.js b/modules/travel/front/log/index.js
index a9a07aaf6..742488058 100644
--- a/modules/travel/front/log/index.js
+++ b/modules/travel/front/log/index.js
@@ -1,15 +1,7 @@
 import ngModule from '../module';
-
-class Controller {
-    constructor($scope, $stateParams) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-    }
-}
-
-Controller.$inject = ['$scope', '$stateParams'];
+import Section from 'salix/components/section';
 
 ngModule.component('vnTravelLog', {
     template: require('./index.html'),
-    controller: Controller,
+    controller: Section,
 });
diff --git a/modules/travel/front/summary/index.js b/modules/travel/front/summary/index.js
index 8ee2da49d..af940aa6c 100644
--- a/modules/travel/front/summary/index.js
+++ b/modules/travel/front/summary/index.js
@@ -1,12 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
-import Component from 'core/lib/component';
 
-class Controller extends Component {
-    constructor($element, $, $httpParamSerializer) {
-        super($element, $);
+class Controller extends Section {
+    $onInit() {
         this.entries = [];
-        this.$httpParamSerializer = $httpParamSerializer;
     }
 
     get travel() {
@@ -50,8 +48,7 @@ class Controller extends Component {
             }
         };
 
-        const serializedParams = this.$httpParamSerializer(params);
-        return this.$http.get(`TravelThermographs?${serializedParams}`).then(res => {
+        return this.$http.get(`TravelThermographs`, {params}).then(res => {
             this.travelThermographs = res.data;
         });
     }
@@ -66,8 +63,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$httpParamSerializer'];
-
 ngModule.component('vnTravelSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/travel/front/summary/index.spec.js b/modules/travel/front/summary/index.spec.js
index 9b041f22b..7f5c68aec 100644
--- a/modules/travel/front/summary/index.spec.js
+++ b/modules/travel/front/summary/index.spec.js
@@ -4,7 +4,6 @@ describe('component vnTravelSummary', () => {
     let controller;
     let $httpBackend;
     let $scope;
-    let $element;
     let $httpParamSerializer;
 
     beforeEach(angular.mock.module('travel', $translateProvider => {
@@ -15,7 +14,7 @@ describe('component vnTravelSummary', () => {
         $httpBackend = _$httpBackend_;
         $httpParamSerializer = _$httpParamSerializer_;
         $scope = $rootScope.$new();
-        $element = angular.element(`<vn-travel-summary></vn-travel-summary>`);
+        const $element = angular.element(`<vn-travel-summary></vn-travel-summary>`);
         controller = $componentController('vnTravelSummary', {$element, $scope});
     }));
 
diff --git a/modules/travel/front/thermograph/create/index.js b/modules/travel/front/thermograph/create/index.js
index b35313fc8..6c0464991 100644
--- a/modules/travel/front/thermograph/create/index.js
+++ b/modules/travel/front/thermograph/create/index.js
@@ -1,13 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, $state, $translate, vnApp, vnConfig) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.$state = $state;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.dms = {files: [], state: 'Ok'};
     }
 
@@ -86,8 +82,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$state', '$translate', 'vnApp', 'vnConfig'];
-
 ngModule.component('vnTravelThermographCreate', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/travel/front/thermograph/create/index.spec.js b/modules/travel/front/thermograph/create/index.spec.js
index 625f5bb20..58fbe3991 100644
--- a/modules/travel/front/thermograph/create/index.spec.js
+++ b/modules/travel/front/thermograph/create/index.spec.js
@@ -3,7 +3,6 @@ import './index';
 describe('Ticket', () => {
     describe('Component vnTravelThermographCreate', () => {
         let controller;
-        let $scope;
         let $httpBackend;
         let $httpParamSerializer;
         const travelId = 3;
@@ -11,11 +10,11 @@ describe('Ticket', () => {
 
         beforeEach(ngModule('travel'));
 
-        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
-            $scope = $rootScope.$new();
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, _$httpParamSerializer_) => {
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            controller = $componentController('vnTravelThermographCreate', {$scope});
+            const $element = angular.element('<vn-travel-thermograph-create></vn-travel-thermograph-create>');
+            controller = $componentController('vnTravelThermographCreate', {$element});
             controller._travel = {
                 id: travelId
             };
diff --git a/modules/travel/front/thermograph/edit/index.js b/modules/travel/front/thermograph/edit/index.js
index 018098312..90e0cc7b1 100644
--- a/modules/travel/front/thermograph/edit/index.js
+++ b/modules/travel/front/thermograph/edit/index.js
@@ -1,8 +1,8 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
+class Controller extends Section {
     get travel() {
         return this._travel;
     }
diff --git a/modules/travel/front/thermograph/edit/index.spec.js b/modules/travel/front/thermograph/edit/index.spec.js
index eac92ba0f..180827134 100644
--- a/modules/travel/front/thermograph/edit/index.spec.js
+++ b/modules/travel/front/thermograph/edit/index.spec.js
@@ -5,7 +5,6 @@ describe('Worker', () => {
     describe('Component vnTravelThermographEdit', () => {
         let controller;
         let $scope;
-        let $element;
         let $httpBackend;
         let $httpParamSerializer;
 
@@ -15,7 +14,7 @@ describe('Worker', () => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
             $httpParamSerializer = _$httpParamSerializer_;
-            $element = angular.element(`<vn-travel-thermograph-edit></vn-travel-thermograph-edit`);
+            const $element = angular.element(`<vn-travel-thermograph-edit></vn-travel-thermograph-edit`);
             controller = $componentController('vnTravelThermographEdit', {$element, $scope});
             controller._travel = {id: 3};
             controller.$params = {id: 3, thermographId: 6};
diff --git a/modules/travel/front/thermograph/index/index.html b/modules/travel/front/thermograph/index/index.html
index 583b40eed..dae88d2a7 100644
--- a/modules/travel/front/thermograph/index/index.html
+++ b/modules/travel/front/thermograph/index/index.html
@@ -30,7 +30,7 @@
                         <vn-td>{{::thermograph.created | date: 'dd/MM/yyyy'}}</vn-td>
                         <vn-td shrink>
                             <a target="_blank"
-                                href="api/dms/{{::thermograph.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                                href="api/dms/{{::thermograph.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                                 <vn-icon-button
                                     icon="cloud_download"
                                     title="{{'Download file' | translate}}">
diff --git a/modules/travel/front/thermograph/index/index.js b/modules/travel/front/thermograph/index/index.js
index 48487eb7c..40cae3917 100644
--- a/modules/travel/front/thermograph/index/index.js
+++ b/modules/travel/front/thermograph/index/index.js
@@ -1,11 +1,9 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
-import Component from 'core/lib/component';
 
-class Controller extends Component {
-    constructor($element, $, vnToken) {
-        super($element, $);
-        this.accessToken = vnToken.token;
+class Controller extends Section {
+    $onInit() {
         this.filter = {
             include:
                 {relation: 'warehouse',
@@ -33,8 +31,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', 'vnToken'];
-
 ngModule.component('vnTravelThermographIndex', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/worker/front/basic-data/index.js b/modules/worker/front/basic-data/index.js
index bf38ce848..ebeb4716b 100644
--- a/modules/worker/front/basic-data/index.js
+++ b/modules/worker/front/basic-data/index.js
@@ -1,16 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($) {
-        Object.assign(this, {$});
-    }
-
+class Controller extends Section {
     onSubmit() {
         return this.$.watcher.submit()
             .then(() => this.card.reload());
     }
 }
-Controller.$inject = ['$scope'];
 
 ngModule.component('vnWorkerBasicData', {
     template: require('./index.html'),
diff --git a/modules/worker/front/calendar/index.js b/modules/worker/front/calendar/index.js
index 1860f6bdd..6b849d19f 100644
--- a/modules/worker/front/calendar/index.js
+++ b/modules/worker/front/calendar/index.js
@@ -1,10 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($element, $http) {
-        this.element = $element[0];
-        this.$http = $http;
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.date = new Date();
         this.events = {};
     }
@@ -103,7 +103,6 @@ class Controller {
         dayNumber.style.color = 'rgba(0, 0, 0, 0.7)';
     }
 }
-Controller.$inject = ['$element', '$http'];
 
 ngModule.component('vnWorkerCalendar', {
     template: require('./index.html'),
diff --git a/modules/worker/front/calendar/index.spec.js b/modules/worker/front/calendar/index.spec.js
index 2f85e3a1a..da49b8f0f 100644
--- a/modules/worker/front/calendar/index.spec.js
+++ b/modules/worker/front/calendar/index.spec.js
@@ -4,7 +4,6 @@ describe('Worker', () => {
     describe('Component vnWorkerCalendar', () => {
         let $httpBackend;
         let $scope;
-        let $element;
         let controller;
         let year = new Date().getFullYear();
 
@@ -13,15 +12,10 @@ describe('Worker', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            $element = angular.element('<div></div>');
+            const $element = angular.element('<vn-worker-calencar></vn-worker-calencar>');
             controller = $componentController('vnWorkerCalendar', {$element, $scope});
         }));
 
-        afterEach(() => {
-            $element.remove();
-            $scope.$destroy();
-        });
-
         describe('started property', () => {
             it(`should return first day and month of current year`, () => {
                 let started = new Date(year, 0, 1);
diff --git a/modules/worker/front/department/index.js b/modules/worker/front/department/index.js
index 28c2cfa99..35dc650f6 100644
--- a/modules/worker/front/department/index.js
+++ b/modules/worker/front/department/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $http, vnApp, $translate) {
-        this.$ = $scope;
-        this.$http = $http;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-    }
-
+class Controller extends Section {
     $postLink() {
         this.$.treeview.fetch();
     }
@@ -87,8 +81,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', 'vnApp', '$translate'];
-
 ngModule.component('vnWorkerDepartment', {
     template: require('./index.html'),
     controller: Controller
diff --git a/modules/worker/front/descriptor-popover/index.js b/modules/worker/front/descriptor-popover/index.js
index 55843a67d..6463853f9 100644
--- a/modules/worker/front/descriptor-popover/index.js
+++ b/modules/worker/front/descriptor-popover/index.js
@@ -2,11 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $http, $timeout, $q) {
-        super($element, $scope);
-        this.$timeout = $timeout;
-        this.$http = $http;
-        this.$q = $q;
+    constructor($element, $) {
+        super($element, $);
         this.worker = null;
         this._quicklinks = {};
     }
@@ -84,7 +81,6 @@ class Controller extends Component {
         });
     }
 }
-Controller.$inject = ['$element', '$scope', '$http', '$timeout', '$q'];
 
 ngModule.component('vnWorkerDescriptorPopover', {
     template: require('./index.html'),
diff --git a/modules/worker/front/descriptor-popover/index.spec.js b/modules/worker/front/descriptor-popover/index.spec.js
index dc524bc2d..0b2746475 100644
--- a/modules/worker/front/descriptor-popover/index.spec.js
+++ b/modules/worker/front/descriptor-popover/index.spec.js
@@ -5,17 +5,16 @@ describe('worker Component vnWorkerDescriptorPopover', () => {
     let $httpParamSerializer;
     let $scope;
     let controller;
-    let $element;
 
     beforeEach(ngModule('worker'));
 
     beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
         $httpBackend = _$httpBackend_;
         $httpParamSerializer = _$httpParamSerializer_;
-        $element = angular.element(`<div></div>`);
         $scope = $rootScope.$new();
         $scope.popover = {relocate: () => {}, show: () => {}};
-        controller = $componentController('vnWorkerDescriptorPopover', {$scope, $element});
+        const $element = angular.element(`<vn-worker-descriptor-popover></vn-worker-descriptor-popover>`);
+        controller = $componentController('vnWorkerDescriptorPopover', {$element, $scope});
     }));
 
     describe('workerFk()', () => {
diff --git a/modules/worker/front/descriptor/index.js b/modules/worker/front/descriptor/index.js
index 6dab06958..82cfd0886 100644
--- a/modules/worker/front/descriptor/index.js
+++ b/modules/worker/front/descriptor/index.js
@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($http, $state) {
-        this.$state = $state;
-        this.$http = $http;
-    }
-
+class Controller extends Component {
     get worker() {
         return this._worker;
     }
@@ -33,9 +29,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$state'];
-
-
 ngModule.component('vnWorkerDescriptor', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/worker/front/dms/create/index.js b/modules/worker/front/dms/create/index.js
index e7bfe7bfd..388b9a333 100644
--- a/modules/worker/front/dms/create/index.js
+++ b/modules/worker/front/dms/create/index.js
@@ -1,11 +1,10 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
-    constructor($element, $, vnConfig) {
+class Controller extends Section {
+    constructor($element, $) {
         super($element, $);
-        this.vnConfig = vnConfig;
         this.dms = {
             files: [],
             hasFile: false,
diff --git a/modules/worker/front/dms/edit/index.js b/modules/worker/front/dms/edit/index.js
index 1a593414a..ac0104fa1 100644
--- a/modules/worker/front/dms/edit/index.js
+++ b/modules/worker/front/dms/edit/index.js
@@ -1,8 +1,8 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
+class Controller extends Section {
     get worker() {
         return this._worker;
     }
diff --git a/modules/worker/front/dms/index/index.html b/modules/worker/front/dms/index/index.html
index 697d3d5aa..011d95a95 100644
--- a/modules/worker/front/dms/index/index.html
+++ b/modules/worker/front/dms/index/index.html
@@ -41,7 +41,7 @@
                 <vn-td shrink>
                     <a target="_blank"
                         title="{{'Download file' | translate}}"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">{{::document.dms.file}}
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">{{::document.dms.file}}
                     </a>
                 </vn-td>
                 <vn-td>
@@ -49,7 +49,7 @@
                 </vn-td>
                 <vn-td shrink>
                     <a target="_blank"
-                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        href="api/dms/{{::document.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                         <vn-icon-button
                             icon="cloud_download"
                             title="{{'Download file' | translate}}">
diff --git a/modules/worker/front/dms/index/index.js b/modules/worker/front/dms/index/index.js
index ab3be3408..d322145a0 100644
--- a/modules/worker/front/dms/index/index.js
+++ b/modules/worker/front/dms/index/index.js
@@ -3,9 +3,8 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 class Controller extends Component {
-    constructor($element, $, vnToken) {
+    constructor($element, $) {
         super($element, $);
-        this.accessToken = vnToken.token;
         this.filter = {
             include: {
                 relation: 'dms',
@@ -68,8 +67,6 @@ class Controller extends Component {
     }
 }
 
-Controller.$inject = ['$element', '$scope', 'vnToken'];
-
 ngModule.component('vnWorkerDmsIndex', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/worker/front/dms/index/index.spec.js b/modules/worker/front/dms/index/index.spec.js
index 7378ef301..074f11524 100644
--- a/modules/worker/front/dms/index/index.spec.js
+++ b/modules/worker/front/dms/index/index.spec.js
@@ -3,7 +3,6 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Worker', () => {
     describe('Component vnWorkerDmsIndex', () => {
-        let $componentController;
         let $scope;
         let $element;
         let $httpBackend;
@@ -11,8 +10,7 @@ describe('Worker', () => {
 
         beforeEach(ngModule('worker'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_) => {
-            $componentController = _$componentController_;
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_) => {
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
             $element = angular.element(`<vn-worker-dms-index></vn-worker-dms-index`);
diff --git a/modules/worker/front/index/index.js b/modules/worker/front/index/index.js
index 1b585f013..02632e095 100644
--- a/modules/worker/front/index/index.js
+++ b/modules/worker/front/index/index.js
@@ -1,14 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($, $state) {
-        this.$state = $state;
-        Object.assign(this, {
-            $,
-            selectedWorker: null,
-        });
-    }
-
+export default class Controller extends Section {
     preview(event, worker) {
         if (event.defaultPrevented) return;
 
@@ -31,7 +24,6 @@ export default class Controller {
         callback.call(this);
     }
 }
-Controller.$inject = ['$scope', '$state'];
 
 ngModule.component('vnWorkerIndex', {
     template: require('./index.html'),
diff --git a/modules/worker/front/log/index.js b/modules/worker/front/log/index.js
index 4a577658b..5e42687d3 100644
--- a/modules/worker/front/log/index.js
+++ b/modules/worker/front/log/index.js
@@ -1,9 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-export default class Controller {
-    constructor($scope) {
-        this.$ = $scope;
+export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
         this.actionsText = {
             'insert': 'Creates',
             'update': 'Updates',
@@ -70,8 +71,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnLog', {
     controller: Controller,
     template: require('./index.html'),
diff --git a/modules/worker/front/pbx/index.js b/modules/worker/front/pbx/index.js
index aa869b895..a62280d9b 100644
--- a/modules/worker/front/pbx/index.js
+++ b/modules/worker/front/pbx/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-class Controller extends Component {
+class Controller extends Section {
     onSubmit() {
         const sip = this.worker.sip;
         const params = {
diff --git a/modules/worker/front/summary/index.js b/modules/worker/front/summary/index.js
index a3fbb34f5..f6ee85a5b 100644
--- a/modules/worker/front/summary/index.js
+++ b/modules/worker/front/summary/index.js
@@ -1,13 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($, $http) {
-        Object.assign(this, {
-            $,
-            $http
-        });
-    }
-
+class Controller extends Section {
     get worker() {
         return this._worker;
     }
@@ -60,8 +54,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http'];
-
 ngModule.component('vnWorkerSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/worker/front/time-control/index.js b/modules/worker/front/time-control/index.js
index 13829e0c5..14aeb541f 100644
--- a/modules/worker/front/time-control/index.js
+++ b/modules/worker/front/time-control/index.js
@@ -1,7 +1,8 @@
-import Component from 'core/lib/component';
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
-class Controller extends Component {
+
+class Controller extends Section {
     constructor($element, $, vnWeekDays) {
         super($element, $);
         this.weekDays = [];
diff --git a/modules/zone/front/basic-data/index.js b/modules/zone/front/basic-data/index.js
index a730ed362..40e5b49dc 100644
--- a/modules/zone/front/basic-data/index.js
+++ b/modules/zone/front/basic-data/index.js
@@ -1,20 +1,14 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
-    constructor($scope, $state) {
-        this.$scope = $scope;
-        this.$state = $state;
-    }
-
+class Controller extends Section {
     onSubmit() {
-        this.$scope.watcher.submit().then(() => {
-            this.card.reload();
-        });
+        this.$.watcher.submit().then(() =>
+            this.card.reload()
+        );
     }
 }
 
-Controller.$inject = ['$scope', '$state'];
-
 ngModule.component('vnZoneBasicData', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/zone/front/create/index.js b/modules/zone/front/create/index.js
index 98d377d0f..c0bce4f08 100644
--- a/modules/zone/front/create/index.js
+++ b/modules/zone/front/create/index.js
@@ -1,9 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
-    constructor($scope, $state) {
-        this.$scope = $scope;
-        this.$state = $state;
+export default class Controller extends Section {
+    $onInit() {
         this.zone = {
             travelingDays: 0,
             price: 0.20,
@@ -13,12 +12,11 @@ export default class Controller {
     }
 
     onSubmit() {
-        return this.$scope.watcher.submit().then(res => {
-            this.$state.go('zone.card.location', {id: res.data.id});
-        });
+        return this.$.watcher.submit().then(res =>
+            this.$state.go('zone.card.location', {id: res.data.id})
+        );
     }
 }
-Controller.$inject = ['$scope', '$state'];
 
 ngModule.component('vnZoneCreate', {
     template: require('./index.html'),
diff --git a/modules/zone/front/create/index.spec.js b/modules/zone/front/create/index.spec.js
index c2956b6cf..79fe00ed8 100644
--- a/modules/zone/front/create/index.spec.js
+++ b/modules/zone/front/create/index.spec.js
@@ -19,7 +19,8 @@ describe('Zone Component vnZoneCreate', () => {
                 }
             };
         };
-        controller = $componentController('vnZoneCreate', {$scope});
+        const $element = angular.element('<vn-zone-create></vn-zone-create>');
+        controller = $componentController('vnZoneCreate', {$element, $scope});
     }));
 
     describe('onSubmit()', () => {
diff --git a/modules/zone/front/delivery-days/index.spec.js b/modules/zone/front/delivery-days/index.spec.js
index 35171ab94..125e14f2d 100644
--- a/modules/zone/front/delivery-days/index.spec.js
+++ b/modules/zone/front/delivery-days/index.spec.js
@@ -3,15 +3,13 @@ import popover from 'core/mocks/popover';
 import crudModel from 'core/mocks/crud-model';
 
 describe('Zone Component vnZoneDeliveryDays', () => {
-    let $componentController;
     let $httpBackend;
     let controller;
     let $element;
 
     beforeEach(ngModule('zone'));
 
-    beforeEach(angular.mock.inject((_$componentController_, _$httpBackend_) => {
-        $componentController = _$componentController_;
+    beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
         $httpBackend = _$httpBackend_;
         $element = angular.element('<vn-zone-delivery-days></vn-zone-delivery-days');
         controller = $componentController('vnZoneDeliveryDays', {$element});
diff --git a/modules/zone/front/descriptor/index.js b/modules/zone/front/descriptor/index.js
index 736d8dd31..b3808f256 100644
--- a/modules/zone/front/descriptor/index.js
+++ b/modules/zone/front/descriptor/index.js
@@ -1,10 +1,8 @@
 import ngModule from '../module';
+import Component from 'core/lib/component';
 
-class Controller {
-    constructor($scope, $state, $http) {
-        this.$scope = $scope;
-        this.$state = $state;
-        this.$http = $http;
+class Controller extends Component {
+    $onInit() {
         this.moreOptions = [
             {callback: this.deleteZone, name: 'Delete'}
         ];
@@ -15,7 +13,7 @@ class Controller {
     }
 
     deleteZone() {
-        this.$scope.deleteZone.show();
+        this.$.deleteZone.show();
     }
 
     returnDialog(response) {
@@ -27,8 +25,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http'];
-
 ngModule.component('vnZoneDescriptor', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/zone/front/location/index.js b/modules/zone/front/location/index.js
index 9fcd055b3..c30ded3ad 100644
--- a/modules/zone/front/location/index.js
+++ b/modules/zone/front/location/index.js
@@ -1,8 +1,8 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller extends Component {
+class Controller extends Section {
     $postLink() {
         this.onSearch();
     }
diff --git a/modules/zone/front/main/index.spec.js b/modules/zone/front/main/index.spec.js
index d8d283ad1..24b63a959 100644
--- a/modules/zone/front/main/index.spec.js
+++ b/modules/zone/front/main/index.spec.js
@@ -6,7 +6,7 @@ describe('Zone Component vnZone', () => {
     beforeEach(ngModule('zone'));
 
     beforeEach(angular.mock.inject($componentController => {
-        let $element = angular.element(`<div></div>`);
+        const $element = angular.element('<vn-zone></vn-zone>');
         controller = $componentController('vnZone', {$element});
     }));
 
diff --git a/modules/zone/front/summary/index.js b/modules/zone/front/summary/index.js
index 636e528be..47a6ba32a 100644
--- a/modules/zone/front/summary/index.js
+++ b/modules/zone/front/summary/index.js
@@ -1,12 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-class Controller extends Component {
-    constructor($element, $, $httpParamSerializer) {
-        super($element, $);
-
-        this.$httpParamSerializer = $httpParamSerializer;
-    }
+class Controller extends Section {
     get zone() {
         return this._zone;
     }
@@ -32,8 +27,7 @@ class Controller extends Component {
                 }
             }
         };
-        const serializedParams = this.$httpParamSerializer(params);
-        this.$http.get(`Zones/findOne?${serializedParams}`).then(res => {
+        this.$http.get(`Zones/findOne`, {params}).then(res => {
             this.summary = res.data;
         });
     }
@@ -47,15 +41,12 @@ class Controller extends Component {
                 }
             }
         };
-        const serializedParams = this.$httpParamSerializer(params);
-        this.$http.get(`Zones/${this.zone.id}/warehouses?${serializedParams}`).then(res => {
+        this.$http.get(`Zones/${this.zone.id}/warehouses`, {params}).then(res => {
             this.zoneWarehouses = res.data;
         });
     }
 }
 
-Controller.$inject = ['$element', '$scope', '$httpParamSerializer'];
-
 ngModule.component('vnZoneSummary', {
     template: require('./index.html'),
     controller: Controller,
diff --git a/modules/zone/front/summary/index.spec.js b/modules/zone/front/summary/index.spec.js
index 9025af766..0956fa8c6 100644
--- a/modules/zone/front/summary/index.spec.js
+++ b/modules/zone/front/summary/index.spec.js
@@ -1,7 +1,6 @@
 import './index';
 
 describe('component vnZoneSummary', () => {
-    let $element;
     let $scope;
     let controller;
     let $httpBackend;
@@ -13,7 +12,7 @@ describe('component vnZoneSummary', () => {
         $httpBackend = _$httpBackend_;
         $httpParamSerializer = _$httpParamSerializer_;
         $scope = $rootScope.$new();
-        $element = angular.element(`<vn-zone-summary></vn-zone-summary>`);
+        const $element = angular.element(`<vn-zone-summary></vn-zone-summary>`);
         controller = $componentController('vnZoneSummary', {$element, $scope});
     }));
 
@@ -52,17 +51,4 @@ describe('component vnZoneSummary', () => {
             expect(controller.summary).toBeDefined();
         });
     });
-
-    xdescribe('getEntries()', () => {
-        it('should call the getEntries method to get the entries data', () => {
-            controller._travel = {id: 999};
-
-            const query = `/api/Travels/${controller._travel.id}/getEntries`;
-            $httpBackend.expectGET(query).respond('I am the entries');
-            controller.getEntries();
-            $httpBackend.flush();
-
-            expect(controller.entries).toEqual('I am the entries');
-        });
-    });
 });
diff --git a/modules/zone/front/warehouses/index.js b/modules/zone/front/warehouses/index.js
index 328f3a1b4..9191a1f49 100644
--- a/modules/zone/front/warehouses/index.js
+++ b/modules/zone/front/warehouses/index.js
@@ -1,7 +1,7 @@
 import ngModule from '../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-class Controller extends Component {
+class Controller extends Section {
     constructor($element, $) {
         super($element, $);