7

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.

Improve this question

3 Answers 3

Reset to default
3

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.

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

1 Comment

Angular 1.X had scopes and controllers would inherit parent scopes. From what I can tell it sounds like Angular 2 (etc.) components are completely contained, simplifying the logic.
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.

Improve this answer

Comments

1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.