Angular Fundamentals

www.javascripter.org

Pankaj Parkar

Technical Lead

Synerzip Softech India PVT LTD

  • Microsoft MVP

  • Opensource Contributor

  • Stackoverflow Topuser for Angular and AngularJS

  • 100k+ reps on Stackoverflow

  • .Net and Angular Developer

  • Currently working on React, GraphQL & Nodejs

@pankajparkar

www.javascripter.org

What is Angular?

  • Client Side / Framework
  • Developed and maintained by Google
  • Used to craft powerful Single Page Applications (SPA's) and CMS application (since Angular 6)
  • Part of MEAN Stack
  • Provides modularize way to write code

@pankajparkar

www.javascripter.org

What Angular is not?

  • A Server side Framework
  • Library like JQuery, React, etc
  • Design Patterns
  • Another new OOP language like C# or Java
  • Extension or Plugin

@pankajparkar

www.javascripter.org

Angular Terminology

Angular 1.x = AngularJS  

Angular 2+ = Angular     

@pankajparkar

www.javascripter.org

WhY Use Angular?

  • Rapid Development, Code Generation and Better tooling
  • Component Architecture
  • Dynamic Content
  • Two way data bindings
  • Cross Platform
  • Unit Testing Ready
  • 5x faster than AngularJS
  • Server Side Rendering

@pankajparkar

www.javascripter.org

What IS Typescript?

  • Superset of Javascript with next Javascript feature enabled
  • Static typing optional
  • Class based Object oriented programming, you can use classes, interface, enum, etc.
//`myVariable` holds string value
let myVariable: string = 'Something';
//typescript will throw at compile time error
myVariable = 1;
let myBoolean: bool = true;

@pankajparkar

www.javascripter.org

Core Features

Component Data Bindings Directives
Services Templating Pipes
Routing Http Modules Events
Testing Observable Animation
Build Tool Form Modules Typescript

@pankajparkar

www.javascripter.org

Component

  • Basic building block of an Angular app
  • Extends html vocabulary
  • It helps to create less fault tolerant application

@Component({ metadata })

<body>
  <my-app></my-app>
</body>
import { Component } from '@angular/core';

@Component({
   selector: 'my-app', 
   template: `<h1>
               Hello, {{name}}
             </h1>`,
   styles: [`.body{ margin: auto;}`]
})
export class GreetComopnent {
  name: string = 'World';
}

www.javascripter.org

Directive

@Directive({ metadata })

import { 
  Directive, HostListner
} from '@angular/core';

@Directive({
  selector: '[myDirective],.myDirective',
})
export class MyDirective {
  @HostListner('click', ['$event'])
  onClick(event: any) {
     console.log(event);
  }
}
<div myDirective>
  Click Me
</div>
<div class="myDirective">
  Click Me
</div>
  • Directive is used to attach some specific behaviour onto DOM
  • Directive is template less Component

www.javascripter.org

Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/http';

// required for dependency injection to work
@Injectable({providerIn: 'root'})
export class PostService{
  constructor(private http: HttpClient){
  }

  fetch(){
    return this.http.get('https://api.test.com/test.json');
  }
}

@Injectable()

  • Helps to extract common code to generic place.
  • Used to share data in different parts of application.
  • Good to place to make an API calls and expose those method from service

@pankajparkar

www.javascripter.org

Pipe

@Pipe({ metadata })

@Pipe({ name: 'isNumber' })
export class IsNumberPipe implements PipeTransform {
  transform(n: any) {
    return !isNaN(parseFloat(n)) 
           && isFinite(n);
  }
}
<div>
  {{'Test' | isNumber }}  //Output: false
  {{ 1234  | isNumber }}  //Output: true
</div>

Value transformation for display purpose

<div>
  {{today | date: 'shortDate'}}  //Ouput: '10-10-2017'
</div>

Create Custom Pipe

Angular Module

  • Help organize an application into cohesive blocks of functionality.

@NgModule({ metadata })

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ], //other modules or sub-modules
  declarations: [ AppComponent ], //components, directives, pipes
  bootstrap:    [ AppComponent ] //bootstrap component
  exports:      [] //it can have module,directive,component,pipe,service
})
export class AppModule { }

@pankajparkar

www.javascripter.org

Bindings

Data Bindings

{{myData}}

 

Property Binding 

[myData]="test"

 

Event Binding

(eventName)="methodCall($event)"

www.javascripter.org

Architecture

AppModule

Component

Service

Pipe

Directive

Sub-modules

Exports

NgModule's,

directive's,

component's,etc

  • There must be one root component with its main AppModule

Bootstrap root component

@pankajparkar

www.javascripter.org

How to use Angular?

Three ways to create an Angular App

  1. Build from Scratch
  2. Angular QuickStart https://github.com/angular/quickstart
  3. Angular CLI (highly recommended)

@pankajparkar

www.javascripter.org

Pre-requestite

  • Code Editor: Visual Studio Code, Atom, Sublime, etc.
  • Node & npm 
  • Typescript

@pankajparkar

www.javascripter.org

@pankajparkar

www.javascripter.org

Forms

  • Pristine
  • dirty
  • valid / invalid
  • touched / untouched

www.javascripter.org

routing

index.html

<html>
  <head>
    <link href="style.css" />
    <script src="app.bundle.js"></script>
  </head>
  <body>
    <header></header>
    <section>
      <sidebar></sidebar>
      <placeholder></placeholder>
    </section>
    <footer></footer>
  </body>
</html>

URL: #/home

URL: #/about

URL: #/contact

<div>
   Home Content
<div>
<div>
 About Content
<div>
<div>
 Contact Content
<div>

www.javascripter.org

Dependency Injection

www.javascripter.org

@pankajparkar

www.javascripter.org

Q & A

@pankajparkar

Blogs

http://thoughtram.io/
https://johnpapa.net
https://toddmotto.com
https://teropa.info
https://angular.io
https://netbasal.com/@NetanelBasal
https://medium.com/@maximus.koretskyi

Docs

https://angular.io/docs
https://angular.io/api (For API import check)

Best Practices

Coding guidelines by John Papa https://angular.io/guide/styleguide

Books
https://angular-2-training-book.rangle.io/
https://codecraft.tv/courses/angular/

References

@pankajparkar

Made with Slides.com