What is a Component?

In AngularJS , a component is a special kind of directive.It allows the developers to make their own custom HTML elements. AngularJS components are very useful to build component based application structures.Following are some key advantages of using components.

  • Components are reusable. Once we created a component it can be used in anywhere in the application by just using its tag.
  • Using components we can build more cleaner and declarative views in the application.
  • Components are isolated and safe from external influences
  • Since components are isolated ,it is easier to test them.

Example code

Following is an example code to implement a simple component in AngularJS

First we will create a component called “student-list.component.js


angular. module('studentApp'). 
component('studentList',{ 
  template:'<ul>'+ 
  '<li ng-repeat="student in $ctrl.students">'+
  '<span>{{student.name}}</span>'+
  '<p>{{student.age}}</p>'+ 
  '</li>'+ '</ul>',
   controller:function studentController(){ 
     this.students=[
        { name:'Kasun', 
        age:'25' },
        { name:'Sunil',
         age:'24' }, 
        { name:'Nimal', 
        age:'23' }, 
        ];
  } 
 });

Here is the “app.js” code


angular.module('studentApp', []);

Following is the body content of “index.html” page. It uses student-list component.


<body ng-app="studentApp">
<!-- Use a custom component to render a list of students --> 
<student-list></student-list> 
</body> 

Advertisements