Learn Angular

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

Demo time

Component

Thank you

 Q & A

Learn Angular

By Pankaj Parkar

Learn Angular

Code with Angular

  • 1,066