AngularJS controller binding

Question

I'm new to AngularJs and I try to understand the basics of controller binding. lets say I have this in my html page:

<div ng-controller ="MainController">
            <h2>{{message}}</h2>
        </div>

Now, in my script file I have two options(as I saw in different tutorials):

1:

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

myApp.controller('MainController', ['$scope', function($scope) {
  $scope.message = 'hello';
}]);

2:

var MainController = function($scope)
{
    @scope.message = "Hello";
};

Offcourse I prefer the second approach however only the first option works for me. I'm working with AngularJS 1.4.4, could it be the second approach is now deprecated?

Thanks!

Joe Martella · Accepted Answer · 2015-08-31 15:13:49Z

1

The second approach is just assigning the controller code to a variable, where in your first approach you pass it directly into the controller function. To make the second approach work, you'd have to pass that variable into the controller function as follows.

myApp.controller('MainController', MainController);

You're doing the same thing. I go with the second approach because I think it's cleaner. Check out John Papa's style guide for clean guidelines on how to write your Angular code.

answered Aug 31, 2015 at 15:13

Joe Martella

7922 gold badges8 silver badges20 bronze badges

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

2 Comments

RiskX Over a year ago

Hi, I'm watching a pluralsight video which doesn't use the line you wrote.

Joe Martella Over a year ago

Hm, well AFAIK, you can't just define a function with the word "Controller" in it and expect it to work properly. Hard for me to say without seeing any of the video or source code though.

Collectives™ on Stack Overflow

AngularJS controller binding

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related