Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Understanding Modules in Angular2

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 326
    Comment on it

    A module is component in angular that can export classes, function and values. It can work as a library for some other module.
    angular2 library is primary library that is a module and will be imported by some other component.

    This is the code for module in angular2:

    <!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>

    In the above code there are configurations options as follows:

    • index.html file can be configured by typescript version. transpiler option is used to transpile the typescript version to javascript version before application runs. You can have compile errors and warnings if you do not transpile to javascript before running.
    • When the emitDecoratorMetadata option tells that metadata is generated for each class in your code. If this option is not used, unused metadata can affects the file size and application.
    • packages option will have app folder including files with .ts extension.
    • Next main component file is loaded from app folder. It will show error in console if this file is not present.
    • In main.ts file, when bootstrap function is called, it first find metadata then app selector and loads application between app tag.

    You should have these .ts files inside your app folder to run code.

    modules_main.ts

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

    Next we will make a component and its view in .ts file.

    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</h2>'

    If you run this code, it will show the text which is inside the template option in modules_app.component file.

     

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: