Angular JS2 Hello World with ES5
Make sure you have node and npm installed.package.json
{ "name": "angular2-demo", "version": "1.0.0", "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.7", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" } }Run npm install
script.js
(function (app) { app.AppComponent = ng.core.Component({ selector:'codedamn', template:'My First Angular App 2
' }) .Class({ constructor:function () { // body... } }); })(window.app || (window.app = {})); (function(app) { document.addEventListener('DOMContentLoaded', function () { ng.platform.browser.bootstrap(app.AppComponent); }); })(window.app || (window.app = {}));
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>
<script src="script.js"></script>
<body>
<codedamn></codedamn>
</body>
</html>
Angular JS2 Hello World with Typescript
Typescript configurationYou need to create tsconfig.jsonwhich is the TypeScript compiler configuration file. It guides the compiler to generate JavaScript files
{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }typings.json
{ "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160602141332", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160621231320" } }A large number of libraries of the JavaScript extends JavaScript environment with features and syntax which is not natively recognized by the TypeScript compiler. The typings.json file is used to identify TypeScript definition files in your Angular application.
In the above code, there are three typing files as shown below:
- core-js: It brings ES2015/ES6 capabilities to our ES5 browsers.
- jasmine: It is the typing for Jasmine test framework.
- node: It is used for the code that references objects in the nodejs environment.
package.json
{ "name": "angular2-demo", "version": "1.0.0", "scripts": { "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ", "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "typings": "typings", "postinstall": "typings install" }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.7", "systemjs": "0.19.22", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.1.0", "typescript": "^1.7.5", "typings":"^0.6.8" } }Now run npm install command
app.component.ts
import {Component, View} from "angular2/core";
@Component({
selector: 'my-app'
})
@View({
template: 'My First Angular 2 App
'
})
export class AppComponent {
}
main.tsimport {bootstrap} from "angular2/platform/browser" import {AppComponent} from "./app.component" bootstrap(AppComponent);
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<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/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
0 comments:
Post a Comment