{"id":5645,"date":"2015-06-30T16:15:11","date_gmt":"2015-06-30T13:15:11","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5645"},"modified":"2015-06-27T23:30:49","modified_gmt":"2015-06-27T20:30:49","slug":"angular2-hello-world","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular2-hello-world\/","title":{"rendered":"[Angular2]=”{{‘Hello, World!’}}”"},"content":{"rendered":"

As I mentioned in my recent blog post <\/a>Angular 2 is a complete rewrite. Many concepts that are known from Angular 1.x are gone or changed dramatically. Angular 2 looks like a completely different framework: no DDO<\/em>, no $scope<\/em>, no angular.module<\/em> and completely rewritten binding and change detection (no ng-model<\/em>).<\/p>\n

Although Angular 2 is still work in progress many new features have already been revealed. In this blog post I will share some basic concepts of the framework via code samples that I presented during my lecture at InfoShare 2015.<\/p>\n

Please note the code is created with Angular 2 Alpha 26<\/a>.<\/p>\n

Angular 2 is built with\u2026 TypeScript (1.5)<\/h2>\n

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.<\/p>\n

We could say it is ECMAScript 6 on steroids, as it offers what ECMAScript 6 has to offer. But it adds many more features: type checking, interfaces, generics, enums or decorators to name just a few.<\/p>\n

Let\u2019s see some sample code created in TypeScript:<\/p>\n

import {Greeter} from \"greeter\";\r\n\r\nclass HtmlGreeter implements Greeter {\r\n\r\n    constructor(public greeting:string) {\r\n    }\r\n\r\n    greet() {\r\n        return \"<h1>\" + this.greeting + \"<\/h1>\";\r\n    }\r\n}\r\n\r\nvar greeter = new HtmlGreeter(\"Hello, world!\");\r\nvar greetings = greeter.greet();<\/pre>\n
TypeScript is optional for Angular 2 applications and although it is a recommended approach, developers have choice. They can choose from: ES5, ES6, CoffeScript or any other language that compiles to JavaScript.<\/p>\n
Want to learn more about TypeScript? Visit http:\/\/www.typescriptlang.org\/<\/a><\/p>\n
Hello, World!<\/h2>\n
Let\u2019s see two \u201cHello, World!\u201d Angular 2 applications written in TypeScript and ECMAScript 5 accordingly.<\/p>\n
TypeScript (1.5):<\/p>\n
\/\/ TypeScript\r\nimport {Component, View, bootstrap} from 'angular2\/angular2';\r\n\r\n@Component({\r\n    selector: 'hello-angular2'\r\n})\r\n@View({\r\n    template: \"<h1>Hello {{ name | lowercase }}<\/h1>\"\r\n})\r\nclass HelloAngular2Cmp {\r\n    name:string = \"Angular2\";\r\n}\r\n\r\nbootstrap(HelloAngular2Cmp);<\/pre>\n
JavaScript (ES5):<\/p>\n
\/\/ ES5\r\nfunction HelloAngular2Cmp() {\r\n    this.name = 'Angular2'\r\n}\r\n\r\nHelloAngular2Cmp.annotations = [\r\n    new angular.ComponentAnnotation({\r\n        selector: 'hello-angular2'\r\n    }),\r\n    new angular.ViewAnnotation({\r\n        template: '<h1>Hello, {{ name }}!<\/h1>'\r\n    })\r\n];\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    angular.bootstrap(HelloAngular2Cmp);\r\n});<\/pre>\n
As you can see the TypeScript version is a bit less verbose and decorators (@<\/em>) clearly separate the code from meta data information.<\/p>\n
Angular 2 Building Blocks<\/h2>\n
As you could notice, the the above code did not contain much of what you learned about Angular 1.x: no angular.module, no Directive Definition Object (DDO), no $scope.<\/p>\n
Component<\/h2>\n
A component is the main UI building block of Angular 2 app: Angular 2 is a tree of components. Every Angular 2 application must have at least one component. A component class is an execution context for the template or it is a component controller<\/em>. A component requires a single @Component<\/code> decorator and at least one @View<\/code> decorator.<\/p>\n
Let\u2019s see a really basic component in Angular 2:<\/p>\n
@Component({\r\n    selector: 'hello-angular2'\r\n})\r\n@View({\r\n    templateUrl: 'template.html',\r\n    directives: [NgIf]\r\n})\r\nclass HelloAngular2Cmp {\r\n\r\n    private text:string;\r\n    private clickCount:number = 0;\r\n\r\n    onClick(input, $event) {\r\n        this.text = input.value;\r\n        if ($event instanceof MouseEvent) {\r\n            this.clickCount++;\r\n        }\r\n    }\r\n}\r\n\r\n\/\/ let component be rendered on a page\r\nbootstrap(HelloAngular2Cmp);<\/pre>\n
HelloAngular2Cmp<\/code> has two properties: text<\/code> and clickCount<\/code> that are bound to a view defined by a template attribute of a @View<\/code> decorator. Templates have access to any properties or functions of a component controller.<\/p>\n
View<\/h2>\n
The template itself looks like this:<\/p>\n
<!-- local variable input -->\r\n<input type=\"text\" #input>\r\n<!-- event binding -->\r\n<button (click)=\"onClick(input, $event)\"\r\n        [disabled]=\"text === 'Angular2'\">Click me!<\/button>\r\n\r\n<!-- property binding -->\r\n<p>Angular2 says: {{ text }}<\/p>\r\n\r\n<!-- Conditional -->\r\n<div *ng-if=\"clickCount >= 5\">Clicking too much, man!<\/div><\/pre>\n
The syntax is very easy:<\/p>\n