Angular 2 module

May 08, 2021 Angular2

Describe

Applications in Angular follow a modular structure. /b10> The Angular application will contain many modules, each dedicated to a single purpose. /b11> Typically a module is a coherent set of code that integrates with other modules to run the Angle application.

The module exports some classes, functions, and values from its code. /b10> Components are the basic blocks of Angular, and multiple components make up your application.

A module can be a library of another module. /b10> For example, the angular2/core library, which is the main Angular library module, will be imported by another component.

Example

The following example describes the use of modules in Angle 2:

<!DOCTYPE html>
<html>
   <head>
      <title>Angular 2 Modules</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/modules_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 file 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 need to save the following TypeScript (.ts) file under the app folder.

modules_main.ts

import {bootstrap} from "angular2/platform/browser"     //importing bootstrap function
import {MyModulesClass} from "./modules_app.component"  //importing component function

bootstrap(MyModulesClass);

Now we're going to create a component in the TypeScript (.ts) file, and we're going to create a component and a view for that component.

modules_app.component.ts

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

//framework recognizes @Component annotation and knows that we are trying to create a new component
@Component({
   selector: 'my-app'
})

@View({
  //this template value will be displayed in the browser
  template: '<h2>Welcome to Tutorialspoint</h2>'
})

export class MyModulesClass { }

Output

When you run the code above, it displays the text specified in the template option defined in the modules_app.component.ts file. 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.

Or , you can run this file in other ways:

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

Angular 2 module

Table of contents

Describe

Example

Output

Cookie Consent