Possible to use ngBoilerplate type structure with ionic app?

ionic-v1
1

Hello! I am build a mobile app using ionic and would like to use a structure similar to the proposed structure by @joshdmiller here - https://github.com/yeoman/generator-angular/issues/109, which is based on his ngBoilerplate project - https://github.com/ngbp/ngbp.

So rather than putting all of the states within the main app.js, each component/section of the app would contain it’s own module, state router, services, views etc. I have started to experiment with this structure however have been unable to get it to work so far. Do any of the ionic masters see any reason why such a structure could not be used in an ionic app?

Thank you.

1 Like
2

As reference, here is what my compiled app.js looks like:

(function() {
‘use strict’;

angular.module('test-mobile', ['ngRoute', 'ionic', 'restangular', 'test-mobile-chat', 'templates'])

.run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
        });
    })
    .config(function($routeProvider) {
        $routeProvider
            .otherwise({
                redirectTo: '/chat'
            });
    });

})();

(function() {
‘use strict’;

console.log('chat module');

angular.module('test-mobile-chat', ['ngRoute', 'ionic', 'restangular'])
    .config(function($stateProvider, $urlRouterProvider) {
        console.log('config');
        $stateProvider
            .state('chat', {
                url: "/chat",
                abstract: true,
                templateUrl: 'chat/chat.html',
                controller: 'ChatCtrl'
            });

    }).controller('ChatCtrl', function($scope) {

        $scope.awesomeThings = [
            'Nolan',
            'Kirsten',
            'Sadie',
            'Nyla'
        ];

        console.log('chat controller loaded', $scope.awesomeThings);
    });

})();

(function() {
‘use strict’;

angular.module('test-mobile-main', ['ngRoute', 'ionic', 'restangular'])
    .config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'main/main.html',
                controller: 'MainCtrl'
            });
    })
    .controller('MainCtrl', function($scope) {
        $scope.awesomeThings = [
            'HTML5 Boilerplate',
            'AngularJS',
            'Karma'
        ];
    });

})();