INTRO TO ANGULAR 2 & COMPARISION WITH ANGULAR 1.X

NIKHIL KUMAR | SOFTWARE CONSULTANT Knoldus Software LLP

AGENDAINTRODUCTION to NG 2.0 & CONCEPTS

WHY NEW VERSION ?

MAJOR KEY FEATURES

PROBLEMS IN 1.X & SOLUTIONS IN 2.0

WEB COMPONENTS

MIGRATION PATH TO ANGULAR 2

AngularJS 1.3 is by far the best version of Angular available today. It was just released a few weeks ago. It's chock full of bug fixes, feature enhancements and performance improvements.

HISTORY & STABILITY

GOOGLE APPS 1600

WAS ONLY FOR DESIGNERS

Ng2.0 is not stable now

Why Angular 2A framework that cannot work with Web Components, bogs down on mobile or continues to push its own module and class API against the standards, is not going to last long. The Angular team's answer to these problems is a new version: Angular 2.0. It is essentially a re-imagining of AngularJS for the modern web, taking into account everything that has been learned over the last five years.

YEAHHHHH..... :D

Web Components?

Web Components are on the horizon. The term Web Components usually refers to a collection of four related W3C specifications:

Custom Elements - Enables the extension of HTML through custom tags. HTML Imports - Enables packaging of various resources (HTML, CSS, JS, etc.). Template Element - Enables the inclusion of inert HTML in a document. Shadow DOM - Enables encapsulation of DOM and CSS. By combining these four capabilities web developers can create declarative components (Custom Elements) which are fully encapsulated (Shadow DOM). These components can describe their own views (Template Element) and can be easily packaged for distribution to other developers (HTML Imports). When these specifications become available in all major browsers, we are likely to see developer creativity explode as many endeavor to create reusable components to solve common problems or address deficiencies in the standard HTML toolkit

ES ?ECMA Script specification is a standardardized specification of a scripting language developed by Brendan of Netscape, initially it was named Mocha, later LiveScript and finally JavaScript.In 1995 Sun & Netscape annnouced Javascript.

Directives

In Angular 2.0 there will be three kinds of directives:

Component Directives These will create reusable components by encapsulating logic in JavaScript, HTML or an optional CSS style sheet. Decorator Directives These directives will be used to decorate elements (for example adding a tooltip, or showing/hiding elements using ng-show/ng-hide). Template Directives These will turn HTML into a reusable template. The instantiating of the template and its insertion into the DOM can be fully controlled by the directive author. Examples include ng-if and ng-repeat.

Structure Should/May be link:

root-app-folder index.html scripts controllers main.js ... directives myDirective.js ... filters myFilter.js ... services myService.js ... vendor angular.js angular.min.js es5-shim.min.js json3.min.js app.js styles ... views main.html ...This is the typical folder layout that I recommend:The best advice about huge apps is not to make them. Write small, focused, modular parts, and progressively combine them into bigger things to make your app.For larger organizational project, you can checout the seed angular project: https://github.com/angular-app/angular-app

As you add more files, it might make sense to create subdirectories to further organize controllers and services. For instance, I often find myself making a models directory inside of services. My rule of thumb is to only further sort files into directories if there is some rational hierarchy by which you can organize the files.

Key Features

Mobile First

Digest cycle

Future Ready

Speed & Performance

Simple & Expressive

Hierarchical Dependency Injection

Support for Web Components

Angular's modular library design and mobile-specific routing help keep your app's code lean, so users on low-bandwidth networks don't need to wait. Other mobile-first features include first-class support for touch event gestures, tuning for performance and low-memory usage on mobile platforms, and material design UI components with responsive, cross-device support.

Differences with features

1- no digest cycle finished event

2- How Faster

3- Improved dependency injection

4- Directives Strategy etc

Note that every single Binding often has a correspondingKeyobject which is internally created and maintained by Guice.Providers, if any, which are associated with theInjectorcan be retrieved by the following method.

Provider provider = injector.getProvider(SomeType.class)

No digest cycle finished event

$scope.$watch, $scope.$apply, $timeout.

$scope.$watch('variable',function(newValue,oldValue){});

because such event might trigger further changes that kept the digest cycle going. we had to reason about when to call $scope.apply or $scope.digest, which was not always straightforward on occasion we had to call $timeout to let Angular finish its digest cycleand do some operation only when the DOM is stable

DIRTY CHECKING

2 WAY DATA BINDING

$digest (calls watch at frequest intervals of time)

$watch is angular method, for dirty checking. Any variable or expression assigned in $scope automatically sets up a $watchExpression in angular. You can create a watch express yourself as well

So assigning a variable to $scope or using directives like ng-if, ng-show, ng-repeat etc all create watches in angular scope automatically. e.g $scope.text = ''; creates a $watch for text automatically in angular.

$apply$apply() is a angular method, internally invokes $digest.

No digest cycle finished event...

Problems:

Its not clear which watchers will be fired and in which order, or how many times the order of the model updates is hard to reason about and anticipate the digest cycle can run multiple times(thats why no digest life cycle finished event)which is time consuming

