SlideShare a Scribd company logo
 
Nagaraju Sangam
AngularBuff@ ADP
nagaraju_sangam@yahoo.co.i
n
Speakerat various FrontEnd Meetups
nagaraju.sangam@gmail.com
 Errors?? God Only Knows 
 Errors are ignored in templates. Even God Doesn’t know..!!! 
 Different ways to create different things: provider, factoy, service, value, constant
 Opinionated, Verbose, steep learning curve
 Everything is singleton 
 Not an elegant dependency injection, crazy work arounds for minification 
 Route: No built-in partial view support using ng-route
 Issues with Scope & child scopes
 Dirty checking
 Issues with digest cycles: $scope.apply();
 Two way data binding: Max of 2000 bindings.
 jqLite: No direct modification of dom??? dropped in 2.0 
 Directives supports “EACM” only no way to use selectors.
 modules : No built-in module loading
 No inheritance supported for angular modules
 To knock off many old components.
i.e. $scope, $rootScope, services, controllers, modules, jqLite etc.
 To leverage latest ECMA Script standards
 To leverage modern browser capabilities.
 Improve many areas with different approaches with past expirience.
Routing
Services
DI
Directives
ES5 & ES6+
Server Side
Angular
Change Detection
Web workers
Promises
Testing
Material design
RxJsTypes
Annotations
Angular JS 1.x Angular JS 2.0
Controllervs
$scopeecives
Component Class
Service Simple Class
Angular Modules ES6 Modules
Directive
 Converts source code from one programming language to other.
 ES6 to ES5 Transpilers
 Traceur
 Typescript
 Flow
 Babel
 Dart
 Angular2 apps should be written in ES6. since the browsers doesn’t support ES6 you can use any of the above
transpiler to convert it to ES5.
 Google and Microsoft are working together to make type script as a standard for developing angular2.0 apps.
http://www.2ality.com/2014/10/typed-javascript.html
ES
6
ES
5
Type
s
Annotatio
ns
AtScript
Type script
Angular 1.X Angular 2.0
 Change detection happens at DOM node level
only
 Change in one node triggers dirty checking at all
other nodes.
 Change detection can happen at component level as
well.
 Change in one component triggers dirty checking in
other nodes below the current node…
 Change detection strategy can be configured at
component level
@Component({
selector: <string>‘,
changeDetection: ‘<string>’
})
@View({
template: ‘<string>’
})
export class <className>{
constructor() {
}
}
 The changeDetection property defines, whether the change detection will be
checked every time or only when the component tells it to do so.
Watchtower.js is used for change detection.
 Angular 2.0 doesn’t have two-way data binding like 1.x
 two-way data binding can be achieved with the combination of event & property bindings:
<input type='text' [value]=‘ename' (keyup)=‘ename=$event.target.value' />
 In short :
<input type='text' [value]=‘ename' (keyup)=‘ename=$event.target.value' />
 Routing happens at component level, for each different route different component can be loaded into RouterOutlet
directive, it is similar to ui-view in angular 1.X.
@RouteConfig([
{ path: '/', redirectTo: '/sponsers' },
{ path: '/sponsers', component: Sponsers, as: 'sponsers'}, //sponsers & attendees are components
{ path: '/attendees', component: Attendees, as: 'attendees'}
])
<router-outlet></router-outlet>
 Router-Link is similar to hg-href in 1.X.
<a [router-link]="['/attendees']" router-params="">attendees</a>
 JSON based route config
 404 support
 QueryString support
 Lyfecycle events
 routeResolver
 Component Directives
 Decorative Directives
 Template Directives
Following annotations are used to create directives.
 @Directive
 @Component
http://www.2ality.com/2014/10/typed-javascript.html
Service is a simple ES6 class in Angular2, these services should be injected into components via
Dependency Injection.
Sponsers-Service.ts
export class SponsersService{
constructor() {
}
getData(){
return ['cisco','intel','flipkart'];
}
}
http://www.2ality.com/2014/10/typed-javascript.html
http://www.2ality.com/2014/10/typed-javascript.html
Http is available as a separate module in alpha 35: https://code.angularjs.org/2.0.0-alpha.35
Eg:
import {Http, httpInjectables} from 'angular2/http';
@Component({selector: 'http-app', viewBindings: [httpInjectables]})
@View({templateUrl: 'people.html'})
class PeopleComponent {
constructor(http: Http) {
http.get('people.json')
.toRx()
.map(res => res.json())
.subscribe(people => this.people = people);
}
}
 Dependencies can be specifies as parameters: eg: function(@Inject(<svcName>) s)
 Component dependencies should be listed in bindings property of @Component annotation.
 Template dependencies should be listed in directives property of @View annotation.
