Controllers and components in templates

AngularJS provides the ng-controller directive to attach a controller to the view and ties the view to the controller related to that view. Angular doesn't support the controller and the ng-controller directive to associate a controller to the view. The component agrees its associated view or template and not vice versa.

AngularJS:

<div ng-controller="PacktBooksCtrl as vm"> 

Angular:

@Component({ 
  selector: 'packt-books', 
  templateUrl:'app/packtbooks.component.html' 
})

In AngularJS, we define controllers using Immediately Invoked Function Expressions (IIFE). In Angular, we define components using TypeScript classes decorated with @Component, providing the metadata such as selector, templateUrl, and others.

AngularJS:

(function () { 
  ... 
}()); 

Angular:

@Component({ 
  selector: 'packt-books', 
  templateUrl:'app/packtbooks.component.html' 
}) 
export class PacktBooks { 
}