Solution:

One of the first steps that the Angular team took in the direction of Angular 2, was to extract from the Angular code base the mechanism of patching all asynchronous interaction points, and made it reusable.

SOLUTION...$scope.$watch, $scope.$apply, $timeout. No more. Whew! Using these was part of the reason Angular 1.x had such a huge learning curve.

Zone.js helps Angular to do change detection automatically. This sounds similar to React's reconciliation diffing algorithm.

element.addEventListener('keyup', function () { console.log('Key pressed.');});});

WHY ANGULAR 2.0 IS FASTER1- Faster checking of a single binding

2- Avoid scanning parts of the component treeThe mechanism to check a single binding was optimized to allow the Javascript VM to optimize that code into native code via just-in-time compilation. Instead of scanning recursively a tree of objects, a function is created at Angular startup to see if the binding has changed. This binding-checking function looks like a function that we would write by hand to test for changes and it can be easily optimized away by the VM.

Dont chck immutable 1- make the model an Observable: 2- make the model immutable, using for example Facebook's immutable.js.

Improved dependency injection

Problem in Angluar 1.x

Angular 1 has a global pool of objects:

In Angular 1, the Angular modules are mostly dependency injection containers that group related functionality.

Problem

The problem is, let's say we lazy load a second backendService with a completely different implementation: it would overwrite the first one! There is currently no way to have two services with the same name but different implementations, which prevents lazy-loading from being implemented in Angular 1 in a safe way.Types of di in ng 1

in the link function by position in the directive definition by name in the controller function by name, etc.

Improved dependency injection

Solution in Angluar 2

In Angular 2 there will be only one DI mechanism: constructor injection by type.

The fact that there is only one mechanism makes it easier to learn. Also the dependency injector is hierarchical, meaning that at different points of the component tree it's possible to have different implementations of the same type.

The idea behind dependency injection is very simple. If you have a component that depends on a service. You do not create that service yourself. Instead, you request one in the constructor, and the framework will provide you one. By doing so you can depend on interfaces rather than concrete types. This leads to more decoupled code, which enables testability, and other great things.

Solution:If a component does not have a dependency defined, it will delegate the lookup to it's parent injector and so forth. This sets the ground for providing native lazy-loading support in Angular 2.

Ng-directivesComponents in the HTML are broken up into two types: (events) & [properties]. 1.x

2.0

ng-click(click) (dbl-click)

ng-keyup(keyup)

(events) refer to user initiated actions.

[properties] now link directly into the DOM properties.

1.x2.0

ng-hide[class:hidden]

ng-checked[checked]

The mechanism to check a single binding was optimized to allow the Javascript VM to optimize that code into native code via just-in-time compilation. Instead of scanning recursively a tree of objects, a function is created at Angular startup to see if the binding has changed. This binding-checking function looks like a function that we would write by hand to test for changes and it can be easily optimized away by the VM.

Dont chck immutable 1- make the model an Observable: 2- make the model immutable, using for example Facebook's immutable.js.

*foreach!foreach is the proposed replacement for ng-repeat.

#itemItems prefixed with a # can bind directly in the html. No more ng-model.

Migration Path to angular 2

The new Angular 2 router is being backported to Angular 1, and will allow the same application to have both Angular 1 and Angular 2 routes.

It will be possible to mix Angular 1 and Angular 2 components in the same application It will be possible to inject services across framework versions. Data binding will work accross versions as the two change detection mechanisms will be integrated. One of the goals of Angular 2 is to provide a clear migration path from Angular 1. This will only become clear when Angular 2 is near it's initial release, but for now the following is foreseen in the ng-upgrade project:

Component...?

To build an Angular 2 application you define a set of components, for every UI element, screen, and route. An application will always have a root component that contains all other components. In other words, every Angular 2 application will have a component tree

Application is the root component. The Filters component has the speaker input and the filter button. TalkList is the list you see at the bottom. And TalkCmp is an item in that list.

A component is a directive with a view. But you can still write decorator-style directives, which do not have views.

Components are fundamental building blocks of Angular 2 applications.

They have well-defined inputs and outputs. They have well-defined lifecycle. They are self-describing.

Component...

@Component({ selector: 'talk-cmp', properties: ['talk'], events: ['rate']})

@View({ directives: [FormattedRating, WatchButton, RateButton], templateUrl: 'talk_cmp.html'})

Talk_cmp.html{{talk.title}}{{talk.speaker}}

Application is the root component. The Filters component has the speaker input and the filter button. TalkList is the list you see at the bottom. And TalkCmp is an item in that list.

A component is a directive with a view. But you can still write decorator-style directives, which do not have views.

Components are fundamental building blocks of Angular 2 applications.

They have well-defined inputs and outputs. They have well-defined lifecycle. They are self-describing.

Demo

http://tryangular2.github.io/#/section-1/page-1

http://www.codeproject.com/Tips/990533/Hello-Angular

http://eisenbergeffect.bluespire.com/all-about-angular-2-0/

References

Thank You