Angular Intro

Pankaj Parkar

Software Engineer

@TSS Consultancy

  • Microsoft MVP (Visual Studio & Technology)
  • Community Contributor
  • Loves to Code at .Net and Angular

GitHub @pankajparkar Twitter Follow

What you should know?

  • Html
  • CSS Basics
  • Javascript Basics
  • Programming Fundamentals

What is Angular?

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

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

Angular Version History

AngularJS / Angular 1  around 2009

Angular 2 on Sept 2017

Angular 3  skipped

Angular 4 on April 2017

Angular 5 on Nov 2017

Angular X after each six month

Angular Terminology

Angular 1.x = AngularJS  

Angular 2+ = Angular     

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

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;

Core Features

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

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';
}

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

Service

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

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

  fetch(){
    return this.http.get('https://api.test.com/test')
      .map(res => res.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

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 { }

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

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 (recommended)

Pre-requestite

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

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

Thank you

@pankajparkar

Q & A

Introduction to Angular

By Pankaj Parkar

Made with Slides.com

Introduction to Angular

Angular Introduction

  • 1,006

More from Pankaj Parkar