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

More Related Content

What's hot (20)

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

Viewers also liked (20)

Post modern theory application
Post modern theory applicationPost modern theory application
Post modern theory application
joajoajoa1
 
NEGATIVA VOTE IN ELECTIONS
NEGATIVA VOTE IN ELECTIONSNEGATIVA 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 revenuesPersistent 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 BloodVampiros: 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_2015Career 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 OBESIDADECASO CLÍNICO: PACIENTE ALCOÓLATRA COM OBESIDADE
CASO CLÍNICO: PACIENTE ALCOÓLATRA COM OBESIDADE
uniaoquimica
 
My favorite subject
My favorite subjectMy favorite subject
My favorite subject
Alvin Panghulan Dolaoco
 
18 Mobile Marketing Truisms
18 Mobile Marketing Truisms18 Mobile Marketing Truisms
18 Mobile Marketing Truisms
wefidata
 
LA MODA DE LOS ZAPATOS
LA MODA DE LOS ZAPATOSLA MODA DE LOS ZAPATOS
LA MODA DE LOS ZAPATOS
irenegutieerrez
 
Digital publishing power point
Digital publishing power pointDigital publishing power point
Digital publishing power point
charlie_murphy5
 
Salah satu penyakit yang biasa muncul pada lansia
Salah satu penyakit yang biasa muncul pada lansiaSalah 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...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 lexiqueApprendre du lexique
Apprendre du lexique
Stel LOula
 
Teatro Español en los Siglos de Oro
Teatro Español en los Siglos de OroTeatro 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 اختلاجات دراطفالPediatric Febrile Seizures اختلاجات دراطفال
Pediatric Febrile Seizures اختلاجات دراطفال
Dr.Mujeebullah Mahboob
 
El ballet
El balletEl ballet
El ballet
galletasdeoreo
 
Post modern theory application
Post modern theory applicationPost modern theory application
Post modern theory application
joajoajoa1
 
NEGATIVA VOTE IN ELECTIONS
NEGATIVA VOTE IN ELECTIONSNEGATIVA 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 revenuesPersistent 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 OBESIDADECASO CLÍNICO: PACIENTE ALCOÓLATRA COM OBESIDADE
CASO CLÍNICO: PACIENTE ALCOÓLATRA COM OBESIDADE
uniaoquimica
 
18 Mobile Marketing Truisms
18 Mobile Marketing Truisms18 Mobile Marketing Truisms
18 Mobile Marketing Truisms
wefidata
 
Digital publishing power point
Digital publishing power pointDigital publishing power point
Digital publishing power point
charlie_murphy5
 
Salah satu penyakit yang biasa muncul pada lansia
Salah satu penyakit yang biasa muncul pada lansiaSalah 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...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 lexiqueApprendre du lexique
Apprendre du lexique
Stel LOula
 
Teatro Español en los Siglos de Oro
Teatro Español en los Siglos de OroTeatro 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 اختلاجات دراطفال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.0Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Angular js
Angular jsAngular js
Angular js
Felixits
 
Angular js
Angular jsAngular js
Angular js
Felixits
 
Angular 2
Angular 2Angular 2
Angular 2
Travis van der Font
 
An afternoon with angular 2
An afternoon with angular 2An afternoon with angular 2
An afternoon with angular 2
Mike Melusky
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
Ran Wahle
 
Angular 2 with typescript
Angular 2 with typescriptAngular 2 with typescript
Angular 2 with typescript
Tayseer_Emam
 
An evening with Angular 2
An evening with Angular 2An evening with Angular 2
An evening with Angular 2
Mike Melusky
 
What's new in Angular 2?
What's new in Angular 2?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 & 2Ng-Conf 2015 Report : AngularJS 1 & 2
Ng-Conf 2015 Report : AngularJS 1 & 2
Nicolas PENNEC
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
SolTech, Inc.
 