http://www.2ality.com/2014/10/typed-javascript.html
import {Component, View, Injector} from 'angular2/angular2';
import { NgFor } from 'angular2/angular2';
import {SponsersService} from 'services/sponsers-service';
@Component({
selector: 'sponsers',
bindings:[SponsersService]
})
@View({
template: '<ul><li *ng-for="#item of data">{{item}}</li></ul>',
directives:[NgFor]
})
export class Sponsers {
data;
constructor(@Inject(SponsersService) s) {
this.data = s.getData();
}
}
Main-thread
(Browser+App+Angular Dom renderer)
messages
Child thread
(Angular stuff – house keeping etc)
 http://angular.io
 www.victorsavkin.com
 www.tryangular2.com
 http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0
 http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html
https://github.com/nasangam
Angular js 2.0 beta
Ad

Recommended

Angular js 2.0
Angular js 2.0
ccmchandrakanth5
 
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
 
Angular2 with type script
Angular2 with type script
Ravi Mone
 
Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
Angular1x and Angular 2 for Beginners
Angular1x and Angular 2 for Beginners
Oswald Campesato
 
Angular js 2
Angular js 2
Ran Wahle
 
Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2
Ross Dederer
 
AngularJS2 / TypeScript / CLI
AngularJS2 / TypeScript / CLI
Domenico Rutigliano
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Angular 2: What's New?
Angular 2: What's New?
jbandi
 
Introduction to Angular 2
Introduction to Angular 2
Dawid Myslak
 
Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Angular 2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 
Introduction to Angular 2
Introduction to Angular 2
Naveen Pete
 
Angular 2 overview
Angular 2 overview
Jesse Warden
 
Angular 1.x in action now
Angular 1.x in action now
GDG Odessa
 
Angular 2 - Core Concepts
Angular 2 - Core Concepts
Fabio Biondi
 
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Codemotion
 
Angular2 with TypeScript
Angular2 with TypeScript
Rohit Bishnoi
 
AngularJS 2.0
AngularJS 2.0
Boyan Mihaylov
 
Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!
Sirar Salih
 
What’s new in angular 2
What’s new in angular 2
Ran Wahle
 
Angular 2: core concepts
Angular 2: core concepts
Codemotion
 
Angular 2 - An Introduction
Angular 2 - An Introduction
NexThoughts Technologies
 
Angular 5
Angular 5
Bartłomiej Narożnik
 
5 angularjs features
5 angularjs features
Alexey (Mr_Mig) Migutsky
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 
Angular 2
Angular 2
Nigam Goyal
 
Post modern theory application
Post modern theory application
joajoajoa1
 
NEGATIVA VOTE IN ELECTIONS
NEGATIVA VOTE IN ELECTIONS
Kishan Panchal
 

More Related Content

What's hot (20)

Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Angular 2: What's New?
Angular 2: What's New?
jbandi
 
Introduction to Angular 2
Introduction to Angular 2
Dawid Myslak
 
Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Angular 2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 
Introduction to Angular 2
Introduction to Angular 2
Naveen Pete
 
Angular 2 overview
Angular 2 overview
Jesse Warden
 
Angular 1.x in action now
Angular 1.x in action now
GDG Odessa
 
Angular 2 - Core Concepts
Angular 2 - Core Concepts
Fabio Biondi
 
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Codemotion
 
Angular2 with TypeScript
Angular2 with TypeScript
Rohit Bishnoi
 
AngularJS 2.0
AngularJS 2.0
Boyan Mihaylov
 
Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!
Sirar Salih
 
What’s new in angular 2
What’s new in angular 2
Ran Wahle
 
Angular 2: core concepts
Angular 2: core concepts
Codemotion
 
Angular 2 - An Introduction
Angular 2 - An Introduction
NexThoughts Technologies
 
Angular 5
Angular 5
Bartłomiej Narożnik
 
5 angularjs features
5 angularjs features
Alexey (Mr_Mig) Migutsky
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 
Angular 2
Angular 2
Nigam Goyal
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Angular 2: What's New?
Angular 2: What's New?
jbandi
 
Introduction to Angular 2
Introduction to Angular 2
Dawid Myslak
 
Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Angular 2 Crash Course
Angular 2 Crash Course
Elisha Kramer
 
Introduction to Angular 2
Introduction to Angular 2
Naveen Pete
 
Angular 2 overview
Angular 2 overview
Jesse Warden
 
