[FrontendMasters] Angular 9 Fundamentals

0
Angular 9 Fundamentals

Angular 9 Fundamentals – Learn how to leverage the power of Angular to build powerful real-world applications from the ground up. We will start from ground zero and learn how to use the Angular CLI to quickstart our app and then learn about components, templates, routing, forms, and server-side communication along the way. As our application comes together, we will discuss proven techniques and patterns that you can use right away to start developing great web applications.

Angular 9 Fundamentals Introduction

  • Introduction Lukas Ruebbelke offers an summary of the course curriculum, demonstrates the right way to arrange Angular with the CLI, and introduces the primary APIs that shall be used within the course.
  • Setting Up the Repo Lukas demonstrates the right way to arrange the course repo, runs the npm run server:all command to arrange a JSON API server that the client-side app can talk with, and makes use of ng serve to begin the applying.
  • Angular Overview Lukas describes the primary variations between Angular 1.x and the brand new model of Angular, and explains that the brand new model of Angular is a part primarily based framework containing modules, routes, elements, and companies.
  • Generate an App with the Angular CLI Lukas demonstrates the right way to generate a brand new Angular utility with the Angular CLI from scratch.
  • Angular Recordsdata & Model Information Lukas walks by the information generated in an Angular utility by the CLI, and references the Angular model information because the neighborhood pointers for writing good Angular code.
  • Generate a New Part Lukas demonstrates the right way to generate a brand new part with the Angular CLI, and explains that there are two parallel module techniques: one is on the language stage, ES6 and above, to handle the supply code and the opposite, ng module, is answerable for the applying configuration. A module can have a number of elements.
  • Angular and ES6 Modules Lukas solutions questions from the viewers about when to create a module when utilizing Angular, explains that each part doesn’t want a module, and describes why a module is critical when utilizing lazy loading.
  • Including Angular Materials Lukas provides Angular materials into the undertaking, demonstrates the right way to import Angular materials modules in a barrel function of modules, and makes use of just a few materials modules, that are materials design elements for angular on the generated utility from a earlier part.

Components

  • Angular 9 Fundamentals Fundamentals Lukas describes the anatomy of a part in Angular, demonstrates the right way to add a part to an utility utilizing the @Part decorator, and explains the right way to connect the decorator to the applying utilizing the part selector. On this part an utility that enables customers to checklist the programs taken on Frontend Masters and their progress is being constructed.
  • Part Routes Lukas demonstrates the right way to add routes to an utility that then masses the part within the part outlet.
  • Part Knowledge Lukas explains the basics of elements and part knowledge movement, and demonstrates the right way to render knowledge on the applying’s predominant web page.
  • Property Binding Lukas explains that property binding is from class to template, demonstrates the right way to show knowledge from the part into the markup utilizing Angular templates, and makes use of a well-liked debugging method that includes the JSON pipe filter.
  • Occasion Binding Lukas demonstrates the right way to connect occasions to elements, the right way to permit occasions to be triggered, and the right way to permit knowledge to movement again into the part occasions.
  • ngFor Lukas reveals the right way to loop by knowledge utilizing ngFor template syntax.
  • Deciding on an Merchandise & ngIf Lukas demonstrates the right way to render the chosen knowledge merchandise, or lesson within the template, and the right way to solely render the info whether it is accessible utilizing ngIf.
  • Native Templates & else Lukas creates a neighborhood template and shows it inside an else reference utilizing the elseBlock.
  • Sanitizing Enter Knowledge Lukas solutions a query about the right way to sanitize consumer knowledge in type inputs by demonstrating the right way to use DomSanitizer and the Sanitizer class.
  • Part Fundamentals Train College students are instructed to create a part, bind properties and occasions to the part, and show the chosen knowledge.
  • Part Fundamentals Answer Lukas dwell codes the answer to the part fundamentals train.