Quick answers to Angular2+ Interview Questions
Quick answers to Angular2+ Interview QuestionsQuick 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 2An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development TutorialPPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Paddy Lock
 
Angular, the New Angular JS
Angular, the New Angular JSAngular, 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 ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
Rainer Stropek
 
Angular2 tutorial
Angular2 tutorialAngular2 tutorial
Angular2 tutorial
HarikaReddy115
 
Angular TS(typescript)
Angular TS(typescript)Angular TS(typescript)
Angular TS(typescript)
Ivan Stepić
 
Angular js 1.0-fundamentals
Angular js 1.0-fundamentalsAngular js 1.0-fundamentals
Angular js 1.0-fundamentals
Venkatesh Narayanan
 
Angular Presentation
Angular PresentationAngular Presentation
Angular Presentation
Adam Moore
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0Introduction to Angular js 2.0
Introduction to Angular js 2.0
Nagaraju Sangam
 
Angular js
Angular jsAngular js
Angular js
Felixits
 
Angular js
Angular jsAngular js
Angular js
Felixits
 
An afternoon with angular 2
An afternoon with angular 2An afternoon with angular 2
An afternoon with angular 2
Mike Melusky
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
Ran Wahle
 
Angular 2 with typescript
Angular 2 with typescriptAngular 2 with typescript
Angular 2 with typescript
Tayseer_Emam
 
An evening with Angular 2
An evening with Angular 2An evening with Angular 2
An evening with Angular 2
Mike Melusky
 
Ng-Conf 2015 Report : AngularJS 1 & 2
Ng-Conf 2015 Report : AngularJS 1 & 2Ng-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 QuestionsQuick 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 2An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development TutorialPPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Paddy Lock
 
Angular, the New Angular JS
Angular, the New Angular JSAngular, 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 ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
Rainer Stropek
 
Angular TS(typescript)
Angular TS(typescript)Angular TS(typescript)
Angular TS(typescript)
Ivan Stepić
 
Angular Presentation
Angular PresentationAngular Presentation
Angular Presentation
Adam Moore
 
Ad

Recently uploaded (20)

Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
AI Creative Generates You Passive Income Like Never Before
AI Creative Generates You Passive Income Like Never BeforeAI Creative Generates You Passive Income Like Never Before
AI Creative Generates You Passive Income Like Never Before
SivaRajan47
 
soulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate reviewsoulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate review
Soulmaite
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Extend-Microsoft365-with-Copilot-agents.pptx
Extend-Microsoft365-with-Copilot-agents.pptxExtend-Microsoft365-with-Copilot-agents.pptx
Extend-Microsoft365-with-Copilot-agents.pptx
hoang971
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : IntroductionJira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdfBoosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Boosting MySQL with Vector Search -THE VECTOR SEARCH CONFERENCE 2025 .pdf
Alkin Tezuysal
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Evaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical ContentEvaluation Challenges in Using Generative AI for Science & Technical Content
Evaluation Challenges in Using Generative AI for Science & Technical Content
Paul Groth
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
AI Creative Generates You Passive Income Like Never Before
AI Creative Generates You Passive Income Like Never BeforeAI Creative Generates You Passive Income Like Never Before
AI Creative Generates You Passive Income Like Never Before
SivaRajan47
 
soulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate reviewsoulmaite review - Find Real AI soulmate review
soulmaite review - Find Real AI soulmate review
Soulmaite
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Extend-Microsoft365-with-Copilot-agents.pptx
Extend-Microsoft365-with-Copilot-agents.pptxExtend-Microsoft365-with-Copilot-agents.pptx
Extend-Microsoft365-with-Copilot-agents.pptx
hoang971
 
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und AnwendungsfälleDomino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
Domino IQ – Was Sie erwartet, erste Schritte und Anwendungsfälle
panagenda
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : IntroductionJira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
Co-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using ProvenanceCo-Constructing Explanations for AI Systems using Provenance
Co-Constructing Explanations for AI Systems using Provenance
Paul Groth
 

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