@Sofia, 12 November 2018

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

Anatomy of an Angular Application

=

+

+

+

 Application

 Component

 Component

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

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

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

Let's Get Started!

ngGirls@Sofia

By Elena Gancheva

ngGirls@Sofia

Angular intro slides for ng-girls@Sofia workshop, November 2018

  • 1,086