-
Notifications
You must be signed in to change notification settings - Fork 0
Component structure
Would be cool to add code samples.
A component is "a part or element of a larger whole". Well, in this code, is just that. Is an element who only have responsibility for itself. A component might be an atom (a small unity), or a molecule (a component made with other components). Actually, there isn't so much difference between them. Only, for molecules, you need the atoms to exist.
Components allow developers to fast change stuff, to design consistently, and to avoid code duplication. Also, you can fix bugs, improve functionalities or create new components in an efficient way.
Components are divided by functionality. A component will always have its own view, and directive. It also might contain styles, services or controllers. So, this will be the files you'll find inside a component folder.
The view is just an HTML file, with the visual part of the component. It will be named my-component.view.html.
Also called "component", the directive is the exposed part of the component. It is an Angular JS component and contains all the component relations: the view, the controller (if needed), the params it receives...
It will be named my-component.component.html.
If the component needs its own styles, shall have its own stylesheet. Yes. But... let's be consistent. We're using SASS, so it shall be a SASS file.
It will be named my-component.style.scss.
If your component needs to manipulate data, share some variables with other different components, or perform api calls, instead of doing it on the directive, with "state parsing" (React like), or with a controller, just create a service. There are singletons and might be shared with more components.
Even if a component only uses another component's service this component will be considered as a molecule (since it now has a dependency).
It will be named my-component.service.js.
When service linking is a little bit complex, or the component need some kind of logic for something else than the view, an angular controller can do the work very well. Just add it, and link it to the component. Never use $scope nor $rootScope, to connect it with the view, but the component itself (controllerAs is your friend).
It will be named my-component.controller.js.
Didn't find what you were looking for? Open an issue with [question] tag and ask us! We'll answer and add it here as soon as possible!