12. Components View
<section>
<h4>{{ profile.name }}</h4>
<p> Age - {{ profile.age }}</p>
<button ng-click="save()">Save</button>
</section>
<profile-card profile="profile"></profile-card>
Reusable group of element
13. Component Logic
A Object/Function - A place to store properties and functions
function ProfileCardCtrl(){
this.profile = new Profile({ name : 'jay' });
this.save = function(){
// ...
}
}
19. Typescript
• Open Source project from Microsoft Technologies.
• An attempt to 'fix' the missing parts of JavaScript.
• A Superset of JavaScript => JavaScript + Static Types
(and Classes and Modules and more…).
• It uses ES6 syntax with Type Annotation and compiles to
plain JavaScript (target: ES3, ES5, ES6).
• Any valid JavaScript application is also a TypeScript
application
20. Typescript
tsc app.tsapp.ts app.js
TSC - the TypeScript compiler
TSD - TypeScript Definition Files package manager
TypeScript Definition File (ambient declaration file)
• .d.ts extension.
• Allows the definition of strong types.
• Provide type definition for external JavaScript libraries.
DefinitelyTyped (http://definitelytyped.org/): a community driven project on GitHub that tracks all of them.
21. Typescript
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
var greeter = new Greeter("world");
var button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);
Type Annotation
22. Typescript
import {bootstrap, Component} from 'angular2/angular2';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
class AppComponent { }
bootstrap(AppComponent);
Meta Annotation