Sunday, February 12, 2017

Angular 2 - Modules

Description

The applications in Angular follow modular structure. The Angular apps will contain many modules, each dedicated to the single purpose. Typically module is a cohesive group of code which is integrated with the other modules to run your Angular apps.

A module exports some classes, function and values from its code. The Component is a fundamental block of Angular and multiple components will make up your application.
A module can be a library for another module. For instance, the angular2/core library which is a primary Angular library module will be imported by another component.

Example

The below example describes use of modules in the Angular 2:
<!DOCTYPE html>
<html>
   <head>
      <title>Angular 2 Modules</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
      <script src="https://code.angularjs.org/tools/system.js"></script>
      <script src="https://code.angularjs.org/tools/typescript.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
      <script>
         System.config({
           transpiler: 'typescript',
           typescriptOptions: { emitDecoratorMetadata: true },
           packages: {'app': {defaultExtension: 'ts'}},
           map: { 'app': './angular2/src/app' }
         });
         System.import('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.html file using typescript version. The SystemJS transpile the TypeScript to JavaScript before running the application by using the transpiler option.
  • If you do not transpile to JavaScript before running the application, you could see the compiler warnings and errors which are hidden in the browser.
  • The TypeScript generates metadata for each and every class of the code when the emitDecoratorMetadata option is set. If you don't specify this option, large amount of unused metadata will be generated which affects the file size and impact on the application runtime.
  • Angular 2 includes the packages form the app folder where files will have the .ts extension.
  • Next it will load the main component file from the app folder. If there is no main component file found, then it will display the error in the console.
  • When Angular calls the bootstrap function in main.ts, it reads the Component metadata, finds the 'app' selector, locates an element tag named app, and loads the application between those tags.
To run the code, you need the following TypeScript(.ts) files which you need to save 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 will create a component in TypeScript(.ts) file which we will create component and view for the 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 above code, it will display the text specified within the template option which is defined in the modules_app.component.ts file. Let's carry out the following steps to see how above code works:
  • Save above HTML code as index.html file as how we created in environment chapter and use the above app folder which contains .ts files.
  • Open the terminal window and enter the below command:
    npm start
  • After few moments, a browser tab should open and displays the output as shown below.
OR you can run this file in another way:
  • Save above HTML code as angular2_modules.html file in your server root folder.
  • Open this HTML file as http://localhost/angular2_modules.html and output as below gets displayed.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)