Skip to content
Angular: Full-Stack Application Development cover image
Play overlay
Preview this course

Angular: Full-Stack Application Development
Uplatz

Self-paced videos, Lifetime access, Study material, Certification prep, Technical support, Course Completion Certificate

Summary

Price
£100 inc VAT
Or £33.33/mo. for 3 months...
Study method
Online, On Demand
Duration
22.4 hours · Self-paced
Qualification
No formal qualification
Certificates
  • Reed Courses Certificate of Completion - Free
  • Uplatz Certificate of Completion - Free

Overview

Uplatz offers this comprehensive course on Angular: Full-Stack Application Development. It is a self-paced course with video lectures. You will be awarded Course Completion Certificate at the end of the course.

What is Angular?

Angular is a popular open-source web application framework developed and maintained by Google. It is used for building dynamic, single-page applications (SPAs) and progressive web apps (PWAs). Angular is a TypeScript-based framework that provides a structured way to develop web applications by offering a comprehensive suite of tools and features.

Angular is a powerful framework for modern web development, offering a robust set of tools and features to build dynamic, scalable, and maintainable applications. Its component-based architecture, TypeScript support, and comprehensive ecosystem make it a popular choice for developers and organizations worldwide. Whether you're building a small project or a large enterprise application, Angular provides the tools and structure needed to succeed.

How Angular Works

Angular works by extending HTML with additional attributes and using a component-based architecture. Here's a high-level overview of how Angular works:

  1. Components: Angular applications are built using components. Each component consists of:

    • A TypeScript class that defines the behavior (logic).

    • An HTML template that defines the view (UI).

    • CSS styles for styling the component.

  2. Modules: Angular apps are modular, and Angular uses NgModules to organize the application into cohesive blocks of functionality. Every Angular app has at least one root module (AppModule).

  3. Templates: Angular uses HTML templates to define the UI. These templates can include Angular-specific syntax like data binding, directives, and pipes.

  4. Data Binding: Angular provides a powerful data binding mechanism that synchronizes the data between the component and the view. There are four forms of data binding:

    • Interpolation ({{ }})

    • Property binding ([ ])

    • Event binding (( ))

    • Two-way binding ([( )])

  5. Dependency Injection: Angular has a built-in dependency injection system that makes it easier to develop and test applications by providing dependencies to components and services.

  6. Routing: Angular's router enables navigation between different views or components based on the URL. It allows for lazy loading of modules, which improves performance.

  7. Services: Services are used to encapsulate business logic, data access, or shared functionality. They can be injected into components.

  8. Directives: Angular provides built-in directives (e.g. ngIf, ngFor) to manipulate the DOM and add dynamic behavior to the application.

  9. Pipes: Pipes are used to transform data in the template, such as formatting dates, currency, or filtering lists.

  10. Change Detection: Angular uses a change detection mechanism to automatically update the view whenever the underlying data changes.

Key Features of Angular

  1. Two-Way Data Binding: Simplifies the synchronization between the model and the view.

  2. Component-Based Architecture: Encourages reusability and modularity.

  3. TypeScript Support: Provides strong typing, better tooling, and improved code quality.

  4. Dependency Injection: Makes applications more modular and testable.

  5. RxJS Integration: Simplifies handling asynchronous operations and event-based programming.

  6. Angular CLI: A command-line tool for scaffolding, building, and testing Angular applications.

  7. Cross-Platform Development: Supports building web, mobile (via Ionic), and desktop (via Electron) applications.

  8. Powerful Templating: Combines HTML with Angular directives for dynamic content.

  9. Built-in Routing: Simplifies navigation and lazy loading.

  10. Comprehensive Tooling: Includes tools for testing, debugging, and optimizing applications.

Benefits of Angular

  1. Enhanced Productivity: Angular's CLI, component-based architecture, and reusable code reduce development time.

  2. Improved Performance: Features like lazy loading, Ahead-of-Time (AOT) compilation, and tree-shaking optimize performance.

  3. Scalability: Angular is designed for building large-scale applications with maintainable code.

  4. Cross-Platform Support: Enables developers to build applications for web, mobile, and desktop using a single framework.

  5. Strong Community and Ecosystem: Backed by Google and a large community, Angular has extensive documentation, third-party libraries, and tools.

  6. TypeScript Advantages: Strong typing, better IDE support, and improved code maintainability.

  7. Testing Support: Built-in support for unit testing and end-to-end testing.

  8. Consistency: Angular provides a consistent structure and best practices, making it easier for teams to collaborate.

  9. Security: Built-in protections against common web vulnerabilities like XSS and CSRF.

