Angular: Fundamentals

Explore how Angular components act as the controller, connect with the model and view, learn how they are built, and fit into the application lifecycle.

Explore Angular components as core building blocks, turning classes into modules with the @Component decorator, selector, and template. Bootstrap the root component and use OnInit for data binding.

Explore how Angular components act as controllers within the MBC pattern, coordinating interactions between views and models and tying the NBC pattern together.

Explains templates as the views of the MBC pattern, showing how component templates can be embedded with a component or managed in HDMI file, and when to choose an approach.

Learn to define a custom component tag with selectors, and use inline, multi-line, and external templates, plus external styles via styleUrls in Angular.

Compare embedding template HTML directly with a component to referencing an external HTML file, and decide which approach works best for your templates.

Explore how models store data and bind it to the view in Angular, and examine the various databinding types introduced in this topic.

Explore how Angular data binding links component variables to templates using one-way and two-way binding, including string interpolation, property and attribute binding, event handling, and ngModel for live updates.

Explore various databinding options, including string interpolation and property binding, to provide data to the user. Gain the tools you need to start building a robust user interface.

Explore how to build forms, validate input, and process user input in web applications using efficient tools as part of Angular fundamentals.

Master Angular form validation with required fields, min length, and email pattern, plus real-time error messages and show/hide behavior after submit; leverage form builder for centralized validators.

Learn to implement and validate Angular forms using template-driven and form builder approaches, with required fields, minlength, email pattern, dynamic validation messages, and clean submission handling.

Explore Angular form tools to build, validate, and process user input, enabling user data entry and efficient form handling in web applications.

design a single page application doesn't require all information on one screen; angular routing moves between views without page reload, while you can still use your html to control navigation.

Learn how to enable routing in an Angular single-page app using the router module, define routes and components with a router outlet, create links, and pass parameters via ActivatedRoute.

Learn to implement and navigate Angular routes, create links with a router outlet, and pass and read name parameters for a details page.

Discover how Angular's routing engine enables a single-page app with many views, allowing seamless switching between views and passing data via the URL without leaving the page.

Discover how directives simplify HTL generation and reduce repetitive tasks. Learn to pass information in and receive information from HMO components and to change the document structure.

Learn how Angular directives create HTML elements and separate UI from code using components and templates. Use structural directives like ngFor, ngIf, and ngSwitch to render lists with data binding.

Demonstrate Angular structural directives by building a contact form that switches between home and work templates, adds conditional fields, and create a hover directive to style rows on mouse events.

Angular components are directives, giving you the ability to dynamically generate content. You also explore built-in attributes and structural directives and how to create custom directives to reuse across projects.

Learn how to use services in Angular to share logic across components and improve maintainability, reducing code duplication and keeping components lean.

Learn how Angular services encapsulate business logic as reusable classes for insert, update, delete, and other data operations, and use dependency injection to share a single service across components.

replace the in-memory contact list with a single angular service that manages get, insert, and get by id operations via dependency injection, creating a singleton data source for the app.

Learn how creating services makes your Angular application modular, enabling code reuse and easier maintenance. Leverage dependency injection through services to simplify testing and improve code quality.

Set up your database and web server to enable data-driven Angular applications to communicate with the server.

Explore how Angular applications access external data via RESTful services over HTTP, implement CRUD operations with a Node.js web server and MongoDB, and test with Postman.

Set up a web server and database with RESTful web services to supply data to your angular application. Implement the communication layer between the app and the server.

Explore how to access data from a web server using HTTP in Angular, leveraging the HTTP provider to simplify data retrieval and modification, and display server data.

Learn to implement an Angular http client workflow with observables, map, and subscribe to perform get, post, update, and delete calls against a Monga database.

Test the contacts app in the browser, fix empty data binding with a dummy contact, then verify creating, listing, and updating contacts via http crud operations in the contact service.

Complete the discussion on http communication in Angular and explain building Angular services whose sole purpose is communicating with RESTful services over http.

Explore how Angular pipes format and filter data, handling dates and numbers for display, and learn to create custom pipes to simplify common tasks.

Explore Angular pipes for formatting data with uppercase, lowercase, slice, currency, and date formats; learn to create custom pipes with the pipe decorator and transform interface, and chain transformations.

Learn to implement sort and filter pipes in Angular and wire them into a component. Use input-driven filtering with transform logic, and understand pure versus impure pipes and performance considerations.

Replace and improve on Angular one filters using pipes to control how data is formatted and displayed in your application.

Combine the contacts list components to build an application, showing how Angular building blocks work together to create a fully functioning single-page application.

Learn how to build large scale Angular apps by composing them from small modules and building blocks, turning a daunting task into a manageable, elegant application.

Explore the tools Angular provides, adopt best practices, and review an upgrade path for Angular 1 applications.

Explore the angular updates, including the angular Selye CLI for quick project setup, changes in library locations, the new bootstrap flow via module.ts, and the global routing changes.

Discover how to scaffold an Angular app with Bootstrap styling, use ng generate to create components and folders, and adopt path-based routing with a routing module in Angular.

Angular routing updates: use activated route and snapshot to read id in the details page, and prefer server-side sorting and filtering over client-side pipes for large datasets.

Explore how best practices influence your application design and development process, making maintenance easier. Review the upgrade path from Angular 1 to Angular 2 along with upgrade decisions.