Angular 2 Hello World

May 08, 2021 Angular2

Describe

In the last chapter, we looked at how to set up a development environment for Angle 2. In this chapter, we create an example to display Hello World text.

Example

The following example describes how to display a simple text in Angle 2:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/es6-shim.min.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system-polyfills.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2-polyfills.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/typescript.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/Rx.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
      });
      System.import('/angular2/src/app/hello_world_main')
            .then(null, console.error.bind(console));
    </script>
  </head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

The above code includes the following configuration options:

You can configure the index file .html typescript version. /b10> SystemJS converts TypeScript to JavaScript before running the application using the transpiler option.
If you don't translate to JavaScript before you run your application, you may see compiler warnings and errors hidden in your browser.
When the emitDecorator Metadata option is set, TypeScript generates metadata for each class of code. /b10> If you do not specify this option, a large amount of unused metadata is generated, which affects the file size and the application runtime.
Angular 2 contains packages from the app folder, Chinese will have a .ts extension.
Next, it loads the main component files from the app folder. /b10> If the primary component file is not found, it displays an error in the console.
When Angula called the boot function in main.ts, it reads the Company metadata, finds the "app" selector, locates an element label named app, and loads the application between them.

To run the code, you'll need to save the following TypeScript (.ts) file under the app folder.

hello_world_main.ts

import {bootstrap} from "angular2/platform/browser"
import {MyHelloWorldClass} from "./hello_world_app.component"

bootstrap(MyHelloWorldClass);

Now we'll create a component in the TypeScript (.ts) file, as follows:

hello_world_app.component.ts

import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: '<h2>Hello World !!</h2>'
})

export class MyHelloWorldClass {

}

@Component is an decorator that uses configuration objects to create components.
Selector Creates an instance of the component and finds the tag in the parent HTML.
@view contains a template that tells Angular how to render the view.
Export specifies that components are available outside the file.

Output

Let's take the following steps to see how the code above works:

Save the HTML code above as an index.html file, as we created in the Environment section, and use the application folder above that contains the .ts file.
Open the terminal window and enter the following command:
```
npm start
```
Later, the browser tab should open and display the output, as shown below.

Alternatively, you can run this file in other ways:

Save the HTML code above as a file in your server root angular2_hello_world.html folder.
Open this HTML file as http://localhost/angular2_hello_world.html and display the output as shown below.

Angular 2 Hello World

Table of contents

Describe

Example

Output

Cookie Consent