Memisahan File Controller AngularJS pada Ionic Framework v1.x

Sebenarnya saya memisahkan file controller saat saya membangun aplikasi mobile menggunakan framework ionic untuk memudahkan pemetaan source code saja ketika source code mulai mempunyai lines yang banyak sekali. Akan lebih mempermudah pekerjaan ketika suatu project masih berjalan dalam cabang development karena akan lebih mudah berpindah controller, saya tidak perlu jauh-jauh men-scroll untuk mencari coding tertentu (karena saya jarang menggunakan fitur pencarian. Itu kadang menyusahkan hahaha :D), tinggal switch saja file controller dari sidebar kiri (saya menggunakan editor Atom). Walaupun lama kelamaan saya kadang suka menjadikan satu file controller saja.

Untuk memisahkan file controller, saya menggunakan metode berikut ini:

app.js (file js utama)

var appVar = angular.module('myApp', ['ionic']);

appVar.run(function($ionicPlatform) {
    // source code Anda
});

appVar.config(function($stateProvider, $urlRouterProvider) {
    // source code Anda
});

Pada file App.js saya masih menggunakan struktur default. Namun, biasanya pada file App.js ini saya menambahkan beberapa komponen lagi (sesuai kebutuhan project sih) seperti directive misalnya. Jadi, tinggal sambung saja:

var appVar = angular.module('kesbeku', ['ionic']);

appVar.run(function($ionicPlatform) {
    // source code Anda
});

appVar.config(function($stateProvider, $urlRouterProvider) {
    // source code Anda
});

controllerVar.filter('directiveAnda', function() {
    // source code Anda
});

 

usercontroller.js (untuk menampung semua controller yang melayani aktifitas user)

//    untuk controller, cukup inisialisasi nama aplikasi saja (myApp)
var userController = angular.module('myApp');

//    untuk controller, silakan inject dependensis sesuai kebutuhan. Dan ingat
//    dependensis sebelum function() harus sama urutannya
//    dengan dependensis di dalam parameter function()

userController.controller( 'UserProfileController', [
    '$scope', '$http', '$state',             // ini
    function($scope, $http, $state) {        // harus sama urutannya dg ini
        //    source code Anda

        /*
         *  STOP YOUR CODE HERE
         */
    }]
);

userController.controller( 'UserUpdateController', [
    '$scope', '$http', '$state',
    function($scope, $http, $state) {
        //    source code Anda

        /*
         *  STOP YOUR CODE HERE
         */
    }]
);

 

homecontroller.js (untuk menampung semua controller yang tidak begitu banyak aktifitas)

var homeController = angular.module('myApp');

homeController.controller( 'AppController', [
    '$scope', '$http', '$state',
    function($scope, $http, $state) {
        //    source code Anda

        /*
         *  STOP YOUR CODE HERE
         */
    }]
);

homeController.controller( 'HomeController', [
    '$scope', '$http', '$state',
    function($scope, $http, $state) {
        //    source code Anda

        /*
         *  STOP YOUR CODE HERE
         */
    }]
);

 

Baiklah, mari coba kita satukan mereka *eaaa *ehh *apaSih 😀

var appVar = angular.module('myApp', ['ionic']);

controllerVar.run(function($ionicPlatform) {
    // source code Anda
});

controllerVar.config(function($stateProvider, $urlRouterProvider) {
    // source code Anda
});


var userController = angular.module('myApp');
userController.controller( 'UserProfileController', [
    '$scope', '$http', '$state,
    function($scope, $http, $state) {
        // source code Anda

        /*
         *  STOP YOUR CODE HERE
         */

    }]
);

userController.controller( 'UserUpdateController', [
    '$scope', '$http', '$state,
    function($scope, $http, $state) {
        // source code Anda

        /*
         *  STOP YOUR CODE HERE
         */
    }]
);

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *