18
Notes: If you experience audio issues during the webinar, you can dial in through telephone details provided to you in your registration confirmation email. Please feel free to post questions in the questions dialog and we will try to answer as many as we can at the end. Recording of this session will be shared in next 24-48 hours. You can also write to us at [email protected] for any clarifications or information. AngularJS 2.0 - New Paradigm of Application Development

AngularJS 2.0 - New Paradigm of Application Development

Embed Size (px)

Citation preview

Page 1: AngularJS 2.0 - New Paradigm of Application Development

Notes: If you experience audio issues during the webinar, you can dial in through telephone details provided

to you in your registration confirmation email. Please feel free to post questions in the questions dialog and we will try to answer as many as we can

at the end. Recording of this session will be shared in next 24-48 hours. You can also write to us at [email protected] for any clarifications or information.

AngularJS 2.0 - New Paradigm of Application Development

Page 2: AngularJS 2.0 - New Paradigm of Application Development

Session Speaker

Abhishek ChandraTechnical Lead WinWire Technologies

Page 3: AngularJS 2.0 - New Paradigm of Application Development

Agenda

Demo

Core concepts of AngularJS 2.0

What’s New in AngularJS 2.0

Motivations

Questions

12345

Page 4: AngularJS 2.0 - New Paradigm of Application Development

Motivations

Performance

Better Browsers

Mobile

Ease of Uses

ECMAScript 6

Page 5: AngularJS 2.0 - New Paradigm of Application Development

Motivations

Performance

Page 6: AngularJS 2.0 - New Paradigm of Application Development

What’s New in AngularJS 2.0

Removed $scope

HTML template syntax

Removed Controllers

Removed Directive Definition

Object Removed

angular.moduleRemoved

jqLiteFocus on

ECMAScript 6 (and also AtScript)

Unified around Web

Components

Page 7: AngularJS 2.0 - New Paradigm of Application Development

Typescript

• A typed superset of JavaScript• Compiled (transpiled) to

JavaScript for run-time use. • Has strong support under

Visual Studio and WebStorm

Page 8: AngularJS 2.0 - New Paradigm of Application Development

Comparing Angular 1.x and AngularJS 2.0

AngularJS 1.x

• Create Module• Declare ng-app • Create Controller• Attach items to $scope• Declare Controller • Create template

AngularJS 2.0

• Create component• Create template • Bootstrap • Transpilation

Page 9: AngularJS 2.0 - New Paradigm of Application Development

Upgrading to AngularJS 2.0

ngUpgrade

ngForward

Page 10: AngularJS 2.0 - New Paradigm of Application Development

Components

Page 11: AngularJS 2.0 - New Paradigm of Application Development

Component Hierarchy

Child Component 2

Child Component 3

AppChild Component 1

Page 12: AngularJS 2.0 - New Paradigm of Application Development

Local Variables

Page 13: AngularJS 2.0 - New Paradigm of Application Development

Event Handlers

Page 14: AngularJS 2.0 - New Paradigm of Application Development

Property Bindings

Page 15: AngularJS 2.0 - New Paradigm of Application Development

Template Syntax

Page 16: AngularJS 2.0 - New Paradigm of Application Development

Uniformity

Page 17: AngularJS 2.0 - New Paradigm of Application Development

Demo

Page 18: AngularJS 2.0 - New Paradigm of Application Development

Q & ANext WebinarTopic : Azure IoT HubWhen: Feb 10th 2016 at 9am PT

http://www.winwire.com/blog-winsights/

www.twitter.com/winwire

[email protected]

www.winwire.com