ngGirls@Sofia

What is Angular?

What is Angular

What is Angular?

Angular is a JavaScript Open Source Framework

1

Maintained by Google and by its big community

2

Angular is a great fit for large teams that work on the same code base

3

Why Angular

Why Angular?

Well defined best practices, TypeScript and rich API features

1

Cross-Platform: Desktop & Mobile

2

Awesome Tooling & CLI, Angular Material

3

Enterprise Friendly

4

Anatomy of an Angular Application

=

+

Application

Component

Services

. . .

Each Angular Application is composed of a set of Components and Services that provide functionality across them

1

ChildComponent

Anatomy of an Angular Application

Root App Module

MenuListComponent

MenuListItemComponent

Each Angular Application has one Application Module called Root Application Module and a set of Components whithin it

2

OrderHistoryComponent

MenuService

Order Food App

App Component

Other Component

Child Component

Gives order history

Gives list of menu items

itemName, itemDesc, itemImage...

Angular Essentials

Angular Essentials: Modules

Angular Modules

NgModules are containers for cohesive block of code in app logic

1

NgModules contain components, service providers & other code files

2

NgModules can import & export functionality to other modules

3

NgModule = a ts class + @NgModule decorator function

4

@NgModule({...}) - a metadata object that tells Angular this is a module

5

Angular Essentials: Modules

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  // a list of other ngModules which are needed for this module
  imports:      [ BrowserModule ],

  // a list of services which will be provided at the app root
  providers:    [ SomeService ],

  // a list of Angular things that are relevant in this module
  declarations: [ AppComponent ],

  // a list of Angular things that should be visible and usable in other NgModules
  exports:      [ AppComponent ],

  // tells Angular which component is the root component that starts the whole structure
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular Essentials: Components

Angular Components

NgComponents contain & control a view visualisation on the screen

1

Views are built with HTML

2

NgComponents have a ts class - behavior logic & dynamic values

3

NgComponent = a ts class + @NgComponent decorator function

4

NgComponents have methods, property & event bindings, template interpolation & directives

5

Angular Essentials: Components

 
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   template: `
     <button (click)="toggleTitle()">Toggle</button>
     <div *ngIf="isVisible">ngGirls {{ title }}!</div>
   `
 })
 export class AppComponent {
   title = 'ROCK';
   isVisible = false;

   toggleTitle() {
     this.isVisible = !this.isVisible;
   }
 }

Run in StackBlitz

Angular Essentials: Components

 
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   template: `
     <button (click)="toggleTitle()">Toggle</button>
     <div *ngIf="isVisible">ngGirls {{ title }}!</div>
   `
 })
 export class AppComponent {
   title = 'ROCK';
   isVisible = false;

   toggleTitle() {
     this.isVisible = !this.isVisible;
   }
 }

directive

event binding

property binding & interpolation

Run in StackBlitz

Angular Essentials: Services

Angular Services

Services are ts classes responsible for a specific task

1

Services help to keep the code well organised

2

Services provide same functionality across components

3

Example: fetching & loading data that needs to be displayed

4