Downloaded 84 times
![Differences between
AngularJs & Angular2
In Angular 1.x, ng-model is used for two way data binding, but with Angular2 it is
replaced with [(ngModel)].](https://cdn.statically.io/img/image.slidesharecdn.com/angular2-161006132200/75/Angular2-14-2048.jpg)
![Differences between
AngularJs & Angular2
• In Angular 1.x, we can define a services via
different ways.(Factory,Service,etc.)
• In Angular 2, class is the only way to define a
service.
• Routing
• ng-href => [routerLink]
• Performance](https://cdn.statically.io/img/image.slidesharecdn.com/angular2-161006132200/75/Angular2-15-2048.jpg)
Uploaded bySoftware Infrastructure
Angular2
This document provides an overview of Angular2 including what it is, when it was announced, key differences from Angular1, core concepts, change detection, and mobile support. Angular2 was announced in 2014, is written entirely in Typescript, and is designed from the ground up for mobile with a focus on memory efficiency. It introduces new concepts like components and dependency injection while removing controllers and scopes. Change detection is handled through zones and by each component. A demo of a task manager application is provided and upgrading from Angular1 is discussed.
Angular2
- 1. 19.08.2016 Yusuf Koraman -Software Architecture ANGULAR2
- 2. Content Angular2 What?,When ? Why? Concept. Difference between AngularJs & Angular2 Angular2 Change Detections Break Time (10 min) Demo (Task Manager) Upgrading From Angular 1.x Angular2 Performance Benchmark QUESTIONS?
- 3. Angular2 What? Why?When? • It is written entirely in Typescript. • Not an update for Angular 1.x. • Announced @ March 2014 • Simpler than Angular 1 and has far fewer concepts, making it easier to understand • Angular2 is designed from the ground-up for mobile and optimized for memory efficiency and less CPU cycles. • Angular2 is a «design pattern». • Not Released Yet. @BETA
- 4. Mobile Support IONIC2 -@Beta NativeScript with Angular2
- 5.
- 6.
- 7.
- 8.
- 9. Differences between AngularJs &Angular2 • Angular 1.x was not built with mobile support, Angular2 is mobile oriented. • Angular 1.x is easy to setup. Angular2 is dependent of other libraries • Angular 1.x’s controllers and $scope are gone
- 10. Differences between AngularJs &Angular2
- 11. Differences between AngularJs &Angular2 • Say goodbye to ng-app. The only way to bootstrap angular is via code.
- 12. Differences between AngularJs &Angular2
- 13. Differences between AngularJs &Angular2 • ng-repeat is replaced with *ngFor. • Angular2 uses camelCase syntax – Ex: ng-class ngClass – ng-mode ngModel. • Angular2 directly uses the valid HTML DOM element properties and events (major change)
- 14. Differences between AngularJs &Angular2 In Angular 1.x, ng-model is used for two way data binding, but with Angular2 it is replaced with [(ngModel)].
- 15. Differences between AngularJs &Angular2 • In Angular 1.x, we can define a services via different ways.(Factory,Service,etc.) • In Angular 2, class is the only way to define a service. • Routing • ng-href => [routerLink] • Performance
- 16.
- 17.
- 18. Angular2 Change Detections •Basically application state change can be caused by three things • Events - click, submit, … • XHR - Fetching data from a remote server • Timers - setTimeout(), setInterval() • They are all asynchronous.
- 19.
- 20. Angular2 Change Detections •Who notifies Angular? * Zones * Each component has its own change detector
- 21.
- 22.
- 23. Angular2 Change Detections ImmutableObjects • We’ll always get a new reference with that change, as the original object is immutable.
- 24.
- 25. Angular2 Change Detections Observables •They don’t give us new references when a change is made. Instead, they fire events we can subscribe to in order to react to them.
- 26. Angular2 Change Detections What’sthe problem?
- 27.
- 28.
- 29.
- 30. Break Time –10 min.
- 31.
- 32. Upgrading From Angular1.x • Creating a new Angular2 project. • Upgrading with The Upgrade Adapter • https://angular.io/docs/ts/latest/guide/upgra de.html
- 33. Angular 2 PerformanceBenchmark http://stefankrause.net/js-frameworks-benchmark/
- 34.
Editor's Notes
- #2
- #4 Verify that you are running at least node v4.x.x and npm 3.x.x Angular2 Languages : Dart or TypeScript & Javascript The framework consists of several cooperating libraries, some of them core and some optional. Angular2 yeniden yazılmıştır. Angular1’in upgrade edilmiş hali değil. Yazan takım yine aynı. 2009’dan beri gelen bir tecrübe var. Angular1’in eksiklikleri neler, daha ne kadar kolay kodlama yapılabilir, ne kadar hızlı öğrenilebilir hale getirilebilir? Bunlar bazı kriterler olmuş. Kimileri Angular2 öğrenmek için en iyi yolun Angular1’i öğrenin ve karşılaştırarak ilerleyin demiş ama bu Angular1 bilenler için geçerli. Hiç angular1 bilmeyen biri Angular2 de yazabilir ve angular1 öğrenmesine de gerek yok. 2014 yılında cıkacagı duyuruluyor. 2014’ün ikinci yarısında Ember ve React’in populeritesi artıyor. 2014’de duyurulması erken bir tarih olabilir. ES6 o zamanlar standart haline gelmemişti. Standart olabilmesi için 1 senesi vardı. ATScript kullanımı düşünülmüş. Key Features ● Mobile First ( Mobil odaklı) İkinci bir özelliği ise mobil desteğinin olması. Bunun için iki farklı framewok ile çalışıyorlar şu anda. Bunlardan ilki IONIC ( IONIC-2 beta versiyonu bu arada duyuruldu ve angular2 kullanılarak yazıldı.) IONIC ile hybrit uygulamalar için çalıyorlar. Bir diğeri de native uygulamalar için NativeScript( Telerik) . Native scriptin ionic’ten farkı ise, ionic gibi bir webView kullanmıyor. Cihazın engeenini kullanıyor. Yani ekranda görünen buton aslında androidin butonu oluyor mesela render olduğu zaman. ● Digest cycle () $scope.$apply vs kullanıyorduk mesela bunlar yok. Gerek kalmadı. Değişiklikleri hemen gösterebiliyoruz. $timeout kullanımı. ● Future Ready ● Speed & Performance One way binding olanları daha nasıl hızlı yapabilirim? ● Simple & Expressive Kodlaması basit ve okunabilir, ögrenmesi kolay. Basit kodlanabilir olması veya kullanıcıların daha az feature bilmesi angular1’den daha zayıf olduğu anlamına gelmesin. Çoğu şeyi framework yapıyor. ● Hierarchical Dependency Injection Dependency için daha nasıl basit yapabilirim. ● Support for Web Components Geliştirme yapan ekip her türlü yoruma vs. acıklar. Mesela github da yaptıkları haftalık geliştirme / toplantıları paylaşıyorlar. Şuan AngularJS uygulamalarımızda module yüklemenin pek çok yöntemi var. Klasik script tagları içinde link verme, require.js, Browserify, webpack vb.. Fakat hangisi en iyisi bilen yok. Yeni versiyonda ise standart “System.js” kullanılıyor. Hepimiz projelerimizde çeşitli implementasyonları kullanırız. Örneği Twitter’ ın Bootstrap Framework’ ünün Angular için olan versiyonu ui-bootstrap, yada AngularStrap. Lakin her ikisinide projemizde aynı anda dahil edemeyiz, değil mi? Edersek işler karışır, çünkü her ikiside aynı directive’ lere sahip. Peki Angular bize bu konuda nasıl bir avantaj sunuyor ? SYSTEM.JS Angular 2 doesn’t have its own module system like Angular 1 did – it uses SystemJS. According to its Github page, it is a “Universal dynamic module loader”. That’s a lot of words. SystemJS is a library written by Guy Bedford (and others) built upon es6-module-loader to provide a way to load not only ES6 modules, but also CommonJS, AMD and global scripts. Other module loaders, such as WebPack, can be swapped in instead. typescript.js typescript.js is the transpiler used by SystemJS, which it uses to transpile TypeScript into JavaScript, live in the browser. It’s setup by System.config: angular2-polyfills This file is essentially a mashup of zone.js and reflect-metadata. Zones are an idea borrowed from Dart that Angular 2 uses to efficiently know when to update the view. reflect-metadata is used to enable dependency injection through decorators. RxJS RxJS (Reactive Extensions for JavaScript) is a library for Observables. This is a term you’ll hear a lot in the context of Angular 2, and it’s a pretty exciting development. Observables are a new addition that resemble the Promises you already know from Angular 1, except they can be called multiple times. Have you ever wanted to write something like “fire this promise chain every time some data arrives”? Observables let you do that. Even if you don’t want to use them, Angular 2 does. So Rx.js is included as a dependency.
- #5 Every Angular app has at least one module class, the root module. We bootstrap that module to launch the application. The root module is all we need in a simple application with a few components. As the app grows, we refactor the root module into feature modules that represent collections of related functionality. We then import these modules into the root module.
- #6 Angular2 de herşey bir kompanenttir.Her UI elementi,directive, sayfalar vs. Uygulamanın bir tane root kompanenti vardır. Ve diğer kompanentlerin aslında bu taşıyıcısıdır. Her Angular2 uygulamasının bir de companent treesi oluşur aslında. Data akışı tek yönlü. Inputlar sayesinde parenttan child’a data geçişi yapılırken childden parenta eventlerle data gönderilebiliyor.
- #7 Components are Self-Describing knows how to interact with its host element knows how to render itself configures dependency injection. has a well-defined public API of input and output properties This means that any component can be bootstrapped as an application. loaded as a route, or used in some other component directly Component Directives Decorator Directives –for example adding a tooltip, or showing/hiding elements using ng-show/ng-hide Template Directives – These will turn HTML into a reusable template. Examples include ng-if and ng- repeat.
- #9 Both Angular 1 and Angular 2 come with dependency injection modules. We don't have to create an Angular injector. Angular creates an application-wide injector for us during the bootstrap process. Decoratorundan bakarak neleri Inject edeceğine karar verir. Ama constructureda kullanırsan aslında sen bunlara ait bir instance olusuturursun. Angular 1 we have several APIs for injecting dependencies into directives: some objects are injected by position (e.g., element), some by name. Angular 2 provides a single API for injecting dependencies. All of them injected into the component’s constructor. Servis constructureda bir değişiklik yaptıgımız zaman bundan etkilenmemek için aslında DI kullanılıyor. Her zaman constructore da olusturmak istemeyebiliriz. O zaman injector.get(«xx») gibi bir komutla servisi elde edebiliyoruz. Bu bize daha önceden yaratılmış bir servis instance’ı varsa onu dönüyor. Yoksa da ikinci bir parametre alıyor mesela ve onu olusturuyor,dönüyor. Frameworkun oluşturduğu bir interface var aslında. Bu interface vasıtasıyla oluşturuyor instanceları. Eğer servis parametre ile calişiyorsa ve bu parametre sabit ise o zaman base’den türeyen farklı servisler yapılsın. O servisler çağrılsın gibi bir mantıkları var.
- #10 setTimeout(() => this.message = 'Angular-tips', 1000); bu eskiden calişmiyordu ama artık calişiyor.
- #11 Angular1 de controller varken angular2 de komponent kavramı geliyor. Angular 1.x controllers and $scope are gone. We can say that controllers are replaced with “Components” in Angular 2. Angular 2 is component based. Buadaki scope ve kontroller kavramları gitti. Component diye bir kavram var. artık mesela $scope.apply gibi bişi demiyoruz da dogrudan set ettiğimizde çalişabiliyor mesela.
- #16 Artık Provider, Value, Factory, Constant, Service yok.
- #18 >Dirty checking : every time there might have been a change to the view, so whenever the user clicks on something, an $http request finishes, Angular will check the value of each binding and compare it to the old value. When the value is different between the two versions Angular will update the UI. When a value differs between it is considered 'dirty', hence the term 'dirty checking'. The phase in which Angular checks for changes is called the "digest phase». Angular 1.x doesn't know anything about the relationships between 'bindings'. So it cannot know in which order to perform the 'dirty' checks. What Angular does instead is evaluate each binding until all bindings have stabilized, by stabilized I mean that they have stopped changing. Angular does this by running a "loop" that will evaluate each binding until the bindings “report” that they are stabilized. This "loop" is called the digest cycle, which is a part of the digest phase. The digest cycle will resolve all bindings until none of the bindings have reported a change between runs of the cycle. Angular-1 de watcherlar kullanarak change detection’ı algılayabiliyordu. Angular2 de bunun için zone kullanılıyor.
- #21 https://plnkr.co/edit/gC7GjU?p=preview
- #32 Dosya adı ile decorator class adının aynı olmasına gerek yok. Bir componentte birden fazla export class varsa ilk classı kendisininmiş gibi kabul eder ve sadece o class ile bootstrap edilebilir. Baska turlu olmaz. (classların sırasına bakıyor) import {Component} from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app/app.html" }) export class bb { name: string; constructor() { this.name = "bb"; } } export class aa { name: string; constructor() { this.name = "aa"; } }
- #34 http://stefankrause.net/js-frameworks-benchmark/ http://www.stefankrause.net/js-frameworks-benchmark2/webdriver-java/table.html