Angular 1.x in action now
Angular 1.x in action now
GDG Odessa
 
Angular 2 - Core Concepts
Angular 2 - Core Concepts
Fabio Biondi
 
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Codemotion
 
Angular2 with TypeScript
Angular2 with TypeScript
Rohit Bishnoi
 
Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!
Sirar Salih
 
What’s new in angular 2
What’s new in angular 2
Ran Wahle
 
Angular 2: core concepts
Angular 2: core concepts
Codemotion
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 

Viewers also liked (20)

Post modern theory application
Post modern theory application
joajoajoa1
 
NEGATIVA VOTE IN ELECTIONS
NEGATIVA VOTE IN ELECTIONS
Kishan Panchal
 
Persistent System: Focusing on the increase IP-led revenues
Persistent System: Focusing on the increase IP-led revenues
NARNOLIA SECURITIES LIMITED
 
Vampiros: de Drácula a True Blood
Vampiros: de Drácula a True Blood
Jorge Martínez Lucena
 
Career services guide_web_may20_2015
Career services guide_web_may20_2015
Mental Health Commission of Canada
 
CASO CLÍNICO: PACIENTE ALCOÓLATRA COM OBESIDADE
CASO CLÍNICO: PACIENTE ALCOÓLATRA COM OBESIDADE
uniaoquimica
 
My favorite subject
My favorite subject
Alvin Panghulan Dolaoco
 
18 Mobile Marketing Truisms
18 Mobile Marketing Truisms
wefidata
 
LA MODA DE LOS ZAPATOS
LA MODA DE LOS ZAPATOS
irenegutieerrez
 
Digital publishing power point
Digital publishing power point
charlie_murphy5
 
Схема водоснабжения и водоотведения сп Ермолинское на период до 2023 года (2)
Схема водоснабжения и водоотведения сп Ермолинское на период до 2023 года (2)
Администрация сельского поселения Ермолинское Истринского района Московской области
 
Salah satu penyakit yang biasa muncul pada lansia
Salah satu penyakit yang biasa muncul pada lansia
Ridwan Setiawan
 
2015-05-19 Atelier N°3 SSA 2015 "MSSanté dans votre messagerie d'établissemen...
2015-05-19 Atelier N°3 SSA 2015 "MSSanté dans votre messagerie d'établissemen...
ASIP Santé
 
스프링 프로젝트 시작하기
스프링 프로젝트 시작하기
Ashal aka JOKER
 
Apprendre du lexique
Apprendre du lexique
Stel LOula
 
Teatro Español en los Siglos de Oro
Teatro Español en los Siglos de Oro
Juan Suárez Pérez
 
Pediatric Febrile Seizures اختلاجات دراطفال
Pediatric Febrile Seizures اختلاجات دراطفال
Dr.Mujeebullah Mahboob
 
El ballet
El ballet
galletasdeoreo
 
Post modern theory application
Post modern theory application
joajoajoa1
 
NEGATIVA VOTE IN ELECTIONS
NEGATIVA VOTE IN ELECTIONS
Kishan Panchal
 
Persistent System: Focusing on the increase IP-led revenues
Persistent System: Focusing on the increase IP-led revenues
NARNOLIA SECURITIES LIMITED
 
CASO CLÍNICO: PACIENTE ALCOÓLATRA COM OBESIDADE
CASO CLÍNICO: PACIENTE ALCOÓLATRA COM OBESIDADE
uniaoquimica
 
18 Mobile Marketing Truisms
18 Mobile Marketing Truisms
wefidata
 
Digital publishing power point
Digital publishing power point
charlie_murphy5
 
Salah satu penyakit yang biasa muncul pada lansia
Salah satu penyakit yang biasa muncul pada lansia
Ridwan Setiawan
 
2015-05-19 Atelier N°3 SSA 2015 "MSSanté dans votre messagerie d'établissemen...
2015-05-19 Atelier N°3 SSA 2015 "MSSanté dans votre messagerie d'établissemen...
ASIP Santé
 
스프링 프로젝트 시작하기
스프링 프로젝트 시작하기
Ashal aka JOKER
 
Apprendre du lexique
Apprendre du lexique
Stel LOula
 
Teatro Español en los Siglos de Oro
Teatro Español en los Siglos de Oro
Juan Suárez Pérez
 
Pediatric Febrile Seizures اختلاجات دراطفال
Pediatric Febrile Seizures اختلاجات دراطفال
Dr.Mujeebullah Mahboob
 
Ad

Similar to Angular js 2.0 beta (20)

Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Angular js
Angular js
Felixits
 
