Controller replaced with Component angular 2

Question

I am little confused to differentiate between Component vs Controller . How Controller replaced with component in angular 2? I read about component:

In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

This makes it easier to write an app in a way that's similar to using Web Components or using Angular 2's style of application architecture.

Advantages of Components :

• simpler configuration than plain directives
• promote sane defaults and best practices
• optimized for component-based architecture
• writing component directives will make it easier to upgrade to Angular 2

When not to use Components :

• for directives that need to perform actions in compile and pre-link functions, because they aren't available
• when you need advanced directive definition options like priority, terminal, multi-element
• when you want a directive that is triggered by an attribute or CSS class, rather than an element.

from AngularJs Documentation

Also , Read difference between Directive vs Component

But I am implementing same logic in component which we are doing in controller .

So can someone explain about the same? And How to think about the architecture of the application in component perspective over controller .

Answer 1

I would not differentiate them from the perspective of architecture of the application as you ask. It is pretty much the same concept, that is rebranded and made easier. Long story short you can think of it as the same type of entity.

I suppose component is easier for people to grasp than controller even though it fits in MVC, being the last "C". Often it's a bit easier to reason about a component as an element of the UI. One can think of the whole UI consisting of multiple components each doing its little job to create the whole picture and thus the name fits better from the point of view of Angular team I guess. I like component better as well.

Answer 2

Controller (Angular 1.x), is replaced with the component class in Angular 2, because now we have ES6 classes.

ES6 classes, combined with Typescript, makes very easy for stuff like dependency injection.

Template is there in both Angular and Angular 2.

Answer 3

From: https://kw-angulardart.appspot.com/tutorial/05-ch03-component.html (This version of the tutorial uses AngularDart version 0.10.0.). Could be outdate, but might be helpful too?

The key difference between components and controllers is that the inner structure of components are isolated from their surroundings and can be thought of as black boxes.

Components create their own scope hierarchy that is invisible from the outside world. They don't have direct access to the app's scope, nor does the app have direct access to a component's scope.

Components isolate their views from their surroundings by creating a shadow DOM. Using a shadow DOM allows components to be used anywhere without suffering from things like CSS name collisions.