Modular coding in Ionic

Question

I would like to know how to code by feature in an Ionic application (and this point should be widened out to all Single Page Applications).

If I have an index.html that looks like this:

<!DOCTYPE html>
<html ng-app="ionicApp">

  <head>
      ....
  </head>
  <body>
      <ion-nav-bar class="bar-positive">
    </ion-nav-bar>

    <ion-tabs class="tabs-positive" animation="slide-left-right">
        <ion-tab icon="ion-home" ui-sref="home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab icon="ion-android-search" ui-sref="some-tab">
            <ion-nav-view name="some-tab" ></ion-nav-view>
        </ion-tab>
        <ion-tab icon="ion-android-settings" ui-sref="settings">
            <ion-nav-view name="settings-tab" ></ion-nav-view>
        </ion-tab>


    </ion-tabs>
 </body>
</html>

And an app.js file that looks like this:

var app = angular.module('ionicApp', ['ionic', 'ratings']);

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

$stateProvider
.state('default', {
  url: "/",
  views: {
    'home-tab': {
      templateUrl: "templates/home.html",
      controller: 'HomeTabCtrl'
    }
  }
})
...
  });


});

How can I load different modules that perform different tasks? If this were a situation where different html pages were being loaded (standard web app), I could change the module reference at the top of the page. But with an SPA it loads the same index.html file everytime.

So, what do we do to achieve modularised code in Ionic?

quilligana · Accepted Answer · 2015-03-28 22:28:06Z

I do some work for Podmedics and lately I've written a lot of Ionic apps. We faced the exact same issue of wanting to write modularized code. We actually built a starter project (it's not like the ionic-starter projects though), which uses a modularized pattern. Check out podmedics/ionic_starter.

The main principle is that our directory structure is organised by feature, with each feature being loaded as a separate module. In the case of Ionic, each feature represents a different view in the app. index.html outlines the basic app structure. Everything else lives inside /app. Check out app.module.js. core and data are loaded first and then each of the features are loaded below it.

The core module lives inside the /core directory. It pulls in any dependancy modules such as ionic and ngCordova. config.js contains all the stuff you normally see stuffed into app.js in most other ionic projects such as the .run and .config functions. We also added a constants.js file here for storing things like api endpoints and keys.

/data contains any factories or services we use to supply data to our controllers. Some of our apps have tons of these. After that, we just add views/features as necessary.

The code is well commented (as much for ourselves to follow as for anyone else) so you should be able to figure out the structure and methodology behind it pretty easily.

Oh, and the code pattern we used is mostly based on johnpapa/ng-demos/modular (sorry can't provide another link - haven't enough rep apparently :( but shouldn't be hard to find).

Happy coding...

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

One kind of modularization can be achieved using an AMD (Asynchronous Module Definition). See this ionic with angular example.

If you just want to load different parts of the view into one place, you may use ngBindHtml

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 12, 2015 at 10:02

Benjamin

1,1737 silver badges19 bronze badges

Comments

colefner · Accepted Answer · 2015-04-17 05:04:23Z

I have a similar approach as @quilligana. We use the ui-router to help define the structure of the app. Each route has its own controller and the modularity comes through the use of shared services and directives. All of which are glued together by event sent in either direction in the scope hierarchy. Our directory structure is as follows:

app/
   controllers/
   services/
   directives/
   views/
   styles/

We found a nice solution for storing various keys and endpoints with the grunt-ng-constant node package. This will allow you to set different variables based on your environment. This is all managed in the Gruntfile.js. I think they make one for Gulp as well, if that's what you're using.

I hope this helps!

Collectives™ on Stack Overflow

Modular coding in Ionic

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related