Introduction
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 html or body tag.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.{{expression}} - It is called expressions and JavaScript like code can be written inside. It should be used for mainly small operations in 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 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 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 Screen Shot
First Section
The first section shows a short view of the code part. We create ng-app myApp and in body part, we create ng-controller myTableCtrl. Both ng-app and 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 "appName".component(). Function .component() takes the name of component, template and controller.
Second Section
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 dataInfoType variable.
Third Section
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.
Conclusion
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.
History
- 19th November, 2019: Initial version
Submit an article or tip
