Introduction
This article discusses how to create a reusable component in Angular js. This tutorial is for beginners/freshers or students. I have created the functionality of component and used in our program. It is a good idea to create a component and reduce the code of a program in angular js. I hope this will be helpful for you for creating a component in Angular js.
Angular Js Code Point
- ng-app - This directive is used to bootstrap the application. Normally, it is put in a top-level element like HTML or body tag.
- ng-controller - It is the main component of AngularJS which contains the state and logic both. It acts as a bridge between services and views.
- $scope - It provides and the link between the data and views. It holds all the required data for the views and used within the HTML template.
- {{expression}} - It is called expressions and JavaScript-like code can be written inside. It should be used for mainly small operations in the HTML page.
- ng-repeat - It actually repeats the element on which it is used based on the provided list of data. In our example card view component using JSON object which contains a list of software, hotel, or product sample data.
- $ctrl - By default, the components use $ctrl as the controller alias.
Angular Js Component
We know that the template acts as a blueprint for how our data should be organized and presented to the user. So the combination (template + controller) is such a common and recurring pattern. AngularJS provides an easy and concise way to combine them together into reusable and isolated entities, known as components. To create a component, we use the .component() method of an AngularJS module. We must provide the name of the component. The name of the component is in camelCase (e.g. myDataComponent), but we will use kebab-case (e.g. my-data-component) when referring to it in our HTML. By default, components use $ctrl as the controller alias, but we can override it, should the need arise.
Example:
Section 1
Section 1 shows a short view of the code part. We create ng-app myApp and in the body part we create three ng-controller myCardHotel,myCardCompany and myCardProduct. Both ng-app and ng-controller as the two main parts of angular js. Another in header tag we include angular.min.js and link bootstrap.min.css to run angular js functionality and design css. Also, we added a link of card view style, mycomponent.css. In this style, sheet has created a component theme in which the class name is company_card,hotel_card and product_card. These names are used dynamically to show stylish output of card by using json data, and the key name is card_theme. In HTML we add code to get angular app by using angular.module() function so we can access controller by using "appName".controller() function. To create a component, use the function "appName".component(). Function .component() takes the name of component, template and controller.
<html ng-app="myApp">
<head>
<link href="bootstrap.min.css" rel="stylesheet" />
<!--link style for card view template-->
<link href="mycomponent.css" rel="stylesheet" />
<script src="angular.min.js"></script>
<title>My Data Table</title>
<script></script> <!-- program script bellow -->
<head>
var dinfoType=0;// global variable to update data info type.
var myApp = angular.module('myApp', []);
myApp.component('dinfoList', { // element name will be '<dinfo-list>'.
template:'<ul>'+
'<li ng-repeat="dinfo in $ctrl.datainfos">' +
'<div class="{{dinfo.card_theme}}">'+
'<div class="card">'+
'<div class="cardin">'+
'<h4>***** {{dinfo.mtitle}} *****</h4>'+
'<h2>{{dinfo.title}}</h2>'+
'<p class="title">{{dinfo.info1}}</p>'+
'<p>{{dinfo.info2}}</p>'+
'<p>{{dinfo.info3}}</p>'+
'<h5>* * * * *</h5>'+
'</div>'+
'</div></div></li></ul>',
controller: function DataInfoController() {
// calling outer function not related to controller.
this.datainfos =MyDataInfo();
}
});
// function not related to controller.
MyDataInfo = function () {
return datainfos;
}
// update data info type in controller one
myApp.controller('myCardCompany',function($scope){
dinfoType=1;
});
// update info type in controller one
myApp.controller('myCardHotel',function($scope){
dinfoType=2;
});
// update info type in controller one
myApp.controller('myCardProduct',function($scope){
dinfoType=3;
});
Join the conversation! Your thoughts help the community grow.