in Angular components javascript ~ read.
Angular 1.x Components

Angular 1.x Components

People are quite excited about angular 1.5 components but when they are started using it eventually start thinking whats different from directive. So lets check why Angular introduces Component, why its different from directive, whats its use cases.


As we all know Angular 2.0 is already released and all are surprised why there is so many changes. And these changes are meant for good reason check here. Main thing we should understand about Angular 2.0 is it's components based approach, so making advantage of component from 1.x in our code we are making eventual move towards Angular 2.0 bit easier and also web components.


Components are syntax sugar for good old .directive() method which you love most and use it.
It is actually simplifies the way we write components - UI components using directive and follows best practices:

  1. Components have by default isolated scopes.
  2. Components control only their own view and data.
  3. Components use controller instead of link() functions.
  4. Components by default used ControllerAs syntax.

Advantages of components

  1. Simpler configuration than directives.
  2. Optimised for component-based architecture
  3. Writing component directives will make it easier o upgrade to Angular 2

When not to use components

  1. For directives that to perform action in compile and pre-link functions.
  2. When you need advanced directive definition options like priority, terminal, multi-element
  3. When you want a directive that is triggered by an attribute or css class, rather than an element.

Simple words use components for HTML components which don't need DOM manipulation and are more reusable parts of your app.

Simple conventions to be used for components definitions:

Inputs should be using < and @ bindings. where < denotes One-way data bindings. The difference to = is that the properties in components scope are not watched. @ bindings can be used when the input is string, especially when the value of the bindings doesn't change. Outputs are realised with & bindings, which function as callbacks to component events.

Well-defined component lifecycle

  • $onInit() - Executed after all the controllers on element have been constructed and had their bindings initialised means before pre and post linking function for the directives on this element. We can now use this lifecycle hook to do initialisation work,mocking http requests whenever we construct components which needs data from server. Intercomponent communication now everybody is worrying can be achieved using this hook as we can access controllers or parent components on our own components, which means no need of link() function any more.

  • $onChanges(changeObj) - Executed whenever one-way bindings are updated, where changeObj is values of an object of the form {currentValue, previousValue, isFirstChange()}. This hook now avoid writing unnecessary watches inside directives to watch bindings update.

  • $onDestroy() - Executed when components containing scope is destroyed, can be used to release external resources, watches and event handlers.

  • $doCheck() - Executed on every turn of digest cycle. Provides an opportunity to detect and act on changes. Implementing this hook won't affect anything on hook $onChanges(). This hook is useful to do deep equality check which would be not detected by Angular's change detector. This hook is invoked without any arguments so you need to store previous values to comparisons.

  • $postLink() - Executed after controller's element and its children have been linked. This hook can be used to setup DOM event handlers and direct DOM manipulation. Which I personally feel your components should not do and that should be handled by directives only.

I hope you enjoyed this post. Please feel free to comment/share this post, many more to come ahead keep visiting.