Modern

& applicative

(Part 3)

getting started

What is angular?

Single-page applications

Web framework

developed by Google

for building

advantages of spa over mpa

Performance

Loose coupling from server

Debugging

component-driven development

"Component is an independent piece of UI"

https://medium.com/@vishal75j_14174/10-best-react-ui-component-frameworks-6303b4447766

components - features

Reusability

Modularity

Easy to test

components <=> functions

function createPerson(name, age) {
  return { name, age };
}

createPerson('Kajetan', 26);

<h1>Kajetan</h1>
<p>26</p>

input

output

<person-card 
  name="Kajetan" 
  age="26"
></person-card>

{ 
  name: 'Kajetan', 
  age: 26 
}

function

component

let's talk about angular!

angular architecture

https://www.ngdevelop.tech/angular/architecture/

angular cli

Initialize your app

Generate elements

Maintain

>> ng new splitter

>> ng g c action-card

>> ng update @angular/core

Run dev env

>> ng serve

project structure

>> ng g c action-card

creating component

component's lifecycle hooks

ngOnInit	Called once the component is initialized
ngOnChanges	Called after bound input propoerty changes
ngAfterContentInit	Called after content of component has been projected into view
ngAfterViewInit	Called after component's view has been initialized
ngOnDestroy	Called once the component is about to be destroyed

>> ng g c action-list

creating component

property binding

@Component({
  selector: 'app-action-card',
  template: `
    <h3>{{ action.description }}</h3>
  `
})
export class ActionCardComponent {
  @Input() action: Action;
}

@Component({
  selector: 'app-action-list',
  template: `
    <app-action-card [action]="actions[0]"></app-action-card>
  `
})
export class ActionListComponent {
  actions: [{ ... }];
}

structural directives

@Component({
  selector: 'app-action-card',
  template: `
    <app-action-card 
      *ngFor="let action of actions"
      [action]="action"
    ></app-action-card>

    <div *ngIf="actionSaved" class="alert alert-success">
      Actions saved successfully!
    </div>

    <button (click)="actionsSaved = true">Save All</button>
  `
})
export class ActionListComponent {
  actions: Action[] = [];
  actionsSaved = false;
  (...)
}

services

Fetching remote data

Validation

Data processing

(Provided with Dependency Injection)

dependency injection

@Component({
  selector: 'app-action-card',
  template: `
    <app-action-card 
      *ngFor="let action of actions"
      [action]="action"
    ></app-action-card>
  `
})
export class ActionListComponent {
  actions: Action[] = [];
  
  constructor(
    private actionService: ActionService
  ) {}
  
  (...)
}

@Injectable()
export class ActionService {
  constructor(private http: HttpClient) {}
  
  getAllActions() {
    ...
  }
}

rxJs

("asynchronous data streams", "Promises on steroids")

https://yakovfain.com/2017/08/28/rxjs-essentials-part-1/

>> ng g c user-create

creating component

ROUTING & NAVIGATION

const routes: Routes = [
  {
    path: 'action-list',
    component: ActionListComponent
  },
  ...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<nav>
  <a routerLink="/action-list">Action List</a>
</nav>

<router-outlet></router-outlet>

app-routing.module.ts

app.component.html

(lazy loading is also possible...)

<nav class="navbar navbar-dark justify-content-start bg-dark">
  <h1 class="navbar-brand mb-0 mr-3">
    Splitter
  </h1>
  <a class="nav-item nav-link text-white" routerLink="/action-list">
    Action List
  </a>
  <a class="nav-item nav-link text-white" routerLink="/user-create">
    Create User
  </a>
</nav>

template-driven forms

<form #userForm="ngForm" (ngSubmit)="createUser()">
  <div class="form-group">
    <label for="name">Name</label>
    <input  
      id="name"
      class="form-control"
      type="text"
      [(ngModel)]="model.name" 
      name="name" 
    >
  </div>
  
  (...)
  
  <button type="submit" class="btn btn-success">
    Submit
  </button>
</form>

@Component({})
export class UserCreateComponent {

  model: User = {
    id: '',
    email: '',
    name: '',
    password: ''
  };
  
  createUser() {
    saveToDb(this.model);
  }
}

user-create.component.html

user-create.component.ts

why angular?

"Imposed" architecture

Ready, solid solutions

Google's and community's suppport