The Spotyngular Project: Part 3- Spotyngular Structure
This is the fourth post of “The Spotyngular Project” series of posts. Throughout this series, we are cloning spotify with AngularJS 2 to expose this framework’s benefits and tricks. We started our first post by talking about the basics of Angular JS 2, then we set up the environment, we got started with the demo and now we’ll focus on the structure.
AngularJS 2 keeps close ties with web standards such as Web Components. The idea, when developing an application with this new version, is to create a tree of Web Components where those components can communicate with each other. But what’s a Web Component, anyway?
Web Components
Web components are a set of open web standards composed of four technologies. You can think of web components as reusable and independent html elements with their own behaviors, styles and templates. For example, when you add a video element to your page you’ll see this element can take several actions and you’ll also see that the styles apply for this element alone. Therefore the video tag will work independently, keeping the same behaviors and styles regardless of the context
Web components consist of these technologies
- Custom Elements
- HTML Templates
- Shadow DOM
- HTML Imports
Custom elements allows you to create custom tags in HTML, with all the power of HTML. It means you can use the lifecycle callbacks of the element among other features.
HTML Templates refer to the structure inside an element. It can be cloned and reused if wanted. To create an html template you must use the template... tags.
Shadow DOM, in a few words, it was conceived to help with the encapsulation of style and markup.
HTML Import is the packaging mechanism for Web Components, its goal is to load HTML files like any other resource file in the web.
This is a brief description of what web components are. Each technology can be used independently, but the real power comes out when these technologies are combined in Angular 2