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)