Angular 10 hands on for Java Developers

Compare how Angular loads the entire site on the first request and uses client-side routing to deliver instant navigation, unlike traditional web pages that fetch new HTML per page.

Angular enables a fast, responsive user experience by running in the browser, delivering the view as a template and loading the model data via rest, with static pages loading instantly.

Explore how an Angular application compiles to html and javascript, with an app-root. Learn how html, TypeScript, css, and json configs become the front-end via the angular cli.

Discover how to get support during the course by using the Q&A in your dashboard, asking or answering questions, contacting the instructor via the Udemy page, and leaving reviews.

Install Node.js from nodejs.org by selecting the latest LTS version, using the appropriate installer for Windows, Mac, or Linux, accepting defaults, and confirming installation.

Install and configure Visual Studio Code for Angular development, install the Angular Essentials extension, open the project folder, run ng serve, and view the app at localhost:4200.

Explore the architecture of an angular application by building a simple three-page static site. See how the core building blocks fit together and preview the code for later interactive projects.

Discover how Angular components form the building blocks of a webpage, combining HTML views with optional code to create reusable, swappable pieces like menus, footers, and page sections.

Explore how index.html and styles.css form the global structure of an Angular app, including the app-root element, global styles, and favicon, while noting this is a simple, non-production starter.

Discover the four component files for an Angular view: html for layout, css for styling, and two TypeScript files—one for the component class and one for unit tests.

Learn how Angular constructs a page by linking HTML tags to components via selectors and decorators, enforce unique selectors, and share CSS across multiple components using the Angular CLI.

Angular serves a minimal index.html and JavaScript files that generate the complete HTML in the browser, creating a single-page app and dynamic DOM updates.

Learn to open the Angular 10 sample project in your IDE, install dependencies with npm install, fix vulnerabilities with npm audit fix, and run ng serve.

Generate a new angular project with the cli using ng new, accept defaults, and open the folder in your ide, noting npm install isn't required for cli-created projects.

Boot an angular 10 app by configuring the app component and root index.html, run the development server with ng serve, and watch automatic live reloading while creating the first component.

Learn to create an Angular component using the CLI, generate a component with ng g c, name conventions, and register it in app.module to enable the component in your app.

Edit the component’s HTML by replacing the placeholder with provided text, then display page one by inserting the app-page-one selector into the app component so it renders in the browser.

Build and assemble five Angular components—header, page one, page two, page three, and footer—displaying static text and rendered via the app component with their selectors, plus header CSS.

Walks through generating Angular components, wiring header, page 1, page 2, page 3, and footer, then pasting HTML and CSS and rendering them in the app component.

Show how to display or hide Angular components to simulate page navigation, while explaining TypeScript class structure, export, OnInit, and lifecycle behavior.

Learn how template expressions bind a TypeScript class variable to HTML using curly braces, enabling the page name to drive the heading in Angular 10.

Learn angular event binding by wiring html events to typescript methods, using click and mouseenter to trigger onButtonClick that shows a hello message with today's date.

Create a pageRequested variable in the header component, initialized to one, and implement onPageChange to show the chosen page (first, second, or third) via clicked links.

Learn to implement a page change feature in angular 10 by updating a local page requested variable with an on page change method bound to anchor clicks.

Learn to display the correct page component by updating the pagerequested variable and using either angular binding or the hidden attribute to selectively hide other pages, with console.log debugging.

Learn to access data in a child component from a parent in Angular, using template references and square bracket bindings to drive page display.

Explore the ngIf structural directive to include or exclude elements from the DOM, comparing it with the hidden attribute for Angular navigation. Understand asterisk ngIf, DOM changes, and practical tradeoffs.

Learn to read and write a child component's property from the parent by binding a button to update the footer's last accessed value and display it via template interpolation.

Learn to access and update a child component property from its parent in Angular by declaring a footerComponent, linking it with a template reference #footer, and using the @ViewChild decorator.

Bind the app component’s start time to the footer’s lastAccessed property with the @Input decorator and property binding, after initializing in ngOnInit.