Certificates

Reed Courses Certificate of Completion

Digital certificate - Included

Will be downloadable when all lectures have been completed.

Uplatz Certificate of Completion

Digital certificate - Included

Course Completion Certificate by Uplatz

Curriculum

1
section
62
lectures
22h 23m
total

    • 1: What is Angular 20:54
    • 2: Setting up Angular 19 Preview 24:07
    • 3: First Changes in an Angular App 18:32
    • 4: Angular 19 File and Folder Structure 18:45
    • 5: Interpolation in Angular 15:57
    • 6: Angular CLI 07:24
    • 7: Angular Components 23:37
    • 8: Creating a Custom Component in Angular 13:39
    • 9: Function Calls on Button Click in Angular Preview 12:23
    • 10: Defining Data Types in Angular 13:31
    • 11: Building a Counter App in Angular 14:23
    • 12: Important Events in Angular 21:48
    • 13: Getting and Setting Input Field Values in Angular 19:42
    • 14: Styling in Angular - Methods and Best Practices 26:24
    • 15: Conditional Rendering with if-else and Toggle Functionality 19:50
    • 16: Control Flow with else-if 09:46
    • 17: Switch-Case in Angular 18:37
    • 18: For Loop in Angular Templates 30:48
    • 19: Angular Signals 30:28
    • 20: Data Types using Signals 29:02
    • 21: Computed Signals 30:09
    • 22: Angular Effects 32:04
    • 23: @for Loop and Contextual Variables in Angular 17:21
    • 24: Implementing Two-Way Binding in Angular Preview 09:15
    • 25: Building a To-Do List App in Angular 18:28
    • 26: Dynamic Styling in Angular 17:44
    • 27: Understanding Directives in Angular 32:37
    • 28: ngFor Directive in Angular 21:35
    • 29: ngIf Directive in Angular 14:44
    • 30: ngSwitch Directive in Angular 18:59
    • 31: Basic Routing in Angular 22:01
    • 32: Adding a Header with Routing 18:45
    • 33: Creating a 404 Page in Angular 12:34
    • 34: Passing Data between Pages in Angular 27:40
    • 35: Dynamic Routing in Angular 20:28
    • 36: Introduction to Forms in Angular 29:05
    • 37: Creating Basic Reactive Forms 18:35
    • 38: Form Grouping in Reactive Forms 19:40
    • 39: Implementing Reactive Form Validation 25:25
    • 40: Working with Template-Driven Forms 22:39
    • 41: Validating Template-Driven Forms 38:53
    • 42: Passing Data from Parent to Child Components 34:01
    • 43: Creating a Reusable Component in Angular 16:17
    • 44: Passing Data from a Child Component to a Parent Component 15:03
    • 45: Angular Pipes 25:21
    • 46: Creating Custom Pipes in Angular 22:19
    • 47: Angular Lifecycle Hooks 19:51
    • 48: Angular Services 28:24
    • 49: Calling an API with Services in Angular 17:19
    • 50: Using Data Types for API Responses 23:15
    • 51: Making a POST API Request in Angular 26:46
    • 52: Making a DELETE API Request in Angular 25:42
    • 53: Populating Input Fields with API Data 30:45
    • 54: Updating Data using the PUT API Method in Angular 29:24
    • 55: Implementing Route Lazy Loading in Angular 22:15
    • 56: Building and Deploying an Angular App Locally 17:02
    • 57: Deploying an Angular App on Vercel 07:25
    • 58: Setting up Tailwind CSS in Angular 12:30
    • 59: Introduction to RxJS in Angular 42:02
    • 60: Comparing RxJS Observables vs. Angular Signals 28:43
    • 61: Angular Dependency Injection (DI) 23:44
    • 62: Optimizing Performance in Angular 15:47

Course media

Description

Angular - Course Syllabus

