Writing a Angular2 Hello World app is fairly simple and goes in three steps:
1. Introduction of ANGULAR2 predefined types
1 Import {component,view,bootstrap} from "Angular2/angular2";Import is a ES6 keyword used to introduce a type definition from a module. Here we introduce three types from the ANGULAR2 Module Library: The component class, the view class, and the bootstrap function.
2. Implement a ANGULAR2 component
Implementing a ANGULAR2 component is also simple, defining a class, and then adding annotations to the class:
1 @Component ({selector: "Ez-app"})2 @View ({Template: "})3 class ezapp{}Class is also a keyword for ES6, which defines a class. Both @Component and @view are additional meta-information for class Ezapp, known as annotation/annotation.
The most important function of the @Component is to specify which DOM object the component renders to by using the Selector property (the value is a CSS selector). The most important function of @View is to specify the rendered template through the Templates property.
3. Rendering components to the DOM
To render the component to the DOM, you need to use the bootstrap/bootstrap function:
1 Bootstrap (Ezapp);
The purpose of this function is to inform the ANGULAR2 framework to render the Ezapp component onto the DOM tree.
Note: The HTML DOM is an abbreviation for the HTML Document Object model (the document objects models), and the HTML DOM is a Document object model specifically for html/xhtml. People who are familiar with software development can interpret the HTML DOM as a Web page's API. It considers each element in a Web page to be an object, so that the elements in the Web page can also be acquired or edited by the computer language. For example, JavaScript can use the HTML DOM to dynamically modify Web pages. The HTML DOM defines a standard way to access and manipulate HTML documents. The HTML DOM renders an HTML document as a tree structure (node tree) with elements, attributes, and text.
Example: Change the selector attribute of @component to "Ez-app", and where can I get the same result as the example?
1<!doctype html>234<meta charset= "Utf-8" >5<title>hello,angular2</title>6<!--module Loader--7<script type= "Text/javascript" src= "Lib/[email protected]" ></script>8<!--ANGULAR2 Module Library--9<script type= "Text/javascript" src= "Lib/angular2.dev.js" ></script>Ten<script> One //Set module load rules ASystem.baseurl =Document.baseuri; - System.config ({ -Map:{traceur: "Lib/traceur"}, theTraceuroptions: {annotations:true} - }); -</script> - +<body> -<!--component Render anchor-- +<my-app></my-app> A at<!--define a ES6 script element-- -<script type= "Module" > - //introduction of three type definitions from the module library -Import {Component,view,bootstrap} from "Angular2/angular2"; - - //Component Definition in@Component ({selector: "My-app"}) -@View ({Template: "}) to class ezapp{} + - //Rendering Components the Bootstrap (Ezapp); *</script> $</body>Panax NotoginsengModified to:
1<!doctype html>234<meta charset= "Utf-8" >5<title>hello,angular2</title>6<!--module Loader--7<script type= "Text/javascript" src= "Lib/[email protected]" ></script>8<!--ANGULAR2 Module Library--9<script type= "Text/javascript" src= "Lib/angular2.dev.js" ></script>Ten<script> One //Set module load rules ASystem.baseurl =Document.baseuri; - System.config ({ -Map:{traceur: "Lib/traceur"}, theTraceuroptions: {annotations:true} - }); -</script> - +<body> -<!--component Render anchor-- +<ez-app></ez-app> A at<!--define a ES6 script element-- -<script type= "Module" > - //introduction of three type definitions from the module library -Import {Component,view,bootstrap} from "Angular2/angular2"; - - //Component Definition in@Component ({selector: "Ez-app"}) -@View ({Template: "}) to class ezapp{} + - //Rendering Components the Bootstrap (Ezapp); *</script> $</body>Panax NotoginsengANGULAR2 Introduction (II)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
