App.js Different Module Structures?

ionic-v1
1

I am working on implementing authentication into my ionic app by following a tutorial (http://devdactic.com/user-auth-angularjs-ionic/) and noticed that the app.js structure in the tutorial is as follows:

angular.module('starter', ['ionic','ngMockE2E'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
     //code
  });
})

.config(function ($stateProvider, $urlRouterProvider, USER_ROLES) {
 //code
})

.run(function($httpBackend){
  //code
});

The module is defined at the top with each separate control starting with a “.”

In the app I have written, I have the following structure:

(function() {
 var app = angular.module('nh-launch', ['ionic', 'ngCordova', 'ngResource', 'angularRandomString']);

 app.controller('Header', function ($scope, scService, SyncCheck,           $cordovaDialogs, Connection) {
       //code
  });

  app.factory('Submission', function($resource) {
      //code
  });
}());

Where the module is contained in a variable and then “put into” each control with app.control. There is also a containing function wrapping the entire app.js code.

Is there any difference in functionality or is this simply a difference of personal preference? It seems it wouldn’t be best practice to merge the two. So which technique should I follow and why?

Also please correct me if I have defined anything incorrectly. I do not exactly know what is considered a “module” or “control”. I’m here to learn, thanks!

2

It’s a matter of style, the second example seems to follow more John Papa’s angularjs style guide.
However, please note that both exampes are from tutorials and tend to put everything in same file for conciseness, in real apps it’s not a good idea for maintainability, John Papa has some guidelines about this too.

1 Like
3

You can find other examples in projects generated by generator-m-ionic.