Angular 2 - Better or worse

Angular 2
Better or worse?
Vladimir Georgiev
Technical Trainer &
Software Developer @ SoftUni
http://VGeorgiev.org/
@VGeorgiew

Table of Contents
1.Who am I?
2.Where Angular 1 is going?
 v1.3
 v1.4
 v1.5
3.Angular 2
4.Demo
2

3
 Vladimir Georgiev
 Software Engineer and Technical Trainer @
Software University
 Top performing graduate from the Telerik
Software Academy (2013)
 Student in Technical University
 Computer and Software Engineering
 Web site & blog: www.VGeorgiev.org
 Twitter: @VGeorgiew
Who am I?

Have you ever written Angular?

Angular 1 vs Angular 2 sites
angularjs.org angular.io

Angular 1.3
Patch releases
Bug fixes
Small features

Angular 1.4
New Router
Internationalization
ng-animate, ng-messages, ng-cookies
…

 You need to require ngNewRouter module
New Router

Angular 1.4 – Performance boost
~30% faster digest times vs 1.3
11

Upgrade to 1.4 is very easy
It has very few breaking changes
(well document)

Work will start after 1.4 is out
Planning will happen in public
Community involvement is the key
 Comment / vote on issues you want to see fix
 Send pull requests
Angular 1.5

Angular Team is working on
new features for Angular 1

New Router
Internationalization
Material Design
Migration plan to Angular 2
Support
Angular 1 New Features

Use new router
Use ES6 modules
Use ES6 in general
This will make the migration easier

Release Angular 1 until you are using it

18
Performance
The Changing Web
Mobile
Ease of Use
Why Angular 2.0?

Simpler
Flexible
Productive developers
Fast
Consistent
Angular 2 Themes

20
 Angular 1
 Angular 2
 Why?
 Problems with src, disabled:
Angular 2 – Data Binding
<component title="{{expression}}">
<component [title]="expression">
<component disabled="{{exp}}">
<component ng-disabled="exp">
<component src="{{exp}}">
<component ng-src="{{exp}}">

21
 Expression
 Driven by change detection
 Statement
 Driven by event
Angular 2 – Event Binding
<component [prop]="user.name(current)">
<component (event)="user.name(current)">

22
Angular - Reference
<button (click)="input.focus()">
<input #input type="text" />

23
 Can you spot all the errors in here?
Angular 1 - Typos
<div tytle="{{usor.name}}">
<button ngClick="ctl.click()">
{{usor.name}}
</button>
</div>

24
Angular 1 - Typos
<div tytle="{{usor.name}}">
<button ngClick="ctl.click()">
{{usor.name}}
</button>
</div>

Angular 2 immediately Typo Errors
25

26
 Still in Angular 2
 Dependency injection
 Data binding
 Directives
 Router
 Filters
 Animation
 Accessibility
Angular 1 ?= Angular 2
 Still in Angular 2
 i18n
 Forms
 Expressions
 Material Design
 Protractor
 Karma
 Mocks

27
Web Components
New template syntax
New languages
Ultra-fast change detection
and more…
New in Angular 2

28
Angular 1
 Service
 Directive
 Controller
Angular 2
 Component
Differences between components
app.factory('SoftUniStore', function () { … });
app.directive('autocomplete', function () { … });
app.controller('softUniController', function () { … });
@Component({ selector: 'my-app' })
@Template({ url: 'templates/softuni' })
class SoftUniComponent { … }

29
Directives
<input name="title" autocomplete="movie-title">
module.directive('autocomplete', ["autocompleter", function(autocompleter) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
}
}
}]);
@Decorator({ selector: '[autocomplete]' })
class Autocomplete {
constructor(autocompleter:Autocompleter, el:NgElement, attrs:NgAttributes){
}
}
Angular 1
Angular 2

30
Microsyntax Templates
<ul>
<li template="foreach #item in items">
{{item}}
</li>
</ul>
<ul>
<li *foreach="#item in items">
{{item}}
</li>
</ul>

31
 AtScript is a JavaScript base language extending TypeScript
 It states that plain JavaScript code is a valid AtScript code
 Builds on ECMAScript 6 with types
 Extends it by annotations and type introspection
 Superset of ES6
 Uses TypeScript Syntax
 Optional Runtime Type Verification
 Type and Metadata Annotations
AtScript

34
 Traceur is a transpiler (compiler) that takes features of future
standards
 Traceur transpiles them into today JavaScript
Traceur

When Angular 2 ships?
First migration – May
Angular 2 – Far in the future

Open Source
with Community Involvement

38
 Add a feature
 Contact us
 Minimal set of changes per PR
 Unit tests
 Follow conventions
 Work on issues
 Write a Plunker or a failing test
 Broen at master?
 Help closing issues
How you can help

Resources - What We Need Additionally?
 ng-conf
 http://www.ng-conf.org/
 New Router Concepts
 https://www.youtube.com/watch?v=h1P_Vh4gSQY
 TODO App
 https://github.com/davideast/ng2do
 Victor Savkin Blog
 http://victorsavkin.com/

Angular 2 - Better or worse

More Related Content

What's hot (20)

Similar to Angular 2 - Better or worse (20)

Recently uploaded (20)

Angular 2 - Better or worse

Editor's Notes