How to Build & Launch Better Apps or Websites

Questions
Answers
Coaching
 Build Cross Platform Apps in Angular
Build Cross Platform Desktop, Mobile or Web apps with an Angular UI Dev Kit and the concepts of angular components, modules, forms, validation, api calls, data-binding and more ..

Toast Messages:
Learn More

Use unobtrusive Toast messages to gently notify users of the success, failure or state of their front-end actions & tasks:

Modules:
Learn More
Use a feature-based approach to structure your app.
Self-contained features keep their own modules, routes, components & services separate and can be assigned to owned, worked-on or updated independently of others.  

Use one module per feature, “Do structure the app such that you can Locate code quickly, Identify the code at a glance, keep the Flattest structure you can, and Try to be DRY.”
Routing & Navigation:
Learn More
Dynamically navigate users to views or parts your app depending on sections or parts of the url instead of loading a new page (app.module.ts):
/** 
 * RouteModule.forRoot declares a Singleton RouterModule with an array of routes
*/
imports: [
  BrowserModule,
  RouterModule.forRoot([
    {path: 'login', component:LoginComponent},
    {path: 'register', component: RegisterComponent}
  ]),
],
Routing & Views:
Learn More
Dynamically load parts of your app based on the url using the < router-outlet > directive and display clickable navigation using the directive in your app's root template (app.component.html):
< nav >
  < a routerLink="/login" >Login< /a > |
  < a routerLink="/register" >Register< /a >
< /nav >
< router-outlet >< /router-outlet >
Routing & Security:
Learn More
Guard against un-authorized access to features, pages or views and block any route from loading based on permissions or authentication using a class that implements the CanActivate interface(AuthGuard.ts):
@Injectable({providedIn:'root'})
export class AuthGuard implements CanActivate {
  constructor(private _authService: AuthService, private _router: Router) {
  }
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean {
    if (this._authService.isAuthenticated()) {
        return true;
    }
    // navigate to login page
    this._router.navigate(['/login']);
    return false;
  }
}
Protect any route using the AuthGuard service (app.module.ts):
imports: [
  BrowserModule,
  RouterModule.forRoot([
    {path: 'login', component:LoginComponent},
    {path: 'account', component: AccountComponent, canActivate:[AuthGuard]}
  ]),
],
Data-Binding, @Input & @Output:
Learn More
Use @Input decorator to pass data from parent to child and @Output (or observables) to pass data from the child to the parent.
A parent component can bind it's property (e.g. pData) to a child's (e.g. cData) using the child 's @Input() property (@Input() cData: any;):
< page-child [cData] = "pData" > < /page-child >
A child component can pass back it's data to a parent's using the child 's @Output() property and an event emitter:
@Input() cData: any;
@Output() dataChange = new EventEmitter();
changeData() {
    this.dataChange.emit('data has changed);
}
A parent component can handle or respond to an Output event from the child using an event handler in its class:
< page-child (dataChange) = "handleChildDataChange($event)" > < /page-child >
A cheatsheet can help summarize Angular's template binding: Learn More
State Management:
Learn More

How do you manage complex UI interactions without going completely insane?

Create predictable UI experiences by intentionally managing state in large-scale or enterprise apps with complex data-flow relationships.

Use a State Management Solution like NGRX or NGXS: Learn More
Forms:
Learn More
Forms allow users to submit input when interacting with an app. They are useful for signing users in, searching, submitting feedback and more.
Angular provides template-driven forms and model-driven or reactive forms.
Template driven forms use built-in directives like ngModel and ngForm to build forms.
A template driven newsletter signup component looks like: Learn More

 ↴ 

Subscribe to Angular UI Toolkit Newsletter

Download "The Angular UI Toolkit" or Get the latest posts delivered to your inbox ...

We respect your email privacy

How To Add Components or Modules to an Angular / Ionic App

Design repeating UI features in components with a view, class & stylesheet and export the component as a module for reusability across your app

A reusable feature module in an Angular App is designed as:

  • feature.html - A user interface (UI) file that includes all the HTML presented by the feature
  • feature.ts - A typescript class that represents the view / template's data model and presentational logic
  • feature.module.ts - A typescript class that imports the feature.ts class and re-exports it as a feature module that is reusable across the app
feature.html

A user interface (UI) file that includes all the HTML presented by this feature module

        <h1>Prototype + Code = Launch Features </h1>
     


feature.ts

A typescript class that represents the view / template's data model and presentational logic

import { Component } from '@angular/core';
@Component({
  selector: 'page-feature',
  templateUrl: 'feature.html',
  styleUrls: ['feature.scss'],
})
export class Feature{
  constructor( ) { }
}


feature.module.ts

A typescript class that imports the feature.ts class and re-exports it as a module that is reusable across the app

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Feature } from '../feature/feature';
@NgModule({
    imports: [
        CommonModule
    ],
    exports: [
        Feature
    ],
    declarations: [],
    entryComponents: [],
    bootstrap: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FeatureModule { }
     


If you like this post, signup for more posts like this ...
How Do You Manage State in Angular Apps?
  1. NGXS has less of a dependency on knowledge of RXJS, combines actions and reducers into one source file, and is more concise than NGRX
  2. NGRS follows the Redux pattern more closely, has more longevity and community support, but uses extra code in the name of Effects to dispatch calls to asynchronous http services.
   Learn More: Pedro Poveda
If you like this post, signup for more posts like this ...
How To Add Custom Reusable Alerts, Notifications, Messages or Announcements to your Angular Mobile Apps / Websites
Toast messages are gentle messages displayed to alert users of the success, failure or state of user actions.

Do write a reusable toast message in a "utilities provider". Don't code multiple toast messages that provide the same or similar behaviors

 View Code on Github
If you like this post, signup for more posts like this ...
Angular Unit Tests increase developer productivity, confidence & quality of work by confirming that new code works as expected
Use Jasmine for writing Angular, Javascript or Typescript Unit Tests.

Jasmine does not depend on other frameworks although it's commonly used alongside Karma in Angular Unit Testing

Learn More: https://jasmine.github.io/
If you like this post, signup for more posts like this ...
Karma is a unit test task runner that lets you run angular unit tests from inside your app or command line.

Karma can also watch your development files for changes and re-run your unit tests automatically:

Karma is commonly used alongside Jasmine for Angular Unit Testing:

Learn More: https://angular.io/guide/testing
If you like this post, signup for more posts like this ...
Curated References for Angular / Angular + Ionic UI Development

Angular components can be nested as view children, in the template of their component; or as content children, via content projection from a host component

Any directive, component, and element which is part of a component template is accessed as ViewChild / ViewChildren and any element or component which is projected inside is accessed as ContentChild / Content Children

   Learn More: Dhananjay Kumar

If you like this post, signup for more posts like this ...