Angular js
Angular js
Felixits
 
Angular 2
Angular 2
Travis van der Font
 
An afternoon with angular 2
An afternoon with angular 2
Mike Melusky
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
Ran Wahle
 
Angular 2 with typescript
Angular 2 with typescript
Tayseer_Emam
 
An evening with Angular 2
An evening with Angular 2
Mike Melusky
 
What's new in Angular 2?
What's new in Angular 2?
Alfred Jett Grandeza
 
Ng-Conf 2015 Report : AngularJS 1 & 2
Ng-Conf 2015 Report : AngularJS 1 & 2
Nicolas PENNEC
 
Intro to AngularJs
Intro to AngularJs
SolTech, Inc.
 
Quick answers to Angular2+ Interview Questions
Quick answers to Angular2+ Interview Questions
Luis Martín Espino Rivera
 
An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Paddy Lock
 
Angular, the New Angular JS
Angular, the New Angular JS
Kenzan
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
Rainer Stropek
 
Angular2 tutorial
Angular2 tutorial
HarikaReddy115
 
Angular TS(typescript)
Angular TS(typescript)
Ivan Stepić
 
Angular js 1.0-fundamentals
Angular js 1.0-fundamentals
Venkatesh Narayanan
 
Angular Presentation
Angular Presentation
Adam Moore
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Angular js
Angular js
Felixits
 
Angular js
Angular js
Felixits
 
An afternoon with angular 2
An afternoon with angular 2
Mike Melusky
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
Ran Wahle
 
Angular 2 with typescript
Angular 2 with typescript
Tayseer_Emam
 
An evening with Angular 2
An evening with Angular 2
Mike Melusky
 
Ng-Conf 2015 Report : AngularJS 1 & 2
Ng-Conf 2015 Report : AngularJS 1 & 2
Nicolas PENNEC
 
Quick answers to Angular2+ Interview Questions
Quick answers to Angular2+ Interview Questions
Luis Martín Espino Rivera
 
An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Paddy Lock
 
Angular, the New Angular JS
Angular, the New Angular JS
Kenzan
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
Rainer Stropek
 
Angular TS(typescript)
Angular TS(typescript)
Ivan Stepić
 
Angular Presentation
Angular Presentation
Adam Moore
 
Ad

Recently uploaded (20)

GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
 
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
 
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Securing AI - There Is No Try, Only Do!.pdf
Securing AI - There Is No Try, Only Do!.pdf
Priyanka Aash
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
ICT Frame Magazine Pvt. Ltd.
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
 
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
Edge AI and Vision Alliance
 
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
 
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
 
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
 
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdf
Saikat Basu
 
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdf
Priyanka Aash
 
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Smarter Aviation Data Management: Lessons from Swedavia Airports and Sweco
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Priyanka Aash
 
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Wenn alles versagt - IBM Tape schützt, was zählt! Und besonders mit dem neust...
Josef Weingand
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
Securing AI - There Is No Try, Only Do!.pdf
Securing AI - There Is No Try, Only Do!.pdf
Priyanka Aash
 
9-1-1 Addressing: End-to-End Automation Using FME
9-1-1 Addressing: End-to-End Automation Using FME
Safe Software
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
Lessons Learned from Developing Secure AI Workflows.pdf
Lessons Learned from Developing Secure AI Workflows.pdf
Priyanka Aash
 
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
Information Security Response Team Nepal_npCERT_Vice_President_Sudan_Jha.pdf
ICT Frame Magazine Pvt. Ltd.
 
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
"How to survive Black Friday: preparing e-commerce for a peak season", Yurii ...
Fwdays
 
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdf
Muhammad Yuga Nugraha
 
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
Edge AI and Vision Alliance
 
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
 
"Database isolation: how we deal with hundreds of direct connections to the d...
"Database isolation: how we deal with hundreds of direct connections to the d...
Fwdays
 
You are not excused! How to avoid security blind spots on the way to production
You are not excused! How to avoid security blind spots on the way to production
Michele Leroux Bustamante
 

