Does $scope is automatically injected to controller in Angular js?

Question

Initially I was thinking $scope is automatically injected to controller in Angular JS.But Now I am confused. I wrote a small snippet of code.

index.html

 <html ng-app>
  <body ng-controller="Controller">
  <input type="text" ng-model="fname">
  <span ng-bind="fname"></span>
 <body>
</html>

script.js

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$http', function($scope) {
    $scope.fname = 'Foo Bar';

}])

As you can see I am not injecting $scope here to the controller. When the page loads, it does not show 'Foo Bar' on the textfield or span. But when I start writing some value on the text field , It reflects on the span. This means 'fname' declared in scope.But why its not showing on the page load. Everything works fine when I inject $scope.

You are injecting $http into the controller, but calling it $scope. — Jim Cote
– Jim Cote, Commented Aug 28, 2014 at 11:45
@JimCote: No, I have intentionally passed $http as I need that , its just a small piece of code to show the example — user3427540
– user3427540, Commented Aug 28, 2014 at 12:12
The list of strings in the array should match the params of the controller function. Otherwise, minification will break your app. Your code does not inject $http into the controller. — Jim Cote
– Jim Cote, Commented Aug 28, 2014 at 22:53

Malkus · Accepted Answer · 2014-08-28 12:28:06Z

3

You have a couple different things going on.

First, you need to bind the app in some way to the DOM, in this case you named your module docsSimpleDirective so you need to add ng-app="docsSimpleDirective a the same level or above your controllers

<!-- added ng-app="docsSimpleDirective" -->
<div ng-app="docsSimpleDirective" ng-controller="Controller">
  <input type="text" ng-model="fname">
  <span ng-bind="fname"></span>
</div>

Second, you are using the array annotation for defining dependencies which is good. You will run into problems if you don't do this and you try to uglify your code. The way you currently have it bound you do not pass $scope to the controller you are passing $http with the name $scope.

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) { 
          // Not ['$http', function($scope)....
    $scope.fname = 'Foo Bar';
}])

If you want to pass $scope and $http to the controller it would be defined like this.

.controller('Controller', ['$scope','$http', function($scope,$http) {

In short you could do .controller('Controller', ['$scope','$http', function(foo,bar) { ... and foo would equal $scopeand bar would equal $http. This is done so that when the code is uglified and uglifiery will not change the literal strings for $scope and $http so the references will not be broken.

Here is a working Fiddle

edited Aug 28, 2014 at 12:28

answered Aug 28, 2014 at 12:03

Malkus

3,7262 gold badges27 silver badges39 bronze badges

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

5 Comments

user3427540 Over a year ago

Is it necessary to pass $scope before $http? Is this order matters?

Malkus Over a year ago

No they could be in any order.

user3427540 Over a year ago

So $scope must be injected for all cases where we need that?

noypi Over a year ago

in any order. BUT, the parameters in the function should be in the same order as the previous defined strings in the array.

Malkus Over a year ago

@user3427540 If you don't use $scope then you do not have to pass it in. In most cases you will need $scope because it is what binds data to the DOM.

Collectives™ on Stack Overflow

Does $scope is automatically injected to controller in Angular js?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related