Forms

  • Angular 9 Fundamentals Template Types Lukas demonstrates the right way to arrange an Angular type, the right way to add fields and make some fields required, and the right way to render a type.
  • Submitting Types & Legitimate States Lukas provides a submit button to the shape, and demonstrates the right way to show a button that’s energetic or disabled relying on the state related to the button.
  • Type Template Train College students are instructed so as to add further fields to the shape began within the earlier sections, and hyperlink them to the suitable Angular part.
  • Type Template Answer Lukas dwell codes the answer to the shape template train.

Services & HTTP Client

  • Angular 9 Fundamentals Companies Lukas explains the necessity for companies to orchestrate knowledge coming to and from the server, demonstrates the right way to makes use of companies, and use companies to render knowledge on the UI.
  • Companies CRUD Strategies Lukas creates the create, learn, replace, and delete strategies in a service, and demonstrates the right way to use the strategies within the utility developed within the earlier sections.
  • Companies Train College students are instructed to construct a brand new service that can permit customers to create and add new classes.
  • Companies Answer: Constructing a Service Lukas dwell codes the primary a part of the answer to the companies train, and begins by creating a brand new service.
  • Companies Answer: Distant Endpoint Lukas continues dwell coding the answer to the companies train by fetching knowledge from an API and explaining what optimistic and pessimistic loading of knowledge is.
  • HTTP Consumer Train College students are instructed to finish the distant replace name, the distant delete name, and to repair the UI when the operation is full.
  • HTTP Consumer Answer Lukas dwell codes the answer to the HTTP shopper train.

Component State

  • Angular 9 Fundamentals Part Pushed Structure Lukas explains that Angular strongly encourages the part structure by making it crucial to construct each function as a part, and provides that elements permit builders to develop customized properties and customized occasions. Angular has a part hiearchy that results in higher construction and communication inside the elements of utility.
  • Part API Enter & Output Lukas refactors the applying began within the earlier part, creates kids elements, and provides enter and output properties to a part.
  • Dealing with Shared Mutable State Lukas explains that shared mutable state is the premise of a number of the commonest bugs in giant purposes, and demonstrates the right way to unshare a mutable state by creating a neighborhood copy of the info in order that it would not permit different customers to mutate that knowledge.
  • Part Structure Train College students are instructed to create a classes part, the suitable enter and output properties, and to render the right classes checklist of the part.
  • Part Structure Answer Lukas dwell codes the answer to the part structure train.

Routing

  • Angular 9 Fundamentals Router Hyperlinks Lukas demonstrates the right way to create hyperlinks to different routes within the utility utilizing the RouterLink directive.
  • Routing to Elements Lukas explains the right way to path to a particular part and render that part in an outlet primarily based on the route. An outlet prompts an occasion when a brand new part is instantiated.
  • Making a Lazy Loaded Route Lukas demonstrates the right way to arrange a lazy loaded route so you possibly can separate the purposes module payloads and never need to load every thing upfront for efficiency.
  • Router Service Lukas builds a router service and triggers routes from occasions and behaviors from inside the utility.
  • Create a Route Train College students are instructed to generate a brand new customers part, create a brand new customers route, and to replace sidenav to path to new customers.
  • Create a Route Answer Lukas dwell codes the answer to the create a route train.

Testing

  • Angular 9 Fundamentals Unit Testing in Angular Lukas introduces unit testing in Angular, and demonstrates the right way to construct unit exams.
  • Template Testing Lukas demonstrates the right way to hyperlink unit exams to templates, and explains that change detection in a testing setting isn’t automated and must be added.
  • Resolving Dependencies & Mocking Lukas goes by the applying’s testing errors and resolves the errors utilizing module dependencies and mocking companies.
  • Spying & Part Testing Lukas demonstrates the right way to arrange spies on strategies that run when occasions occur in an utility, and explains the right way to check elements.

Wrapping Up

  • Wrapping Up Lukas thanks the viewers, wraps up the course, and solutions questions on unit testing, finish to finish testing, lazy loading and framework parity.
[FrontendMasters] Angular 9 Fundamentals

LEAVE A REPLY

Please enter your comment!
Please enter your name here