Working with components allow us to use the life cycle hooks .

Enables separating instantiating and initialization to build a model steps.

Instantiating not interact with services for instance.



So now we can use the $onInit hook to get the data using the $http service after separating the controller logic to a private function.


We divide the logic from the controller and just use the function of fetching the movies by usage of $http.


Pay attention –

import the annotation of dependencies to the controller definition of the component using array.

initialize the movies as empty array at the controller.- thus , nullifying the previous values. 


Now at the template we can create a relevant table with some actions buttons.


Using emmet plugin we are creating the bootstrap pattern for table with buttons using the glyphicons to up vote and down vote the movies.


Now we add the logic of up and down voting to the controller.


We are setting conditions to be more than 1 and less than 5. Simple logic to be improved if needed.


In component we always build an element with isolated scope. It is less dynamic then building the directives but it is a best practice and does answer 95% of scenarios needed for business app.



If we want to change our rating to component we can create it separately (instead of directive as we would do it in the past).

SO we create the files for it – component and html for it.

We’ll add the glyphicons to show the stars at the html of the component of the ratings


We’ll create a transclude content for the stars with astrix , this way if none defined from external source the astrix will be shown.



and inside the component we will define the transclude as true to enable the injection of the glyphicons into the component.


the binding “<” says that we will get the data from external source from outside world.

controllerAs changes the $ctrl to model name using isolated scope.

the transclude = true says that if no data will be entered from outside we will use inner data to init the visuals.




Testing definitions :



So now we create the karma test using the controller initialization to movieList and use it to initialize the controller getting back the controller from the component


Adding the routing


Adding ngRoute to the module and creating extra component and adding the routingang1_13.png