Angular js 2.0 beta

  • 3.  Errors?? God Only Knows   Errors are ignored in templates. Even God Doesn’t know..!!!   Different ways to create different things: provider, factoy, service, value, constant  Opinionated, Verbose, steep learning curve  Everything is singleton   Not an elegant dependency injection, crazy work arounds for minification   Route: No built-in partial view support using ng-route  Issues with Scope & child scopes  Dirty checking  Issues with digest cycles: $scope.apply();  Two way data binding: Max of 2000 bindings.  jqLite: No direct modification of dom??? dropped in 2.0   Directives supports “EACM” only no way to use selectors.  modules : No built-in module loading  No inheritance supported for angular modules
  • 4.  To knock off many old components. i.e. $scope, $rootScope, services, controllers, modules, jqLite etc.  To leverage latest ECMA Script standards  To leverage modern browser capabilities.  Improve many areas with different approaches with past expirience.
  • 5. Routing Services DI Directives ES5 & ES6+ Server Side Angular Change Detection Web workers Promises Testing Material design RxJsTypes Annotations
  • 6. Angular JS 1.x Angular JS 2.0 Controllervs $scopeecives Component Class Service Simple Class Angular Modules ES6 Modules Directive
  • 7.  Converts source code from one programming language to other.  ES6 to ES5 Transpilers  Traceur  Typescript  Flow  Babel  Dart  Angular2 apps should be written in ES6. since the browsers doesn’t support ES6 you can use any of the above transpiler to convert it to ES5.  Google and Microsoft are working together to make type script as a standard for developing angular2.0 apps. http://www.2ality.com/2014/10/typed-javascript.html
  • 9. Angular 1.X Angular 2.0  Change detection happens at DOM node level only  Change in one node triggers dirty checking at all other nodes.  Change detection can happen at component level as well.  Change in one component triggers dirty checking in other nodes below the current node…  Change detection strategy can be configured at component level
  • 10. @Component({ selector: <string>‘, changeDetection: ‘<string>’ }) @View({ template: ‘<string>’ }) export class <className>{ constructor() { } }  The changeDetection property defines, whether the change detection will be checked every time or only when the component tells it to do so. Watchtower.js is used for change detection.
  • 11.  Angular 2.0 doesn’t have two-way data binding like 1.x  two-way data binding can be achieved with the combination of event & property bindings: <input type='text' [value]=‘ename' (keyup)=‘ename=$event.target.value' />  In short : <input type='text' [value]=‘ename' (keyup)=‘ename=$event.target.value' />
  • 12.  Routing happens at component level, for each different route different component can be loaded into RouterOutlet directive, it is similar to ui-view in angular 1.X. @RouteConfig([ { path: '/', redirectTo: '/sponsers' }, { path: '/sponsers', component: Sponsers, as: 'sponsers'}, //sponsers & attendees are components { path: '/attendees', component: Attendees, as: 'attendees'} ]) <router-outlet></router-outlet>  Router-Link is similar to hg-href in 1.X. <a [router-link]="['/attendees']" router-params="">attendees</a>  JSON based route config  404 support  QueryString support  Lyfecycle events  routeResolver
  • 13.  Component Directives  Decorative Directives  Template Directives Following annotations are used to create directives.  @Directive  @Component http://www.2ality.com/2014/10/typed-javascript.html
  • 14. Service is a simple ES6 class in Angular2, these services should be injected into components via Dependency Injection. Sponsers-Service.ts export class SponsersService{ constructor() { } getData(){ return ['cisco','intel','flipkart']; } } http://www.2ality.com/2014/10/typed-javascript.html
  • 15. http://www.2ality.com/2014/10/typed-javascript.html Http is available as a separate module in alpha 35: https://code.angularjs.org/2.0.0-alpha.35 Eg: import {Http, httpInjectables} from 'angular2/http'; @Component({selector: 'http-app', viewBindings: [httpInjectables]}) @View({templateUrl: 'people.html'}) class PeopleComponent { constructor(http: Http) { http.get('people.json') .toRx() .map(res => res.json()) .subscribe(people => this.people = people); } }
  • 16.  Dependencies can be specifies as parameters: eg: function(@Inject(<svcName>) s)  Component dependencies should be listed in bindings property of @Component annotation.  Template dependencies should be listed in directives property of @View annotation. http://www.2ality.com/2014/10/typed-javascript.html import {Component, View, Injector} from 'angular2/angular2'; import { NgFor } from 'angular2/angular2'; import {SponsersService} from 'services/sponsers-service'; @Component({ selector: 'sponsers', bindings:[SponsersService] }) @View({ template: '<ul><li *ng-for="#item of data">{{item}}</li></ul>', directives:[NgFor] }) export class Sponsers { data; constructor(@Inject(SponsersService) s) { this.data = s.getData(); } }
  • 17. Main-thread (Browser+App+Angular Dom renderer) messages Child thread (Angular stuff – house keeping etc)
  • 18.  http://angular.io  www.victorsavkin.com  www.tryangular2.com  http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0  http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html