KEMBAR78
Angularjs 2 | PPTX
“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
Visit – www.cubettech.com
 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
Visit – www.cubettech.com
angular.module(‘example’)
.controller(‘ExampleCtrl’, function($scope) {
$scope.name = “John Smith”;
});
<div ng-app=”example'>
<div ng-controller=”ExampleCtrl”>{{name}}</div>
</div>
Languages
Visit – www.cubettech.com
TypeScript
Visit – www.cubettech.com
 TypeScript is a free and open source programming
language developed and maintained by Microsoft.
 It is a strict superset of JavaScript
Module loader
Visit – www.cubettech.com
 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
Visit – www.cubettech.com
Angular 1.x
angular.module(‘example’)
.controller(‘ExampleCtrl’, function() {
});
Visit – www.cubettech.com
Angular 2
import {Component, View} from 'angular2/angular2';
@Component({selector: 'example'})
@View({ templateUrl:
'./components/example/example.html'})
export class Example {}
Visit – www.cubettech.com
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 {
}
Visit – www.cubettech.com
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
Visit – www.cubettech.com
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".
Visit – www.cubettech.com
@Component({
selector: 'my-component'
})
@View({
template: `<div>Hello,
{{message}}</div>`
})
class MyComponent {
message: string;
constructor() {
this.message = 'World';
}
}
Dependency Injection
Visit – www.cubettech.com
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);
});
Visit – www.cubettech.com
Angular 2
Directive
Visit – www.cubettech.com
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}}'
};
});
Visit – www.cubettech.com
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?
Visit – www.cubettech.com
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
Visit – www.cubettech.com
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
Visit – www.cubettech.com
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
Visit – www.cubettech.com
<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
Visit – www.cubettech.com
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
Visit – www.cubettech.com
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

  • 1.
    “Angular Js 2” CubetSeminar Presented by “Bilex Anto” “We help build and architect IT solutions”
  • 2.
    About Cubet Founded in2007, 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
  • 3.
    Indroduction Visit – www.cubettech.com 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
  • 4.
    Angular js 1code Visit – www.cubettech.com angular.module(‘example’) .controller(‘ExampleCtrl’, function($scope) { $scope.name = “John Smith”; }); <div ng-app=”example'> <div ng-controller=”ExampleCtrl”>{{name}}</div> </div>
  • 5.
  • 6.
    TypeScript Visit – www.cubettech.com TypeScript is a free and open source programming language developed and maintained by Microsoft.  It is a strict superset of JavaScript
  • 7.
    Module loader Visit –www.cubettech.com  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);
  • 8.
    Component-based UI Visit –www.cubettech.com Angular 1.x angular.module(‘example’) .controller(‘ExampleCtrl’, function() { });
  • 9.
    Visit – www.cubettech.com Angular2 import {Component, View} from 'angular2/angular2'; @Component({selector: 'example'}) @View({ templateUrl: './components/example/example.html'}) export class Example {}
  • 10.
    Visit – www.cubettech.com Angular2 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 { }
  • 11.
    Visit – www.cubettech.com InAngular 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>
  • 12.
    Goodbye $scope Visit –www.cubettech.com 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".
  • 13.
    Visit – www.cubettech.com @Component({ selector:'my-component' }) @View({ template: `<div>Hello, {{message}}</div>` }) class MyComponent { message: string; constructor() { this.message = 'World'; } }
  • 14.
    Dependency Injection Visit –www.cubettech.com 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); });
  • 15.
  • 16.
    Directive Visit – www.cubettech.com Markerson 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}}' }; });
  • 17.
    Visit – www.cubettech.com Problemsdirective 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?
  • 18.
    Visit – www.cubettech.com Angular2 @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">
  • 19.
    Properties Visit – www.cubettech.com Oldversion: <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>
  • 20.
    Events Visit – www.cubettech.com Angular1.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>
  • 21.
    References Visit – www.cubettech.com <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
  • 22.
    Conclusion Visit – www.cubettech.com Angular2 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.
  • 23.
    Our Technologies Stack: ServerSide Application JavaScript Frameworks Mobile App Development Database System and Cloud Visit – www.cubettech.com
  • 24.
    THANKS! ANY QUESTIONS? PLEASEGET IN TOUCH! www.cubettech.com Email : info@cubettech.com Skype : cubet.se Phone: +91 484 405 4324
  • 25.
    Contact us: Kemp House 160City 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