Angular JS2 Hello World







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 configuration
You 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:
  1. core-js: It brings ES2015/ES6 capabilities to our ES5 browsers.
  2. jasmine: It is the typing for Jasmine test framework.
  3. node: It is used for the code that references objects in the nodejs environment.
These typings are used in development of larger Angular applications.

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.ts
import {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

Search This Blog
Powered by Blogger.