Universal Benefits

• Standards compliance
  • Latest ECMAScript
  • Modules
  • Internationalization and accessibility
• Performance
• Open source
• TypeScript
• Backed by Google
• Uniformity (devs can develop quicker anc cheaper)
• Entreprise-First
• Popularity
• Documentation

Subjective Benefits

• Framework (Router, HTTP, forms, RxJS, etc)
• Opinionated - fewer decision
• RxJS
• Separation of templates and logic (seperation of concern)

Features

• Progressive Web Apps
• Forms template based and reactive
• RxJS
• Fully featured router
• Animations
• Strictly typed forms
• CLI update

Advanced Features of angular

• Server-Side Rendering
• Mobile
• Angular Language Service
• ngUpgrade

Architecture

• Componenents
  Angular component apply separation of concern pattern.
  Display : contains HTML and CSS

    <div>
    <h1>Hello</h1>
    <add-new-user></add-new-user>
    </div>

Logic pattern : contains logic to diplays data into a class

    @Component({
      selector: 'add-new-user',
    })
    export class addNewUserComponent{
    ...
    }

• Template

Each component has a template. separate template or inline template
separate template designed with templateUrl :

    @Component({
      selector: 'add-new-user',
      templateUrl: './add-new-user.component.html'
    })
    export class addNewUserComponent{
    ...
    }

Inline template designed with key word 'template' :

    @Component({
      selector: 'add-new-user',
      template: '<div>....</div>'
    })
    export class addNewUserComponent{
    ...
    }

in a template we can add simple variables like {{fulname}}, or complex functions like <button (click)="deleteUser(user)">

• Services

Services's aim is to get backend informations. are also injectable using key word Injectable

    @Injectable({
    ...
    })
    export class ArticleService{
    ...
    }

• Dependency Injection

How component call the code in a service.
For example : addNewStoryComponent is a componenent. We inject ArticleService in the componenent via constructor

    export class addNewStoryComponent {
      constructor(private articleSvc: ArticleService){}
    }

• Directives
  How to met elements draggable or appear and hover... ==> with directives

Directives-HTML:

    <div hover-trigger>
    Hover Over Me to See
    </div>
    <div appear-on-hover>
    Some Content
    </div>

• Pipes
  Pipes used for formating the displays :

    <div>
    {{title | upercase}}
    </div>

pure pipes : only evaluated when input changes
impure pipes : evaluated on every change detection cycle

• Modules
  modules are grouping of pieces : componenets, services, pipes. Modules are now optional
  use modules :

  • Feature areas
  • lazy loading
  • Dificulties
  • Routing
  • Importing and exporting

• One Way Data Flow
  

• Zone in angular
  Zone.js is a library give a context of execution to Angular application and detect change's stat then apply changes.
  benefits of Zone.js :

  • Reactivity of changes
  • track asynchronous tasks and executing code in a specific moments
  • manage errors and loging when erros become
  • Debugging errors
    Example :

    import { Component } from '@angular/core';
    import { NgZone } from '@angular/core';

    @Component({
      selector: 'app-root',
      template: `
        <h1>{{ title }}</h1>
        <button (click)="changeTitle()">Change title</button>
      `
    })
    export class AppComponent {
      title = 'My App';

      constructor(private ngZone: NgZone) {}

      changeTitle() {
        this.ngZone.run(() => {
          this.title = 'Title changed';
        });
      }
    }

for details : zoneJs details

• Rendering Targets
  Rendering needs : render web application, mobile, ....

  • Browser-platform
  • Browser-plaform-dynamic
  • Rendering Targets
  • Browser/DOM
  • Server-side
  • Native Mobile Apps
  • Native Desktop Apps

• Server-Side Rendering

Modes :

• Full pre-render
• Dynamic pre-render
• Client-side switch
  • Download app
  • Hidden div
  • Boots
  • Replays events
  • Swap display

• Mobile and Native Frameworks
  For Mobile use Ionic or NativeScroipt
  and Desktop we can use Electron

• Tersting Tools
  Karm
  Protacotr
  Alternatives

  • Jest
  • Cypress
  • Playwright
    Angular testing utilities
  • TestBed
  • Async and fakeAsync
  • MockBackend

• AOT Compiler

• RxJS

  • Promises vs observables
  • Self-subscribe or not
  • Forgetting to subscribe
  • Accidently making multiple http requests
  • Shared observables

• Good practics

  • Learn and use the CLI
  • Learn and use TypeScript
  • Learn and use NgRx
  • Learn Webpack
  • Follow the style guide
  • Do not access the DOM
  • Use lazy loading
  • Understand what you're sending to the browser
  • Use immutable or observable data where appropriate
  • Write unit and end-2-end tests

• Angular 14 news

  • Standlone component*
  • Typed Forms
  • Titles in routes

Upgrades and roadmap

Upgrades & Roadmap

for update you can use the official website angular to indicate changes: https://update.angular.io