Angular Development Practice (3): Analyzing Angular Component
不言
Release： 2018-04-02 14:52:21
Original
1376 people have browsed it
This article introduces you to Angular development practice (3): Analyzing Angular Component. Interested friends can take a look at
Web Component
Before introducing Angular Component, Let’s first briefly understand W3C Web Components
Definition
W3C is a unified component standard method and proposes the standard of Web Component.
Each component contains its own html, css, and js code.
Web Component standard includes the following four important concepts:
Custom Elements (custom tags): Yes Create custom HTML tags and elements;
##HTML Templates: Use the
tag to predefine some content but not load it into page, but use JS code to initialize it;
Shadow DOM (virtual DOM): You can create a DOM subtree that is completely independent from other elements;
HTML Imports: A method of introducing other HTML documents into an HTML document,
.
In summary, you can create custom tags to introduce components, which is the basis of front-end componentization. References to HTML files and HTML templates on the page are used to support the writing of component views and component resources. Management, while Shadow DOM isolates code conflicts and impacts between components. ExampleDefine hello-component
<template id="hello-template">
<style>
h1 {
color: red;
}
</style>
<h1>Hello Web Component!</h1>
</template>
<script>
// 指向导入文档，即本例的index.html
var indexDoc = document;
// 指向被导入文档，即当前文档hello.html
var helloDoc = (indexDoc._currentScript || indexDoc.currentScript).ownerDocument;
// 获得上面的模板
var tmpl = helloDoc.querySelector('#hello-template');
// 创建一个新元素的原型，继承自HTMLElement
var HelloProto = Object.create(HTMLElement.prototype);
// 设置 Shadow DOM 并将模板的内容克隆进去
HelloProto.createdCallback = function() {
var root = this.createShadowRoot();
root.appendChild(indexDoc.importNode(tmpl.content, true));
};
// 注册新元素
var hello = indexDoc.registerElement('hello-component', {
prototype: HelloProto
});
</script>
As you can see from the above code, hello.html is defined according to the standard Component (named hello-component) has its own structure, style and logic. Then introduce the component file in index.html and use it like a normal tag. Angular ComponentAngular Component is a type of directive and can be understood as a directive with a template. The other two types are attribute directives and structural directives. Basic composition
The above is the detailed content of Angular Development Practice (3): Analyzing Angular Component. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
