ngular

 

From Zero to Hero

I'm Azkar Moulana

  • Full Stack Developer

  • Trainee Software Engineer

  • OSS Contributor

@Azkar_moulana

azkarmoulana

Community Builder

Angular ?

client side JavaScript framework which allows you to create Single Page Applications

14,490

History

Angular 1

Angular 1.x

Angular 1.6

Angular 2

Angular 4

Angular 5

...

Angular 8

Angular.JS

Angular

Why Angular ?

Long time ago...

  • There was a kingdom led by a KING known as JQuery.
  • People was so happy with his leadership

After a years...

  • KING JQuery has become too oldies
  • Angular.JS replaces as new KING

The KING was tired...

  • KING Angular.JS was tired because of many wars outside
  • Many kingdoms with its power wanted to seize Angular.JS

The KING retires...

  • Angular.JS has a great son for replace him as a KING
  • Angular son of Angular.JS now ready to take the glory
  • War becomes hot again.

Component-based architecture that provides a higher quality of code

Re-usability

Readability

Unit-test friendly

Maintainability

TypeScript - better tooling, cleaner code, and higher scalability

RxJS - efficient, asynchronous programming

Angular Community

grew > 50% in 2018

Angular is the most searched topic in all web languages

- Julia Silge

data scientist @ Stack Overflow

The Real Heroes

What you need to know ?

Not Really,

How Angular Works ?

  • Single Page Application (SPA)

Lifecycle

SPA

MPA

Angular CLI

Angular CLI is a command line interface, which includes the functionality that Webpack provides

vs

  • Wraps Webpack
  • Easy to configure
  • Create Angular projects in smart way
  • Powerful
  • Fast and Customizable
  • Vast Loader & plugin ecosystem

https://cli.angular.io/

https://webpack.js.org/

Building Blocks of Angular

Modules
Components
Templates
Metadata
Data binding
Directives
Services
Dependency injection

Components

Components are the most basic building block of an UI in an Angular application

Decorator

Selector

Template

Styles

Modules

cohesive block of code with a related set of capabilities which have a specific application domain or a workflow

  • Maintain the modularity
  • Highest level of abstraction
  • Consolidate components, directives, and pipes

classes that are related to views

  • Components
  • Directives
  • Pipes

modules whose classes are needed by the components

services present in the application

indicates the component that is to be bootstrapped

* only root module has this property

exports[ ] - classes that should be accessible to the components of other modules.

Directives

directive is a function that executes whenever the Angular compiler finds it in the DOM

Component

Structural

Attribute

a directive with a template

changes the structure of the DOM

change the behavior and appearance of the DOM

*ngIf

*ngFor

[ngClass]

[ngStyle]

Pipes

transform outputs to desired format

  • Used in templates with string interpolation
  • Can provide parameters
  • Chain-able

hello world

HELLO WORLD

 Fri Apr 15 1988 00:00:00 GMT-0700

April 15, 1988

Data Binding

define communication between the component and view

{{ String Interpolation }}

[Property Binding]

(Event Binding)

[(Two-Way Data Binding)]

String Interpolation

  • One-Way data binding

Model

View

output data

Property Binding

  • One-Way data binding

Model

View

output data

{{data}}

[property]="data"

Event Binding

  • updating/sending of the value/information of a certain variable from View to Model

Model

View

react to user events

Two-Way Data Binding

  • combination of Property and Event binding
  • continuous synchronization View and Model

Model

View

(event)="expression"

[(ngModel)]="data"

Services

typically a class with a narrow, well-defined purpose

  • Acts as a central repository/central business unit of your code
  • Increase modularity and reusability
  • Helps to make component classes lean and efficient

Dependency Injection

Dependency Injection (DI) is a way to create objects that depend on the other objects

  • @Injectable() decorator - allows Angular to inject it into a component as a dependency
  • @Injectable() decorator indicate that a component or other class has a dependency
  • provider[ ] - an object that tells an injector how to obtain or create a dependency.

How DI Works

  • Dependency Injector injects an instance of the class into component
  • Angular dependency injector is a hierarchical injector

IN CASE OF EMERGENCY, DO NOT CREATE MANUAL INSTANCES IN COMPONENTS

Hierarchical Injector

AppModule

Same instance of the service is available application wide

AppComponent

Same instance of the service is available for all components (not for other services)

Any other components

Same instance of the service is available for the component and its child components

Component Life cycle

ngOnChanges

ngOnInit

ngDoCheck

ngAfterContentInit

ngAfterContentChecked

ngAfterViewInit

ngOnDestroy

ngAfterViewChecked

called when an input binding value changes

after the first ngOnChanges

after every run of change detection

after component content initialized

after every check of component content

after component's view(s) are initialized

after every check of a component's view(s)

just before the component is destroyed

Angular Architecture

https://angular.io/guide/architecture

Prerequisites

Ready ?

Let's create a Harry Potter fan app with HP-api

https://hp-api.herokuapp.com/

Books written

[
    {
       "name": "Harry Potter and the Philosopher's Stone",
       "imagePath":"https://vignette.wikia.nocookie.net/harrypotter/images/7/7b/Harry01english.jpg/revision/latest?cb=20150208225304"

    },
    {
       "name": "Harry Potter and the Chamber of Secrets",
       "imagePath":"https://images.gr-assets.com/books/1474169725l/15881.jpg"
    },
    {
       "name": "Harry Potter and the Prisoner of Azkaban",
       "imagePath":"https://vignette3.wikia.nocookie.net/harrypotter/images/1/11/Prisoner_of_Azkaban_cover.jpg/revision/latest?cb=20070328184627"
    },
    {
       "name": "Harry Potter and the Goblet of Fire",
       "imagePath":"https://vignette.wikia.nocookie.net/harrypotter/images/a/a3/Goblet_of_Fire_New_Cover.jpg/revision/latest?cb=20170109054633"

    },
    {
       "name": "Harry Potter and the Order of the Phoenix",
       "imagePath":"https://vignette.wikia.nocookie.net/what-you-love/images/5/5d/Harry_Potter_And_The_Order_Of_The_Phoenix.jpeg/revision/latest?cb=20150330170917"

    },
    {
       "name": "Harry Potter and the Half-Blood Prince",
       "imagePath":"https://hpmedia.bloomsbury.com/rep/s/9781408855942_309034.jpeg"

    },
    {
       "name": "Harry Potter and the Deathly Hallows",
       "imagePath":"https://images.gr-assets.com/books/1474171184l/136251.jpg"

    }
]

Q

&

A

@Azkar_moulana

NG SRI LANKA

https://ng-srilanka.com

A Little Compliment :)

for $89 for the year: thinkster.io/pro/yearly/stu… or use code "student-yearly" or for monthly $15/month thinkster.io/pro/monthly/st… or use code "student-sale-2019"

Angular from Zero to Hero

By Azkar Moulana

Made with Slides.com

Angular from Zero to Hero

Slide deck for 'Angular zero to hero' workshop at NSBM(26/06/2019)

  • 1,119