This article discusses how to create a reusable component in Angular Js. This tutorial is for beginners/freshers or students. Created functionality of component and use in our program. It is a good part to create component and reduce code of program in Angular js. I hope it will be helpful for you to create component in Angular js.
Angular Js Code Point
ng-app - This directive is used to bootstrap the application. Normally, it is put in the top level element like
ng-controller - It is the main component of AngularJS which contains both the state and the logic. It acts as a bridge between services and views.
$scope - It provides a link between the data and views. It holds all the required data for the views and is used within the HTML template.
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 list of software, hotel or product sample data.
$ctrl - By default, components use
$ctrl as the controller alias.
You can also watch this article on YouTube.
Angular Js Component
We know that 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
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 Screen Shot
The first section shows a short view of the code part. We create
myApp and in
body part, we create
ng-controller myTableCtrl. Both
ng-controller are 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. I also added a link of card view style mycomponent.css. 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 component, use function
.component() takes the name of component, template and controller.
In our code, create one variable whose name is
dataInfoType and function
MyDataInfo() - both are not related to controller. Because it is common function for angular app. In
MyDataInfo() function, we load default json data list. Also, it views change by updating the
The third section is HTML code part. Two
divs are available in this section. The first
div tag to show page header title, second
div tag shows table part. In the second
div tag, we using component
dinfo-list in three columns with three different controllers, shown in red colour in image below. So we have seen that there is no need to repeat the same code again and again to show data. We just write the component name and we can use it in our program. But it depends on program requirement, how many components we need to create for our application.
The article shows and explains to beginners how to create a reusable component by using Angular js, thereby saving development time and improving method of programming.
- 19th November, 2019: Initial version