Learn Angular

Loves to code in .Net + Angular
Active Angular community contributor
Microsoft MVP (Visual Studio and Technology Devlopement)
Belongs to top 25 users of Stackoverflow from India
Angular 1 & Angular 2 topuser on Stackoverflow
Officially invited by ng-conf twice.
etc..

Reach out to me

Email: parkarpankaj3@gmail.com

Twitter: @pankajparkar

FB: fb.com/pankaj.parkar

LinkedIn: https://in.linkedin.com/in/pankajparkar

You should know

DOM
Imperative/declarative programming way of code
Modules in Javascript
Decorator -

Background

Around 5 years back JS wasn't much used on client side
XMLHttpRequestRequest has been invented Microsoft Outlook web Access devs and came out around June 2002
Aug 2006 jQuery came and implement $.ajax wrapper around XMLHttpRequest
July-2010 Knockout came and Backbone on oct-2010
Knockout and backbone solved data binding problems but upto some extend.
What was pitfalls with BackBone & KnockOut?

AngularJS

AngularJS Framework addressed almost all issue by providing below feature.

databinding + two way data binding
MVW Architecture
code modularity
Testability because of Dependency Injection
two way binding cover later

Simple AngularJS application

<body ng-app="inputExample">
  <div ng-controller="ExampleController">
    My Input:
    <input type="text" ng-model="test" />
    <br/><br/>
    Output: {{test}}
  </div>
  <script>
    angular.module('inputExample', [])
     .controller('ExampleController', ['$scope', 
        function($scope) {
          $scope.test = '1';
        }
     ]);
  </script>
</body>

$$watchers
{{test}}
test

AngularJS Digest Cycle

AngularJS Pitfalls

In bigger application binding reaches more than 2000 bindings in that case application was getting less responsive in Angular
Angular try to solve these issue by introducing one way binding and one time binding (::bindingVariable).
Dependency with similar name in different module (latest register one get preference).
The way digest cycle works takes lot more time to evaluate each of them.
Everything needs to be done in angular way.

How Angular Team would have solve these Issues?

Angular 2 story

Angular Team come up with Angular 2 for resolution of this problems.
AtScript story.

Angular 2 framework then built with Typescript

Angular 1 vs Angular 2

In simple words they are way different than each other
There is no `$scope` in Angular 2
There will be only Service used for data sharing, no `provider`, `value`, `constant`, `value`.
Change detection (former digest cycle) is 5 times faster than Angular 1.
Dependency Injection system is flawless.
NgModule(former angular.module) does helped to modularize your angular code better way.
By using Typescript with Angular, you will ensure that you're with future web standards like `ES6`, `ES7`, `ES.NEXT`

Angular Feature

Two way binding
Modularity
More Testable code because of Dependency Injection
Faster change detection (explain later)
Server side rendering using Angular Universal.
Ahead of Time compilation.
Code generation using Angular-CLI
Progressive web app, native and desktop app support

Pre demo

Show gmail page, google.com and search result.
What component architecture.
What we gonna develop?

https://github.com/pankajparkar/bug-tracker