Angularjs 2

“Angular Js 2”
Cubet Seminar
Presented by “Bilex Anto”
“We help build and architect IT solutions”

About Cubet
Founded in 2007, Cubet Techno Labs
is an end-to-end SMAC (social,
mobile, analytics and cloud) consulting
company with offices at Kochi, India
and London, UK. With expertise in
insightful product strategy, well-crafted
design and proficient development for
high-end web and mobile application
technologies.
Where we stand
Visit – www.cubettech.com

Indroduction
 AngularJS is a structural framework for dynamic web apps
 AngularJS extends HTML attributes with Directives, and binds data
to HTML with Expressions.
 Release-2009
 Angular 1.5 bete latest version
 On 18th of September 2014 was pushed the initial commit of
version 2.0 of the AngularJS framework

Angular js 1 code
angular.module(‘example’)
.controller(‘ExampleCtrl’, function($scope) {
$scope.name = “John Smith”;
});
<div ng-app=”example'>
<div ng-controller=”ExampleCtrl”>{{name}}</div>
</div>

Languages

TypeScript
 TypeScript is a free and open source programming
language developed and maintained by Microsoft.
 It is a strict superset of JavaScript

Module loader
 Angular 2 uses the standard System.js (Module loader)
<script>
//bootstrap the Angular2 application
System.import('app').catch(console.log.bind(console));
</script>
In now inside our main file,
import {bootstrap} from 'angular2/angular2';
import {App} from 'app';
bootstrap(App);

Component-based UI
Angular 1.x
angular.module(‘example’)
.controller(‘ExampleCtrl’, function() {
});

Angular 2
import {Component, View} from 'angular2/angular2';
@Component({selector: 'example'})
@View({ templateUrl:
'./components/example/example.html'})
export class Example {}

Angular 2 we have two types of directives.
 Directives
 Components
component is a directive that has a template and that
is what we use to represent a page in Angular 2. A
component is simply a class:
class MyComponent {
}

In Angular 2 we have annotations. Annotations are a
way to add metadata to a class. So there is an
annotation called Component which we can use to say
that a particular class is a Component:
@Component({
selector: 'my-component'
})
class MyComponent {
}
<div id="content">
<my-component></my-component>
</div>

Goodbye $scope
Scope is an object that refers to the application
mode.
 Instead of binding to properties in the scope
inside our templates, we directly bind to
properties of our "components".

@Component({
selector: 'my-component'
})
@View({
template: `<div>Hello,
{{message}}</div>`
})
class MyComponent {
message: string;
constructor() {
this.message = 'World';
}
}

Dependency Injection
Dependency Injection (DI) is a software design pattern that deals
with how components get hold of their dependencies.
Angular1
var myModule = angular.module("myModule", []);
myModule.value("numberValue", 999);
myModule.controller("MyController", function($scope, numberValue) {
console.log(numberValue);
});

Angular 2

Directive
Markers on a DOM element (such as an attribute, element name,
comment or CSS class)
Angular 1
<div ng-controller="Controller">
<div my-customer></div>
</div>
angular.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address:
{{customer.address}}'
};
});

Problems directive definition objects(DDO)
transclusion: What does that word even mean?
controller vs link: When to use link and when to use a controller?
compile: What should I do in there?
scope: scope: false, scope: true, scope: {}. Which one to use and why?

Angular 2
@Directive({
selector: '[tooltip]'
})
class Tooltip {
}
<div tooltip="foo">...</div>
foo: that will restrict for an element.
[foo]: that will restrict for an attribute.
.class: that will restrict for a class.
input[type=text]: that will apply this directive only in <input
type="text">

Properties
Old version:
<input type="text" value="foo">
The browser will parse the input element and create a node object. Then it
will start parsing each attribute to create a property inside that object. So we
will end with a node object for the input with the type and value as
properties (among others).
New version:
<img [src]="myImage">
<div [hidden]="isHidden">This div will be hidden if isHidden is true</div>

Events
Angular 1.x:
<my-directive select="user.name(name)"></my-directive>
Angular 2 introduces a new syntax for this events, also called statements:
<my-directive (select)="user.name(name)"></my-directive>

References
<p (click)="user.focus()">
Grab focus
</p>
<input type="text" #user [(ng-
model)]="name">
{{name}}
<input type="text" #user>
Here user reference
{{user.value}} - get value
{{user.type}} - get type

Conclusion
Angular 2 is the right step forward. It is way simpler than Angular 1. No more
controllers, no more scope inheritance that drives us insane, the directives
API is much easier to understand than the actual DDO. No more $apply, and
the best of all things, thanks to [properties] and (events) we removed like 30
directives that are not needed anymore and apart from that, we simplified
the way of consuming directives.

Our Technologies Stack:
Server Side Application JavaScript Frameworks
Mobile App Development
Database System and Cloud

THANKS!
ANY QUESTIONS? PLEASE GET IN TOUCH!
www.cubettech.com
Email : info@cubettech.com
Skype : cubet.se
Phone: +91 484 405 4324

Contact us:
Kemp House
160 City Road
London- EC1V2NX,
UK.info@cubettech.com
+44 2071938618
Carnival Info Park,
Unit IX-C, 9th floor PhaseIV,
Kochi, Kerala, India
info@cubettech.com
+91 484 4054324

Angularjs 2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Angularjs 2

Similar to Angularjs 2 (20)

More from Cubet Techno Labs

More from Cubet Techno Labs (6)

Recently uploaded

Recently uploaded (20)

Angularjs 2