Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Controller replaced with Component angular 2

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.

like image 219
Abhijeet Shukla Avatar asked Jan 14 '17 11:01

Abhijeet Shukla


People also ask

What is the replacement of the controller and scope in angular 2?

The controllers and $scope in Angular 1 have been replaced with “Components” in Angular 2. Hence we can say that it is a component-based framework, which uses zone.

Is component the same as controller?

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.

What is ngUpgrade in Angular?

The ngUpgrade library in Angular is a very useful tool for upgrading anything but the smallest of applications. With it you can mix and match AngularJS and Angular components in the same application and have them interoperate seamlessly.

Does Angular have controller?

AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.


2 Answers

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.

like image 111
Ilya Chernomordik Avatar answered Oct 06 '22 13:10

Ilya Chernomordik


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.

like image 30
duke636 Avatar answered Oct 06 '22 13:10

duke636