Proper way to initialize angular module and controller

Question

I am attempting to learn angular.js and have seen a few different ways to initialize the module and controller.

here is how i found to do it through debugging one site I have been using as a guide.

var myApp = angular.module("myApp", []);
myApp.controller("myController", myController);

function myController($scope) {
     //some code
}

and her is a way I have seen it done on a few different tutorials

angular.moudule('myApp', []).controller('myController', function($scope){
    //some code
}

I understand that this may be a personal preference but I would like to know if there is a preferred way or a cleaner way to do it. Also if there is a better way to do please mention that as well.

This is the style guide I use: github.com/johnpapa/angular-styleguide — Red2678
– Red2678, Commented Jan 17, 2016 at 3:22

Shomz · Accepted Answer · 2016-01-17 03:27:30Z

1

Those two ways have more than one difference:

having a global var
chaining methods
inline callback function

That gives us eight total combinations from your two examples, which makes a direct comparison of each tedious. Use whatever you find the most readable to you (and your team) and appropriate for the project (for example, will you need that myApp variable elsewhere in the code such as for loading components from external files, etc). If you still can't decide, there are a couple of Angular style guides online, explore them.

edited Jan 17, 2016 at 3:27

answered Jan 17, 2016 at 3:21

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

harishr · Accepted Answer · 2016-01-17 05:20:33Z

0

I do also follow john papa's style guide.. as per that you should define controllers as

/* recommended */

// some.controller.js
angular
    .module('app')
    .controller('SomeController', SomeController);

function SomeController() { }

answered Jan 17, 2016 at 5:20

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Comments

Venkat.R · Accepted Answer · 2016-01-17 06:30:45Z

There are many ways but always reusable one is better and helpful one.

Keeping module in a separate variable

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

myApp.controller('FirstController', ['$scope', function($scope) {
  $scope.greet = 'Hi Im First Controller !';
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="FirstController">
  {{ greet }}
</div>

Chaining the Method

var myApp = angular.module('myApp',[]).controller('SecondController', ['$scope', function($scope) {
      $scope.greet = 'Hi Im Chained Second Controller !';
    }]);

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="SecondController">
      {{ greet }}
    </div>

Collectives™ on Stack Overflow

Proper way to initialize angular module and controller

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