Hello Friend’s Today we will see “How to create a component using Angularjs 1.6”, there are so many versions are available for Angularjs. In the latest versions of Angularjs mostly based on component architecture. In this tutorial, we will use AngularJs 1.6 version of creating and configuring a component. Using component architecture we can develop the modules and website. It is easy to develop and reusable. Before going ahead you must know about AngularJs and component.
What is Component
A Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.This makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's style of application architecture. There are so many advantages of components like simple configuration better than plain directives, optimized for the component-based architecture, write component directives it will make it easier to upgrade angular. some time component is not useful when you want a directive that is triggered by an attribute or CSS class, rather than an element.
Difference between Component and Directive
In the directive, we can’t bindings the parameters but in the component, we can bind the parameters, functions, etc. Compile function uses in directive but in the component, we can’t use compile function, The controller used in both, a link function use in directive but not in the component, we can access multiElement in directive but not in the component. A global variable of scope used in directive but in component we can't access scope global variable. We can use transclude in both directive and component. In the templateUrl we can set the html file url.
Creating and configuring a component
A component registered using the .component () method of an AngularJs module. It takes two arguments that one is name of the component as string and second argument is component config object. Before register the component we must have to create module file because compulsory give component reference in module file. Now we start to create tutorial for create component in AngularJs 1.6.
Component-based application architecture
The component helper makes it easier to structure your application with a component-based architecture. Components only control their own view and data, components have a well-defined public API- inputs and outputs. A input should be using (<) and (@) and (&) bindings. The (<) symbol denotes the one-way-bindings and (@) symbol use for string parameter and (&) symbol use for the function, Components have a well-defined lifecycle, there hook methods can be implemented like $onInit(), $onChanges(changesObj), $doCheck(), $onDestroy(), $postLink() By implementing these methods, your component can hook into its lifecycle. An application is a tree of components.
Let’s start, open visual studio or visual studio code editor which version you have then create new empty project or empty website, it doesn’t matter you create project or websie. Created empty website then create one “src” (source) folder, we will create our all files or folders in this folder. In this, we create two folders in (src) folder that one folder is (app) and second is (public) folder. In public folder we will create (Index.html), is a main page of the application.
Index.html
<html>
<head>
<meta charset="UTF-8">
<title>Component Archietecure</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
</head>
<body>
<!-- Call app component -->
<app></app>
<!-- app component end -->
</body>
</html>
In above code of index.html page we have called the app component using
While we create any component, we have to create one (.js) file and second are (.html) file. In (.js) file we write the component like object and also create controller in the same file. In component object we can define the component name and we call the component using the component name. In component object we call the HTML page using template filed, here you can give the absolute or relative URL of HTML page.
App.js (Component)
import angular from "angular";
import "angular-material/angular-material.min.css";
const appComponent = {
name:”app”,
template: require("./app.html"),
controller: appController
};
function appController() {
var $ctrl = this;
$ctrl.source = {
details: [
{ Id: 1, Name: "ABC"},
{ Id: 2, Name: "DEF"},
{ Id: 3, Name: "GHI"},
{ Id: 4, Name: "JKL"},
{ Id: 5, Name: "MNO"},
{ Id: 6, Name: "PQR"},
{ Id: 7, Name: "STU"},
{ Id: 8, Name: "XYZ"}
]
};
}
export default angular
.module("app", [])
.component("app", appComponent);
In above code, we gave the references of “angular” and “angular-material“using the import keyword. An angular-material is use for the web design, it’s not compulsory to use angular-material for the designing purpose you can use Bootstrap or anything else. Bottom of reference we create the component object using two parameters “template” and “controller”. In template field we give the HTML page URL and in controller field we call controller name and define the controller bottom of the component object. In the controller we do not use global variable of “$scope”. In controller we have source data and that source data we will bind at HTML page and at the end of controller we will export this component because if we want to inject this component in other component then we can inject this easily, without export component we can’t import it anywhere in the whole application.
App.html
<div>
<table>
<thead>
Data
</thead>
<tr>
<td>
ID
</td>
<td>
Name
</td>
</tr>
<tr ng-repeat="detail in $ctrl.source.details">
<td>
{{detail.id}}
</td>
<td>
{{detail.name}}
</td></tr></table>
</div>
We bind the details from controller to view page in table format, we can pass the variable or parameter using (“<”) object and (“@”) string. You can create multiple components in application and call the nested component like one component call in another component. A HTML page is view while component initialize.
Hello, my name is Gautam Nagraj. I am one year old blogger.We create and find innovative solution.
No comments:
Post a Comment