What is a component in AngularJS?
Solution 1
Angular components were introduced in version 1.5.
A component is a simplified version of a directive. It cannot do dom manipulation (not link or compile methods) and "replace" is gone too.
Components are "restrict: E" and they are configured using an object (not a function).
An example:
app.component('onOffToggle', {
bindings: {
value: '=',
disabled: '='
},
transclude: true,
template: '<form class="form-inline">\
<span ng-transclude></span>\
<switch class="small" ng-model="vm.value" ng-disabled="vm.disabled"/>\
</form>',
controllerAs: 'vm',
controller: ['$scope', function($scope) {
var vm = this;
$scope.$watch("vm.disabled", function (val) {
if (!val) {
vm.value = undefined;
}
})
}]
});
Further reading: https://toddmotto.com/exploring-the-angular-1-5-component-method/
Solution 2
Coming from an OOP Java oriented background, I was trying to distinguish between the various Angularjs components, including modules. I think the best answer I found about modules was 13 Steps to Angularjs Modularization
In an AngularJS context, modularization is organization by function instead of type. To compare, given arrays time = [60, 60, 24, 365] and money = [1, 5, 10, 25, 50], both are of the same type, but their functions are completely different.
That means your components (controllers, filters, directives) will live in modules instead of wherever they live now.
So yes, for our 1.4x code, components are blocks of resusable code, but in our version 1.4x context, I see the Module Pattern as a recurring structure to these blocks of code in Angularjs, though not considered true components until version 1.5. The way these modules are implemented gives you the type of component, that is, a controllers implementation structure will distinguish it from a service or a provider, if that makes sense. I also think the Angularjs documents should have addressed this.
Here is the basic pattern I see repeated in the Angularjs code:
(function () {
// ... all vars and functions are in this scope only
// still maintains access to all globals
}());
Here is an excellent article on the Javascript Module Pattern in depth.
![James Drinkard](https://i.stack.imgur.com/0vUgt.jpg?s=256&g=1)
James Drinkard
Software developer living in St. Charles, Missouri with 23+ years experience in programming with 20 years of JAVA. While I certainly don't claim to know everything, I have a reputation for finding solutions and getting the job done in a professional manner. I made a career change to go into full-time programming in 1999 and have never regretted the decision. When I wasn't at work, I liked to study and experiment with code, read, and fix things. I am curious by nature. Coding is the most rewarding career I can think of. I never get tired of learning and doing new things in it. Currently not working commercially, but I stay somewhat active on SO to help when I can and give back to the community. Helping people is a worthy goal in life, it transcends professions. I'm planning on returning to work after a year or so.
Updated on July 15, 2022Comments
-
James Drinkard almost 2 years
I was doing some reading about directives and was wondering what the distinction was between a directive and a component, when I found that there are lots of components in AngularJS.
There is a function component, type component, service component, filter component, provider component, etc... Then to top it off I found that a module component is a component consisting of directives, services, filters, providers, templates, global API’s, and testing mocks. That tended to make things more confusing. I couldn't find a definition of a "component" in the Angular documentation that would explain the distinctions between the types of components listed.
So what exactly is a "component" in AngularJS? Is it something as simple as reusable blocks of code?
By the way, I'm using Angular version 1.4.2 currently.
-
pzaenger over 6 yearsThe question is about AngularJS (1.x).
-
ChrisM almost 6 yearsThere's a bit of confusion of terms in this question. The author was talking about 'component' as a general term, and seems to be asking a question along the lines of 'what are all these different things like filters, services etc'. (Tbh it sounds like they were a bit confused and maybe need to learn up on some JavaScript fundamentals). This answer is referring to AngularJS
component()
s specifically which is also what most people will be searching for. Indeed that wasn't even a thing in 1.4.2 which is what the asker was using. -
James Drinkard almost 6 yearsI noticed that I'm getting downvotes on this answer. If someone could explain to me to what part is wrong, please do so and I will fix it. I'm still keeping it open as I believe parts of it are correct.
-
James Drinkard almost 6 yearsOkay, I see that I left out the context of versions in my answer.