49

In Angular 2.0, there will be no $scope.

What is the alternative to that? How will I be able share data between the components? Will the scope option be available in directives? More practically, is there a current alternative to that that I can get acquainted with?

I am aware of controller as but I read that controllers will be eliminated too.

Confused on such a revolution the Angular team has started.

6 Answers6

48

Angular 2.0 is using this instead of $scope.

One of the major changes coming in 2.0 is the death of the controller, and a new emphasis on components. Big advantage of moving towards component-based apps is that it's easier to define their interfaces; plus, HTML elements already have an easily mappable interface in events, attributes, and properties.

See the Migration of AngularJS 1.3 to 2.0 here. Also see the complete documentation of Angular 2.0 here

Deepzz
  • 4,573
  • 1
  • 28
  • 52
Saidh
  • 1,131
  • 1
  • 12
  • 21
20

In Angular2 you use shared services instead of $scope https://angular.io/docs/ts/latest/cookbook/component-communication.html

@Injectable()
class SharedService {
  someState:String;
  someEventStream:Subject<String> = new Subject<String>();
}

@Component({
  selector: ...,
  providers: [SharedService] 
})
class MyComponent {
  constructor(private sharedService:SharedService) {}
}

For each provider ([SharedService] is short for [{provide: SharedService, useClass: SharedService}]) in above example a single instance is maintained.

The scope of such a provider is the component where it is provided and it's descendants when no descendant has the same provider registered.

When a component requests a dependency constructor(private sharedService:SharedService), Angulars DI (dependency injection) starts looking at the components own providers and then upwards towards the root component and then the providers registered at bootstrap. It returns the first one it finds.

If two components got the same instance (from the same provider) injected, then they can communicate using this service by subscribing to and emitting events of the Subject or reading and writing the state or by calling methods on the service.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    This is such an awesome way to do this. I was using Input and injecting the provider to a parent component then using Input to add that single provider instance to 2 child components – James Freund Sep 27 '16 at 21:21
  • Thanks. A shared service can also be shared between unrelated components, passing it to inputs only works for direct children. – Günter Zöchbauer Sep 28 '16 at 02:58
6

Using controller as is a good way to get used to working without $scope although you'll still need $scope for a few things like watchers and events. Controllers are not really being removed in Angular 2.0. But there won't be an equivalent of ng-controller. Instead of having controllers and views you will just have directives which essentially encapsulate the controller and the view.

rob
  • 17,995
  • 12
  • 69
  • 94
  • 1
    Could you provide a quote or even better, a link to where you found that? –  Nov 20 '14 at 23:08
  • 1
    @jasonszhao Igor and Misko talk about it in Angular Air around the 52:00 minutes mark. http://youtu.be/LG9VkCDbte0?t=51m43s. Some other good sources are the videos from ng-europe or Rob Eisenbergs blog post http://eisenbergeffect.bluespire.com/all-about-angular-2-0/. You can search for "controller as" to see where he talks about it – rob Nov 21 '14 at 00:27
  • 1
    will that be like polymer? – Bargitta Jun 22 '15 at 20:00
3

I wouldn't worry about 2.0 at all. The angular team has said that:

It's too soon to start building anything with 2.0 code -- we're still in the very early stages of building out the project.

Trying to learn something that is this early in development could largely end up being a huge waste of your time. That being said, if you do want to get a jump start on Angular 2.0, the new router that was introduced with 1.3 is -- as of now -- the router they intend on using for 2.0

Pytth
  • 4,008
  • 24
  • 29
  • 6
    This was written back in 2014 and isn't really as valid anymore. If you developing with Angular 1.x, you should definitely be trying using at least Angular 1.5 where they introduced the angular.component method. – Aaron Storck May 06 '16 at 17:18
3

Angular 2 does not share data between components like Angular 1 did. Instead what they do is passing down data by using it inside the template and passing up events (by just using the bubble behaviour which events have by default). And you access data from the pattern by using the component class (Have a look at the 1000000000 "angular 2 - How to get started" videos on Youtube if you have no idea what I mean by class).

Haringat
  • 31
  • 1
0

We can do this in angular without injecting an service into component class. By using rxjs subject, 'Behaviour Subject', which carries our data fulfilling the same requirement as $scope variable

Here is a stackblitz example where I export an const letter in sub.service.ts which is subscribed in necessary components.

Velen Aranha
  • 1
  • 1
  • 3