AngularJS Components Components In angular JS

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

The components in angularJS can be visualised as a custom directive (< html > this in an HTML directive, and something like this will be a custom directive < ANYTHING >). A component contains a view and a controller. Controller contains the business logic which is binded with an view , which the user sees. The component differs from a angular directive because it contains less configuration. An angular component can be defined like this.

angular.module("myApp",[]).component("customer", {})

Components are defined on the angular modules. They contains two arguments, One is the name of the component and second one is a object which contains key value pair, which defines which view and which controller it is going to use like this .

angular.module("myApp",[]).component("customer", {
    templateUrl : "customer.html", // your view here 
    controller: customerController, //your controller here
    controllerAs: "cust"        //alternate name for your controller 
})

"myApp" is the name of the app we are building and customer is the name of our component. Now for calling it in main html file we will just put it like this

<customer></customer>

Now this directive will be replaced by the view you have specified and the business logic you have written in your controller.

NOTE : Remember component take a object as second argument while directive take a factory function as argument.



Got any AngularJS Question?