Module 1: Angular Foundations

  • 1. What is Angular?
    • Introduction to Angular and its benefits.
    • Why learn Angular for modern web development.
  • 2. Angular 19 Setup
    • Installing Angular CLI.
    • Creating a new Angular application.
    • Troubleshooting common setup issues.
  • 3. First Changes in Angular App
    • Basic modifications to app.component.html and app.component.ts.
    • Understanding the initial application structure.
  • 4. Angular 19 File and Folder Structure
    • Detailed explanation of the Angular project architecture.
    • Understanding the purpose of key files and folders.
  • 5. Interpolation in Angular
    • Displaying data in templates using interpolation.
    • Practical examples of data binding.
  • 6. Angular CLI
    • Essential Angular CLI commands for development.
    • Generating components, services, and modules.

Module 2: Core Angular Concepts

  • 7. Angular Components
    • Understanding the role of components in Angular.
    • Component lifecycle and data flow.
  • 8. Creating a Custom Component
    • Manual creation of reusable components.
    • Component interaction and best practices.
  • 9. Function Calls on Button Click in Angular
    • Handling user interactions with event binding.
    • Implementing event handlers and methods.
  • 10. Defining Data Types in Angular
    • Using TypeScript data types for robust applications.
    • Type safety and best practices.
  • 11. Build a Counter App in Angular
    • Hands-on project: building a simple counter application.
    • Applying core Angular concepts.
  • 12. Important Events in Angular
    • Exploring common DOM events in Angular.
    • Practical examples of event handling.
  • 13. Getting and Setting Input Field Values in Angular
    • Two-way data binding and form input handling.
    • Practical input field manipulation.
  • 14. Styling in Angular
    • Component-specific styling and global styles.
    • Using CSS, SCSS, and other styling techniques.
  • 15. Conditional Rendering with if-else and Toggle Functionality
    • Using *ngIf for conditional rendering.
    • Implementing toggle functionality.
  • 16. Control Flow with else if
    • Expanding conditional logic with *ngIf and else if.
  • 17. Using switch-case in Angular
    • Implementing switch-case logic in templates.
  • 18. Using for Loop in Angular
    • Iterating over data with *ngFor.
  • 19. Angular Signals
    • Introduction to Angular Signals for reactive state management.
  • 20. Data Types with Signals
    • Using various data types with Signals.
  • 21. Computed Signals
    • Utilizing computed signals for derived values.
  • 22. Angular Effects
    • Understanding and using Angular Effects.
  • 23. @for Loop and Contextual Variables
    • Exploration of the @for loop and contextual variables.
  • 24. Two-Way Binding
    • Implementing two-way data binding with ngModel.
  • 25. To-Do List
    • Hands-on project: building a to-do list application.
  • 26. Angular Dynamic Styling
    • Applying dynamic styles based on component state.
  • 27. Directives in Angular
    • Introduction to structural and attribute directives.
  • 28. ngFor Directive
    • Advanced usage of the ngFor directive.
  • 29. ngIf Directive
    • Using the ngIf directive and else blocks.
  • 30. ngSwitch Directive
    • Implementing switch-case logic with ngSwitch.

Module 3: Routing, Forms, and Data Management

  • 31. Basic Routing in Angular
    • Setting up routes and navigation.
    • Creating single-page applications.
  • 32. Adding a Header with Routing
    • Implementing a navigation header with routing.
  • 33. Creating a 404 Page
    • Handling invalid routes with a 404 page.
  • 34. Passing Data Between Pages
    • Passing data using route parameters and query parameters.
  • 35. Dynamic Routing
    • Implementing dynamic routes with parameters.
  • 36. Forms in Angular
    • Introduction to template-driven and reactive forms.
  • 37. Basic Reactive Forms
    • Creating forms with reactive form APIs.
  • 38. Reactive Forms with Form Grouping
    • Organizing forms with form groups.
  • 39. Reactive Form Validation
    • Implementing form validation with reactive forms.
  • 40. Template-Driven Forms
    • Creating forms with template-driven approach.
  • 41. Angular Template-Driven Forms Validation
    • Validation of Template driven forms.
  • 42. Passing Data from Parent to Child
    • Using @Input to pass data between components.
  • 43. Reusable Component Example
    • Building reusable components.
  • 44. Passing data from a Child Component to a Parent Component
    • Using @Output and event emitters.
  • 45. Angular Pipes
    • Transforming data with built-in pipes.
  • 46. Creating Custom Pipes in Angular
    • Building custom data transformation pipes.
  • 47. Angular Lifecycle Hooks Tutorial
    • Understanding component lifecycle hooks.
  • 48. Angular Services
    • Creating and using Angular services for data sharing.
  • 49. Calling API with Services in Angular
    • Making HTTP requests with Angular services.
  • 50. Using Data Types for API Results
    • Typing API responses.
  • 51. Post API Tutorial
    • Implementing POST requests.
  • 52. Delete API Tutorial
    • Implementing DELETE requests.
  • 53. Populate Data in Input Fields with API
    • Populating forms with API data.
  • 54. Update Data with PUT API Method
    • Implementing PUT requests.
  • 55. Route Lazy Loading
    • Improving performance with lazy loading.

