Complete Angular 18 Full Course (Part 5) – From Beginner to Expert: Comprehensive Angular Tutorial

Welcome to Part 5 of our Angular 18 Full Course series, where we will be diving into more advanced topics to take your Angular skills to the next level! In this part, we will cover more advanced topics and features of Angular, so make sure you have a good understanding of the basics before diving into this tutorial.

Let’s get started with Part 5 of our Complete Zero to Hero Angular Full Tutorial!

1. Routing in Angular:
   Routing is a key feature in Angular that allows you to navigate between different pages or views within your Angular application. To set up routing in your Angular application, you will need to create a separate file for your routes, typically called app-routing.module.ts.

Here is an example of how you can set up routing in your Angular application:

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

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

In the above code snippet, we have defined two routes – one for the home page and one for the about page. We have specified which component should be loaded when the user navigates to these routes. Make sure to import the RouterModule and define the routes in the imports array of your module.

1. Lazy Loading Modules:
   Lazy loading is a technique in Angular where you can load modules on-demand, rather than loading all modules at once when the application starts. This can help improve the performance of your Angular application by reducing the initial load time.

To lazy load a module in Angular, you will need to create a separate module for the feature you want to lazy load. You can then configure your routes to load this module dynamically when the user navigates to a certain route.

Here is an example of how you can lazy load a module in Angular:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', loadChildren: () => import('./about.module').then(m => m.AboutModule) },
];

In the above code snippet, we have replaced the component property with loadChildren, which dynamically loads the AboutModule when the user navigates to the about route. Make sure to import the module using the import function and specify the module class in the then method.

1. Guards in Angular:
   Guards are a feature in Angular that allows you to control navigation within your Angular application. Guards can be used to protect routes, restrict access to certain pages, and perform pre-navigation checks.

There are several types of guards in Angular, including CanActivate, CanActivateChild, CanDeactivate, CanLoad, and CanDeactivate. You can create your own custom guards by implementing these interface methods in a service.

Here is an example of how you can create a AuthGuard in Angular:

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('token')) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

In the above code snippet, we have created an AuthGuard that implements the CanActivate interface. We check if the user has a valid token in their local storage. If they do, we allow navigation to the desired route. Otherwise, we redirect them to the login page.

1. Http Interceptors in Angular:
   Http Interceptors are a powerful feature in Angular that allows you to intercept and modify HTTP requests and responses. Interceptors can be used to add headers, cache responses, handle errors, and more.

To create an Http Interceptor in Angular, you will need to create a service that implements the HttpInterceptor interface and the intercept method.

Here is an example of how you can create an Http Interceptor in Angular:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('token');

    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }

    return next.handle(request);
  }
}

In the above code snippet, we have created an AuthInterceptor that implements the HttpInterceptor interface. We intercept the HTTP request and add the authorization header with the user’s token before sending the request to the server.

1. NgRx in Angular:
   NgRx is a state management library for Angular that allows you to manage application state in a reactive and predictable way. NgRx uses the Redux pattern and provides tools for managing state, actions, and reducers in your Angular application.

To get started with NgRx in Angular, you will need to install the NgRx Store, Effects, and Router packages using npm. You will also need to create actions, reducers, and effects to manage the state of your application.

Here is an example of how you can create an action, reducer, and effect in NgRx:

// actions
export const loadUsers = createAction('[Users] Load Users');

// reducer
export const usersReducer = createReducer(
  initialState,
  on(loadUsers, state => {
    return { ...state, loading: true };
  })
);

// effect
@Injectable()
export class UsersEffects {
  loadUsers$ = createEffect(() => this.actions$.pipe(
    ofType(loadUsers),
    mergeMap(() => this.usersService.getUsers().pipe(
      map(users => ({ type: '[Users] Load Users Success', payload: users })),
      catchError(error => of({ type: '[Users] Load Users Failure', payload: error }))
    ))
  ));

  constructor(
    private actions$: Actions,
    private usersService: UsersService
  ) {}
}

In the above code snippet, we have created an action to load users, a reducer to update the state when loading users, and an effect to fetch users from the server. Make sure to import the necessary NgRx functions and create the action, reducer, and effect in separate files.

That’s it for Part 5 of our Angular 18 Full Course series! We have covered advanced topics such as routing, lazy loading modules, guards, Http Interceptors, and NgRx in Angular. Make sure to practice these concepts and experiment with different features to solidify your understanding of Angular. Stay tuned for the next part where we will dive into more advanced topics and features of Angular. Happy coding!