Learn Angular 2, Revealing Angular 2, and take notes. Angular 2 chooses TypeScript as its official primary voice constructor, which means that mastering TypeScript voice will be more conducive to the efficient development of Angular applications.

Modular

Modules are self-declarative, and the relationship between the two modules is established by using import and export at the file level. Like ES6, any file containing a top-level import or export is treated as a module.

Modules are executed in their own scope, not in the global scope, which means that variables, functions and classes defined in the module are not visible outside the module unless they are explicitly exported using export. Similarly, we have to import variables, functions, classes and so on from other modules through import.

Modules use module loaders to import their dependencies. Module loaders find and load all dependencies between modules when code runs. The commonly used module loaders are System Js and Webpack.

Module Export Mode

Modules can provide variables, functions, classes, type aliases, interfaces and so on to external modules through export. The export method can be divided into three types:

• Export declaration

Any module can be exported by export keyword. The sample code is as follows:

export const COMPANY = 'EG';    // Derived variables

export interface IdentiryValidate {    // Export interface
    isValidate(s: string): boolean;    
}

export class ErpIdentityValidate implements IdentiryValidate {    // Export classes
     isValidate(s: string) {
         return true;
     }
}

• Export statement

Sometimes we need to rename the exported module, and then we use the export statement. The sample code is as follows:

export class ErpIdentityValidate implements IdentiryValidate {    // Export classes
     isValidate(s: string) {
         return true;
     }
}

export { ErpIdentityValidate }
export { ErpIdentityValidate as EGIdentityValidate };    // rename

• Modular packaging

Sometimes we need to modify and extend existing modules and export them for other modules to invoke. At this time, we can wrap the modules to export again. I see other articles refer to them as "re-export". The sample code is as follows:

export { ErpIdentityValidate as EGIdentityValidate } from './ErpIdentityValidate';  

A module can wrap multiple modules and export new content as a new module. The sample code is as follows:

export * from './IdentiryValidate';
export * from './ErpIdentityValidate';

Module Import Mode

Module import corresponds to module export, and import keywords can be used to import external modules that the current module depends on. There are several ways to import:

• Import a module

import { ErpIdentityValidate } from "./ErpIdentityValidate";
let erpValide = new ErpIdentityValidate();

• Alias import

import { ErpIdentityValidate as ER} from "./ErpIdentityValidate";
let erpValide = new ERP ();

In addition, we can also import the alias of the whole module, import the whole module into a variable, and access the export part of the module through this variable. The example code is as follows:

import * as validator from "./ErpIdentityValidate";
let myValidate = new validator.ErpIdentityValidate();

Default export of module

Modules can use default keywords to implement the default export function, each module can have a default export. Class and function declarations can omit the export name directly to achieve the default export. The default export helps to reduce the number of layers in which the caller calls the module, and eliminates some redundant module prefix writing. The sample code is as follows:

• Default export class

// ErpIdentityValidate.ts
export default class ErpIdentityValidate implements IdentiryValidate {
     isValidate(s: string) {
         return true;
     }
}

// test.ts
import validator from "./ErpIdentityValidate";
let erp = new validator();

• Default export function

// nameServiceValidate.ts
export default function(s: string){
    return true;    // Specific code outline
}

// test.ts
import validate from './nameServiceValidate';
let name = 'Angular';

// Using derived functions
console.log(`"${name}" ${validate(name)? " matches": " does not matches"}`);

• Default export value

// constantService.ts
export default "Angular";

// test.ts
import name form "./constantService";
console.log(name);

Module Design Principles

In module design, common adherence to some principles is conducive to better writing and maintaining project code. Here are some principles for module design

1. Export as much as possible at the top level

2. List the imported names explicitly

import {ClassTest, FuncTest} from './ModuleTest';

3. Export using namespace schema

// MyLargeModule.ts
export class Dog {}
export class Cat {}
export class Tree {}

// test.ts
import * as myLargeModule from './MyLargeModule';
let x = new myLargeModule.Dog();

3. Extension with Modular Packaging

We may often need to extend the function of a module. The recommended solution is not to change the original object, but to export a new object to provide new function. The sample code is as follows:

// ModuleA.ts
export class ModuleA {
    constructor(){/*... */}
    sayHello() {/*... */}
}

// ModuleB.ts
import { ModuleA } from './ModuleA'
class ModuleB extends ModuleA {
    constructor(){super(); /*... */}
    // Adding new methods
    sayHi() {/*... */}
}
export { ModuleB as ModuleA }

// Test.ts
import { ModuleA } from './ModuleB';
let C = new ModuleA();