CODEWITHSUNDEEP
javascriptangularjs
good_evening
good_evening

Reputation: 21759

Why do we need to use $scope here?

(function() {
    var app = angular.module("someawesomemodule", []);

    app.factory('data', function(){
        return { sometest: 'x' };
    });

    app.controller("FirstController", function( $scope, data ) {
        $scope.data = data;
        $scope.data.sometest = "a";
    });
})

Why this doesn't work?

(function() {
    var app = angular.module("someawesomemodule", []);

    app.factory('data', function(){
        return { sometest: 'x' };
    });

    app.controller("FirstController", function( data ) {
        data.sometest = "a";
    });
})

What is $scope..?

Upvotes: 0

Views: 113

Answers (4)

Brocco
Brocco

Reputation: 65033

What is $scope

$scope is the glue between your controller(s) and your views. It is what holds the data that is bound into your UI/markup.

Items that you place into the $scope in your controller are available to utilize in your markup, this includes values and functions.

$rootScope is the parent of all scopes in your app via parent/child relationships.

Why doesn't it work

The real reason you can not use this is Dependency Injection angular's dependency injection engine does lookups based upon strings (name of the parameters) in the order which they appear, which is why you'll see these two syntaxes:

module.controller('MyCtrl', function($scope){});
module.controller('MyCtrl', ['$scope', function($scope){}]);

Both are valid, but the first one will break if you minified/uglify your code because $scope will get renamed, but '$scope' will not.

So when you change $scope to data angular does not know what to pass into your controller.

Upvotes: 1

Pete Thorne
Pete Thorne

Reputation: 2776

$scope is a container that holds the data for a controller. $scope's are not available to other controllers directly so it's useful for keeping separation between your parts of code. Views can only access controller data if it's been added to $scope.

var myGreatVariable;

not available to view yet...

$scope.myVar = myGreatVariable;

View can now access variable and display it like this:

{{ myVar }}

There exists a global scope shared by all controllers that inject it called $rootScope. You should not use $rootScope too often as more likely than not you actually want a service for this.

app.controller("SomeController", function( $rootScope ) {
    $rootScope.userId = 123;
});

app.controller("SomeController", function( $scope, UserService ) {
    $scope.userId = UserService.id;
});

Upvotes: 1

Chrissx
Chrissx

Reputation: 357

$scope is glue between the view and your controller. If u want to share datas between these you have to use.But you can use this syntax:

app.controller("FirstController", function( data ) {
        this.data.sometest = "a";
    });

But this is not the best scenario:) Best way use $scope:

(function() {
    var app = angular.module("someawesomemodule", []);

    app.factory('data', function(){
        return { sometest: 'x' };
    });

    app.controller("FirstController", function( $scope, data ) {
        $scope.data = data;
        $scope.data.sometest = "a";
    });
})

In the view:

<div ng-controller="FirstController">
    {{data.sometest}}
</div>

This will be a good start to think about Scope and Angular JS. If you start learning AngularJS start reading tutorials in Angular JS page after that read some design stuff like this

Upvotes: 1

Andre Paap
Andre Paap

Reputation: 751

The scope is described on the angular developer guide. https://docs.angularjs.org/guide/concepts

Upvotes: 0

Related Questions