Practical Steps for Angular Front-End Development
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
24 students enrolled

Practical Steps for Angular Front-End Development

Take easy steps for Angular Front-end Development using Angular CLI, Routing and more using Angular 8
0.0 (0 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
24 students enrolled
Created by Packt Publishing
Last updated 6/2019
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4.5 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Explore the Angular framework by having the Angular CLI generate different pieces of code
  • Design your own schematics so you can boost productivity when writing repetitive code specific to your app.
  • Create your own schematics to generate boilerplate specific for your needs.
  • Explore the foundations of Angular Routing using practical real-world applications. Fetch data before navigating to the route using Route Resolver
  • Implement child routes in Angular Application by understanding how some routes may only be accessible and viewed within other routes.
  • Sew data into your awesome-looking application by exploring template-binding concepts.
  • Manage events in your application better by exploring event handling concepts.
  • Discover routing concepts and have the benefits of a multi-page web app in a single page web app.
Course content
Expand all 59 lectures 04:39:45
+ Angular CLI Recipes
40 lectures 02:41:52

This video will give you an overview about the course.

Preview 03:54

In this video, you will see how Angular CLI solves specific problems and how useful it is in modern Angular development.

   •  Understand the modern JavaScript framework

   •  Look at some examples of the modern JavaScript framework

What the Angular CLI Solves

This video will take you through the prerequisites of Angular CLI.

   •  Understand the prerequisites

   •  Install Node.js


This video will show you how to set up and configure Angular CLI.

   •  Install Angular CLI

   •  Configure Angular CLI

Installing Angular CLI

In this video, you will see how to verify the installed version of Angular CLI. You will also generate a new application to verify that Angular CLI works as intended. And you will see how to start a development server and check web page render.

   •  Verify the installed version of Angular CLI

   •  Generate a new application

   •  Start the Development Server and check the web page render

Verifying Your Setup

CLIs are new to the front-end development world and not everyone is familiar with them. We'll teach you the basics of CLI and show you some examples.

   •  Understand the CLI loop and fundamentals

   •  Run some example commands

Preview 01:54

Setting up an entire app from scratch takes a lot of time. In this video we will see angular CLI generates fully-functioning apps in a matter of seconds.

   •  Install and configure all dependencies manually takes hours

   •  Use Angular CLI to generate a new app

Generating a New App with ng new

In this video, we will see Angular CLI installation and configuration of many tools. You might want to change some of these configurations to suit your development process. By understanding the files and formats the different tools require, you'll be able to customize your development experience.

   •  Review configuration files development tools

   •  Review your environment-specific app settings

   •  Review configuration files for Angular

Understanding the Configuration

Running commands with multiples switches, options, and values can be error-prone. Versioning those commands as scripts inside your package.json allows those commands to be saved and shared across teams.

   •  Define a commonly reused command

   •  Create a script entry to run that command and version it

   •  Run well-documented scripts from your package manager

Running Tasks

Enforcing a consistent coding style and following the Angular style guide can be time-consuming and error-prone. The ng lint command, powered by tslint and the codelyzer rules, makes automatic linting a breeze.

   •  Understand lint errors and style guide violations

   •  Run the ng lint command

   •  Fix the errors and violations reported

Linting Your Code

We want to generate modules as fast as possible. In this video you will see how Angular CLI generates them instantly, even adding a custom routing module if we needed.

   •  Run ng generate module name

   •  Review the created file

   •  Review the optional arguments for module generation

Preview 03:42

We want to generate classes as fast as possible. In this video you will see how Angular CLI generates them instantly, including a spec file with unit test boilerplate code.

   •  Run ng generate class name

   •  Implement the class behavior and model

Generating Classes

We want to generate services as fast as possible. In this video you will see how Angular CLI generates them instantly, including a spec file with unit test boilerplate code.

   •  Run ng generate service name

   •  Declare the service inside an NgModule providers list

   •  Implement the service code

Generating Services

We want to generate components as fast as possible. In this video you will see how Angular CLI generates them instantly, including a spec file with unit test boilerplate code and declaring them within the given module. I can also tweak a few options for the ng module annotation and generate files for the style and template HTML content for it.

   •  Run ng generate component name

   •  Implement the component user interface

   •  Learn about the extra arguments for component generation

Generating Components

We want to generate directives as fast as possible. In this video you will see how Angular CLI generates them instantly, including a spec file with unit test boilerplate code.

   •  Run ng generate component name

   •  Implement the directive logic

   •  Apply the directive to HTML tags and verify behavior

Generating Directives

We want to generate pipes as fast as possible. In this video you will see how Angular CLI generates them instantly, including a spec file with unit test boilerplate code.

   •  Run ng generate component name

   •  Implement the pipe logic

   •  Use the pipe within HTML templates

Generating Pipes

We want to generate guards as fast as possible. In this video you will see how Angular CLI generates them instantly, including a spec file with unit test boilerplate code.

   •  Run ng generate guard name

   •  Add guard to route

   •  Implement guard logic

Generating Guards

Parts of our code might be reused across different apps. We should group them into a library and publish them for other teams to use. Angular CLI makes generating and building a library extremely easy, setting up the files and configuring the compiler options to have it available immediately after compiling it, even before we publish it.

   •  Run ng generate library name

   •  Move code from module to the new librarymodule

   •  Build the library to have access to it from any app

Generating Libraries

Writing all the options using the long form, moving files into new folders after creation or cleaning up after generating a bunch of features takes time and effort. Angular CLI has various switches and mechanisms we can use with ng generate to abbreviate the options passed to the generation, specify the output directory and skip file creation when we're learning the new switches.

   •  Use names with relative paths, adding --force if overwriting

   •  Use abbreviated commands like ng g instead of ng generate

   •  Use --dry-run to see a preview of the file changes

Using Advanced Options

Code generation should be extensible and reusable. In this video, we will look at ng generate and ng add command make use of schematics, which define transformations to be applied to our codebase.

   •  Understand code generation commands

   •  Add a new dependency using ng add

   •  Inspect the code changes made by the schematic

Introduction to Schematics

Schematics are abstract and hard to grasp. This video will define a custom schematic that allows us to understand the mechanisms behind it.

   •  Install dependencies and generate blank schematic

   •  Implement simple schematic logic

   •  Build and test schematic to verify behavior

Creating Your Own Schematic

Some libraries take multiple steps to be integrated into Angular projects. In this video we will see ng add command that automatically sets up libraries published in npm which have an ng add schematic defined.

   •  Create an ng-add schematic

   •  Implement complex logic

   •  Build, link and test to verify behavior

Declaring Schematics in Libraries

TypeScript needs to be compiled to JavaScript, our JS dependencies bundled and our styles bundled and compiled to CSS. Our source code cannot be published as-is. Compiled versions of apps need to be routed appropriately on the server.

   •  Our apps are written many files

   •  Our code is not native for the browser

   •  Compile and bundle our dependencies and code into fewer files

Understanding ng build

Angular can compile templates JIT but that makes our apps bigger. AOT ships compiled templates. We don't use 100% of source code and our dependencies, we need to remove dead code and tree-shake it. Our code takes up a lot of space, we should minimize it.

   •  Understand build configuration options

   •  Set up appropriate options for prod

   •  Use ngx-build-plus if we need more flexibility

Configuring Build Options

We don't want to build and deploy new versions of our app with every change. ng serve watches for file changes and reloads the browser. It can replace code without even losing the browser state and apply any config option from before.

   •  Run ng serve

   •  Specify optional optimizations

   •  Develop without having to re-deploy

Building with ng serve

Sometimes we need access to extra files such as JSON datasets, service workers, or app images. With the build options configuration we can add custom files easily.

   •  Add new files under src

   •  Add paths to build config

   •  Build the app and the assets will be included

Adding Custom Resources

App sizes have been increasing and reducing the benefits of hardware improvements. Performance budgets alert us of abnormal growth within our app size.

   •  Understand the bloat problem

   •  Set up performance budgets

   •  Run a build and watch for reports

Using Size Budgets

Having more than one environment for testing and integration is the norm. These environments should be easier to debug and faster to build than production versions.

   •  Understand different environments and configurations

   •  Create a development configuration

   •  Run ng build specifying a configuration

Managing Configurations

Enabling multi-language experiences is a core feature of the Angular framework. Preparing the build process and extracting the messages we need to localize is made easier by using the Angular CLI's build settings and i18n command.

   •  Tag messages in your app, extract them with ng xi18n

   •  Localize messages

   •  Set up build command with AOT language settings

Mastering Internationalization

Writing code is half the job. Without tests, we can only know if something works when we're using it. Complex applications need to be kept in check and prevent defects before they're released.

   •  Understand what a test is

   •  Understand why testing is necessary

Testing in practice

Angular CLI sets up unit testing for all generated code by default.

   •  Define a unit test for a component

Understanding unit tests – Part 1

In this video we will look at DOM integration which is being tested as unit tests in Angular.

   •  Define a unit test for a pipe

Understanding unit tests – Part 2

In this video we will run the test suite.

   •  Run the test suite with ng test

Understanding unit tests – Part 3

Angular CLI sets up Protractor, a e2e testing tool that manages browsers and can emulate users.

   •  Define a failing e2e test

   •  Run the e2e tests with ng e2e

   •  Fix the test and run it again

Understanding end-to-end tests

By default Protractor uses Chrome, launching a new window. We can use the headless version to have a cleaner workflow. There are alternatives to Protractor like

   •  Update the configuration

   •  Run headless e2e tests

   •  Look at the mission statement

Advanced end-to-end testing

CI should do more than list failing tests. We should know which parts of our code are being tested and how well

   •  Run ng test --coverage

   •  Analyze the coverage report

Understanding code metrics

Our source TypeScript code is not what runs in the browser, that's JavaScript. Debugging production code can be tricky if we don't know how to map to our TypeScript code and how to use a browser debugger.

   •  Make sure source maps are enabled for your app

   •  Deploy your compiled app or run the dev server

   •  Inspect mapped code and debug from dev tools

Debugging Common Scenarios

Running a development server is really easy, but the default networking settings make it impossible to access outside your computer. During rapid iteration, it's very useful to make your development version available on another device like your phone or a co-worker’s computer.

   •  Check that your ports are not used

   •  Disable host checking

   •  Use a network tunnel like local tunnel

Solving Networking Issues

Angular CLI doesn't perform Ahead-of-Time compilation on templates when developing. Sometimes the watch process can miss file changes. Restarting the development server or running a build with --aot enabled will ensure your templates are compiling correctly.

   •  Angular template compilation defaults changed

   •  Don't use spaces for layout

   •  Restart the dev serve and run an --aot enabled build

Solving Compilation Issues

Your app is relying on multiple dependencies. These dependencies are updated, patched, and maintained over time. Your app should be kept up to date within reason and avoid software decay. Tools like Greenkeeper and Renovate tap into your continuous integration process and can help you keep your apps healthy.

   •  Have a test suite and CI process in place

   •  Enable a dependency updater

   •  Keep an eye on pull requests and act accordingly

Solving Dependency Issues
Test your knowledge
5 questions
+ Hands-On Angular Routing
19 lectures 01:57:53

This video gives a glimpse of the entire course.

Preview 01:57

A short introduction to Angular Router and its most important fundamental.

  • Overview of Angular Routing

  • What is Angular Router?

  • How Angular Router works?

Introduction to Angular Routing

Learn how to define Routes in Angular Application.

  • Create Routes using Angular Router Module

  • Configure Routes

  • Import Angular Router Module in AppModule

Define Routes

Understand how to use Router-Outlet.

  • What is Router-Outlet?

  • What is RouterLink?

  • Implement Router-Outlet and RouterLink

Activating Routes

Handles unmatched URLs gracefully.

  • What is Wildcard URL?

  • Add Wildcard URL in application

  • Implement Router redirections in Angular application

Define Wildcard Routes and Redirects

Organize Angular application into multiple modules.

  • What is Feature Module?

  • Why do we need Feature Module?

  • Add new feature module in Angular application

Creating Feature Module

Import feature Module in AppModule to test the eager Loading.

  • Import feature module in AppModule

  • Understand the order of module imports

Importing Feature Module in AppModule

This video covers showing how to fetch data from Route parameters and use in component.

  • Understand Route parameters

  • Different ways to get Route parameters

  • Fetch Route parameters with Observables or without Observables

Get Route Parameters

Pre-fetch data before navigating to the route.

  • What is Route Resolver?

  • Understand why do we need Route Resolver

  • Implement the Route Resolver in Angular Application

Implementing Route Resolver

Handle Errors in Route Resolver.

  • Understand how to handle Error in Route Resolver

  • What is Map?

  • Understand the catchError

Resolver Error Handling

What are Child Routes?

  • Implement complex Layout using nested Layout

  • Why do we need nested Layout?

  • What is nested Routing?

Understanding Child Routes

Implement Child routes in Angular Application.

  • Configure it

Configure Child Routes

Learn how to divide a component in multiple router-outlet.

  • Understand Secondary Routes

  • Understand the need of Secondary Routes

  • Implement Secondary Routes

Creating Secondary Route

Protect Angular routes endpoints using Route Guards.

  • What is Route Guard?

  • Why do we need Route Guard?

  • Implement Route Guard

Route Guards in Action

Improve the performance of Angular Application.

  • What is Lazy Loading?

  • Why do we need Lazy Loading?

  • Implement Lazy Loading

Implement Lazy Loading

User must not be able to view the feature module without authentication.

  • What is CanLoad Guard?

  • Why do we need CanLoad?

  • Implement the CanLoad Guard

CanLoad Guard

Improve the performance of application by loading or downloading feature modules in the background.

  • Why do we need Preloading Feature?

  • Implement Preloading feature technique

Preloading Feature Module

Display Loading indicator in Angular Application.

  • What are Router Events?

  • Understand there are different Router Events

  • Implement Router Events

Router Events in Action

Add Route animations between Route transitions.

  • Understand how to implement Router Animations

Animating Routes in Action
Test your knowledge
3 questions
  • Basic frontend web technologies such as TypeScript/JavaScript, HTML, and CSS is expected.
  • Prior knowledge and understanding of Angular are assumed.

Angular is one of the largest and most widely used frameworks for front-end and full-stack application development. The latest Angular features embrace a mature UI component architecture, a powerful tool when developing scalable application interfaces. Angular CLI is a command-line interface tool helping you initialize, develop, scaffold, and maintain Angular applications. It provides you with boilerplates and therefore saves you time and effort!

This comprehensive 2-in-1 Course is packed with step-by-step instructions, working examples and focuses on how to build component-based user interfaces using Angular 8. You’ll initially explore the Angular framework by having the Angular CLI generate different pieces of code. You’ll design your own schematics so you can boost productivity when writing repetitive code specific to your app. Next, you’ll discover the foundations of Angular Routing and improve the performance of your Angular application using lazy loading. Finally, you’ll create modern user interfaces using Angular 8 and its component-based architecture.

By the end of this course, you will be confident in building your frontends in Angular and will be able to build component-based enhanced UIs using Angular CLI, routing and the features of Angular 8. Contents and Overview

This training program includes 2 complete courses, carefully chosen to give you the most comprehensive training possible.

The First Course, Angular CLI Recipes, covers how to skip writing boilerplate code and boost your productivity. This course will teach you how to generate an Angular application from scratch within seconds, showing you the tips, tricks, and techniques, you need. You will learn all about the CLI, ranging from generating a new app to quickly adding a component, directives, modules, services, guards, and other features effortlessly. The command-line interface provided by the Angular team will help you generate your Angular applications more effectively than ever. It will also teach you how to run a development environment, run tests for your project, easily add new features and keep your dependencies up to date. By the end of the course, you'll find a plethora of tips and tricks to improve performance and write better components. You will master using the Angular CLI and generate entire applications from scratch in a matter of seconds.

The Second Course, Hands-On Angular Routing, covers how to harness the power of Angular Router in your applications. This course is a simple way to get started with Angular Router and harness its full power for your applications. It’s a JavaScript router implementation that’s designed to work with Angular and is packaged as @angular/router. By using Angular Router, you will activate all required Angular components to compose a page when a user navigates to a certain URL. You’ll learn to set up routing so that it lets users navigate from one page to another without page reload. Instead, it updates the browser’s history so the user can use the back and forward buttons when navigating between pages. In addition, you’ll do tasks such as redirect a URL to another URL, resolve data before a page is displayed, run scripts when a page is activated or deactivated, and lazy load the parts of our application. By the end of this course, you’ll be ready to work on projects with Angular Router and make routing configuration work in your Angular application.

About the Authors

  • Orestes Carracedo is a full-stack software developer and has been working on the web since 2005. He's continuously worked with Angular since their first public versions and he has comprehensive knowledge of the framework's features and inner workings, including the Angular CLI.

  • Haider Malik is the founder of fullstackhour. He is a full-stack JavaScript developer. He is passionate about everything JavaScript, and he loves exploring new libraries. He’s had extensive experience developing software and working with teams to improve how software is developed to meet business objectives. Although his primary focus is on outcomes, implementation often includes technical competency.

Who this course is for:
  • This Course is perfect for:
  • JavaScript and Angular Developers who want to harness the power and flexibility of Angular in their apps and would like to keep their projects maintainable and up to date by following the recommended best practices.