What is Components in AngularJS?

In previous tutorial you learn how to use controller and view to generate dynamic html page.

Component in angularjs basically combines controller + view or template. Imagine that you are creating a web application where you have to reuse some part of your coding again and again.

In that case you can create a component that holds some code that can be reused later in your application again and again. You will understand when we jump into code.

To define a component we use component() function.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AngularJS 1</title>

    <!-- cdn for ootstrap Links for css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- cdn for angularjs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="phoneListApp">
    <div class="container" ng-controller="PhoneListController">
        <h1>Phone List</h1>
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="phone in phones">
                {{phone.name}}
            </li>
        </ul>
    </div>
</body>
</html>

In above code, we made following part dynamic:

<ul class="list-group">
    <li class="list-group-item" ng-repeat="phone in phones">
       {{phone.name}}
    </li>
</ul>

Imagine, if your app is using above list over and over. It is a wastage of time to write same code again and again rather we will convert above code to a component.

Let's replace above html code with a directive that we will use as a component:

<phone-list></phone-list>

What we basically doing here is declaring a new directive or html tag which will refer to our new component.

Let's update our html logic first as below:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AngularJS 1</title>

    <!-- cdn for ootstrap Links for css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- cdn for angularjs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="phoneListApp">
    <div class="container">
        <h1>Phone List</h1>
        <phone-list></phone-list>
    </div>
</body>
</html>

Checkout the above code now we have replaced the ul element entirely because we are going to create a component now rather then using controller and view separately.

Let's update our app.js file and understand what it is doing:

angular.
    module('phoneListApp', []).
    component('phoneList', {
    template: '<ul><li class="list-group-item" ng-repeat="phone in $ctrl.phones">{{phone.name}}</li></ul>',
    controller: function PhoneListController() {
        this.phones = [
            {
                name: 'Sony'
            }, {
                name: 'Iphone'
            }, {
                name: 'Samsung'
            }, {
                name: 'BlackBerry'
            }
        ];
    }
});

Let's understand the code function component takes two argument first name of the component in this case it is phoneList and second parameter is a json array of variable template and controller.

Template variable now have our actual ul element logic here if you notice.

Controller variable is a function that takes no argument or $scope as argument. Within this controller function keyword this refers to $scope and it binds the data to the view or template.

Once you declare this component name in camel case phoneList then in your html file you can write them as  <phone-list></phone-list>.

Every time you use directive in your html you will see that ul element will be appended to your html file. The idea of component is to create re-usable directive.

For example, if you have a webpage where you display phone list few times then you dont have to repeat your html code rather you use same directive you define as a component.

Let's take a look at the following code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>AngularJS 1</title>

    <!-- cdn for ootstrap Links for css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <!-- cdn for angularjs -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="phoneListApp">
    <div class="container">

        <h1>Phone List 1</h1>
        <phone-list></phone-list>

        <h1>Phone List 2</h1>
        <phone-list></phone-list>

    </div>
</body>
</html>

In above code, we are displaying the same phone list twice by adding <phone-list></phone-list> component directive twice in our html code.

What did we learn today?

Component in angularjs can be used for:

  • to create re-usable code
  • Our phone list is reusable. Just drop anywhere in the page to get a list of phones.
  • to combine view+controller to create a component
  • Our main view (index.html) is cleaner and more declarative.
  • It's easier to test our component in isolation.

News and Updates

Subscribe to our newsletter and receive the latest news from TheThemeio.


Related Tags


Related Articles