Module 4: Advanced Angular and Deployment

  • 56. Build and Local Deploy
    • Building and deploying Angular applications locally.
  • 57. Deploying an Angular App on Vercel
    • Deploying Angular applications to Vercel.
  • 58. Setup Tailwind CSS in Angular
    • Integrating Tailwind CSS for styling.
  • 59. Introduction to RxJS in Angular
    • Understanding RxJS observables and operators.
  • 60. RxJS Observables vs Angular Signals
    • Comparison of Signals and Observables.
  • 61. Angular Dependency Injection (DI)
    • Understanding and using dependency injection.
  • 62. Optimizing Performance in Angular
    • Techniques for optimizing Angular application performance.

Who is this course for?

Everyone

Requirements

Passion and zeal to accomplish something big!

Career path

  • Front-End Engineer
  • UI Engineer
  • Web Interface Specialist
  • SPA Architect
  • Client-Side Engineer
  • UI/UX Technologist
  • Application Interface Lead
  • Front-End Solutions Consultant
  • Software Interface Designer
  • Web Experience Engineer

Questions and answers

Currently there are no Q&As for this course. Be the first to ask a question.

Ask a question

Reviews

Currently there are no reviews for this course. Be the first to leave a review.

Leave a review

Legal information

This course is advertised on Reed.co.uk by the Course Provider, whose terms and conditions apply. Purchases are made directly from the Course Provider, and as such, content and materials are supplied by the Course Provider directly. Reed is acting as agent and not reseller in relation to this course. Reed's only responsibility is to facilitate your payment for the course. It is your responsibility to review and agree to the Course Provider's terms and conditions and satisfy yourself as to the suitability of the course you intend to purchase. Reed will not have any responsibility for the content of the course and/or associated materials.

FAQs

Study method describes the format in which the course will be delivered. At Reed Courses, courses are delivered in a number of ways, including online courses, where the course content can be accessed online remotely, and classroom courses, where courses are delivered in person at a classroom venue.

CPD stands for Continuing Professional Development. If you work in certain professions or for certain companies, your employer may require you to complete a number of CPD hours or points, per year. You can find a range of CPD courses on Reed Courses, many of which can be completed online.

A regulated qualification is delivered by a learning institution which is regulated by a government body. In England, the government body which regulates courses is Ofqual. Ofqual regulated qualifications sit on the Regulated Qualifications Framework (RQF), which can help students understand how different qualifications in different fields compare to each other. The framework also helps students to understand what qualifications they need to progress towards a higher learning goal, such as a university degree or equivalent higher education award.

An endorsed course is a skills based course which has been checked over and approved by an independent awarding body. Endorsed courses are not regulated so do not result in a qualification - however, the student can usually purchase a certificate showing the awarding body's logo if they wish. Certain awarding bodies - such as Quality Licence Scheme and TQUK - have developed endorsement schemes as a way to help students select the best skills based courses for them.
View all
Related searches: Online courses

Interest free credit agreements provided by Zopa Bank Limited trading as DivideBuy are not regulated by the Financial Conduct Authority and do not fall under the jurisdiction of the Financial Ombudsman Service. Zopa Bank Limited trading as DivideBuy is authorised by the Prudential Regulation Authority and regulated by the Financial Conduct Authority and the Prudential Regulation Authority, and entered on the Financial Services Register (800542). Zopa Bank Limited (10627575) is incorporated in England & Wales and has its registered office at: 1st Floor, Cottons Centre, Tooley Street, London, SE1 2QG. VAT Number 281765280. DivideBuy's trading address is First Floor, Brunswick Court, Brunswick Street, Newcastle-under-Lyme, ST5 1HH. © Zopa Bank Limited 2026. All rights reserved.