Welcome Guest! (App Version 3.1)

websitnero logo name

Components

What are components in Angular?

Components are nothing but a kind of directive. They have got their own view file (template or .html file), their own logical file (.ts or typeScript file), their own styling files (.css or .scss files) and their own test-cases file (.spec.ts files). Components are like a complete set of various inter-related pieces and a single entity that can be added to other components to make a complete full-fledged application.

What are the Benefits of using Components?

If components are so highly focussed in component-based architecture then there must also be some benefits of it. Otherwise why should we use components in our applications? So, the answer is that components have a very benefitial characteristic which is components are resuable. This means once you make a component for some project, then the very same component can be used for 10 different projects on copying the component files.

Earlier using JavaScript or controllers in AngularJS (or version 1) all the code was so tightly coupled with the rest of the code that taking one piece out was not possible. Even, if someone tried copying logical code (JavaScript from .js files), the template was again merged up with the view code.

The benefit of Component-based Architecture is that the full code of view, logic, styling and test-cases is completely separate in a folder and this folder can be directly copied and placed in some other project. With some minor changes the very same component can be reused saving lots of time and man-hours of developers -- thereby reducing the overall cost of the project.

What are the various files inside a component folder?

When we create a component we get a folder with a set of 4 files in general. The files are as follows:

  • View File (.html file)
  • Logic File (.ts file)
  • Styling File (.css or .scss file)
  • Test-Cases File (.spec.ts file)

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.