Modern Web Design Patterns in Angular 8

Create Angular components in order to manipulate the view.

   •  Generate a component using the Angular CLI

   •  Analyze component’s generated files

   •  Use component selector to display in the view

Explore the different techniques to style Angular components.

   •  Implement component styling with inline styling and stylesheets

   •  Use custom host selector to styling host component element

   •  Use custom host-context selector to apply conditional styling

Interact with data in the component class.

   •  Declare variables to store data

   •  Define methods in the class

   •  Interact with Angular lifecycle hooks

Connect data in component class with the component template.

   •  Use interpolation to display data in the view

   •  Use methods to render data in the view

   •  Utilize user input to manipulate data

In this video, we’ll talk about class, style, and attribute binding.

   •  Describe how the classes work

   •  Learn how to style

   •  Learn how to add attribute binding

Here, we’ll talk about loops.

   •  Learn about the feature on loops

We’ll discuss all about pipes.

   •  Understand what pipes are

   •  Learn what pipes do

We’ll look at directives.

   •  Understand what directives are

   •  Learn what directives do

We’ll talk about NgModules in this video.

   •  Describe how the NgModules parts fit together

   •  Learn about the exports, imports, and Bootstrap properties

We’ll talk about feature modules.

   •  Learn how they are used for the purpose of organizing the code

   •  Learn to use the development server in the terminal

We’ll discuss how to produce services to your modules.

   •  Understand the property of “providersâ€

   •  Generate a service

   •  Display the values of the service on the website

Understand the types of Angular forms and related core concepts.

   •  Define template-driven forms

   •  Define Reactive forms

   •  Discuss four main principles of Angular forms

Create binding between elements and a FormControl in component template.

   •  Bind an input element to a FormControl

   •  Bind data object to form model

   •  Access NgForm and display in the form submission method

Create a Reactive form group in component class and bind to elements.

   •  Create a Reactive form using a FormGroup

   •  Use the Angular FormBuilder to simplify form creation

   •  Access FormGroup and display in the form submission method

Validate user input for template-driven/Reactive forms and display custom validation messages.

   •  Validate controls in a template-driven form

   •  Validate controls in a Reactive form

   •  Create a custom validator and cross-field validator

Add navigation to Angular web app in order to display the components dynamically.

   •  Define a root-level application router module

   •  Create a simple navigation menu with Angular links

   •  Project components with router-outlet

Use an Angular resolver guard to delay rendering the routed component, until all necessary data has been fetched.

   •  Generate resolver service

   •  Implement the Angular Resolve interface to return data to a component

   •  Obtain data from resolver, inside of a component

Generate navigation guards to implement conditional routing to components.

   •  Use Angular CLI tool to generate a route guard

   •  Implement available route guard interfaces

   •  Learn how to attach created guards to a router configuration

Implement a lazy loading routing strategy to load modules dynamically.

   •  Generate a sample feature module

   •  Configure app root routing module with lazy loading strategy, for a new feature module

   •  Guard the feature module with the CanLoad interface

Use Express.js to host a production-ready Angular web application.

   •  Create a web server using Express.js framework

   •  Define an endpoint that returns data at the root API endpoint

   •  Use Express.js to send an index file template to the client

Create a production build of Angular app and connect to the backend server.

   •  Use Angular CLI to generate a production-ready app

   •  Assess and generate production files

   •  Return main index and generated files to client using Express.js

Deploy and host web application to AWS Elastic Beanstalk.

   •  Sign up for an Amazon Web Services (AWS) account

   •  Upload sample application to Elastic Beanstalk service

   •  Verify and access web application at published URL