Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Full-Stack Web Development with Angular and Express.js
Rating: 4.4 out of 5(3 ratings)
2,010 students

Full-Stack Web Development with Angular and Express.js

Master modern full-stack web development by building responsive Angular apps and robust Express.js APIs from scratch.
Created byeTech School
Last updated 6/2025
English
English [Auto],

What you'll learn

  • Build and manage dynamic front-end apps using Angular
  • Create components, use forms, apply directives, and manage routing
  • Integrate Bootstrap for responsive design
  • Develop scalable back-end services with Express.js
  • Use middleware, error handlers, and routing mechanisms
  • Integrate MongoDB and handle data operations with Mongoose
  • Implement JWT-based authentication and authorization
  • Test APIs using Thunder Client
  • Understand full-stack development workflow through practice tests and mini-projects

Course content

2 sections73 lectures6h 18m total length
  • Introduction to AngularJS4:36

    Explore AngularJS, an open source JavaScript framework by Google for building dynamic, client-side single-page applications using a modular MVC architecture.

  • AngularJS Key Features4:25

    Explore AngularJS key features, including two-way data binding, dependency injection, directives, services, templates, and routing, to build modular, testable front-end apps with reusable components and API integrations.

  • Getting started with AngularJS Part 12:49

    Install the angular CLI globally with npm. Create a new angular project and enable routing, then run the dev server to view the default angular site at port 4200.

  • Getting started with AngularJS Part 24:41

    Explore how to customize an AngularJS project by editing App.component.html, App.component.ts, and styles, understand template URL, styles URL, and the app-root selector, and preview changes in index.html.

  • Angular Components and Templates Part 16:08

    Explore how Angular works, from installing the Angular CLI to creating a basic project. Learn how components and templates map to HTML views and the app root.

  • Angular Components and Templates Part 26:02

    Map how app.component.ts logic connects to app.component.html via the template URL. Generate a new component with ng g c test to see the four files and folder structure.

  • Angular Components and Templates Part 34:24

    Develop and render a test component in an Angular app by wiring its html, css, and spec, importing it into the app module, and displaying it with the component selector.

  • Routing in Angular - Creating Multiple Components5:57

    Explore building and integrating multiple components in Angular, including creating components, importing them into the app, and setting up routing to display distinct components at different URLs.

  • Routing Components to URLs5:08

    Learn to route components to URLs in an Angular app by defining the base URL and mapping paths like test and test two to components.

  • Routing via Base URL in Angular5:08

    Learn how Angular routing maps the base URL localhost:4200 to different components. Define routes in the app-routing.module.ts and map paths like /test and /test-two to the test components.

  • Exporting Routing Components5:40

    Configure angular routing by setting base href, creating an app routing module, and using a router outlet to map test and test two components to /test and /test two endpoints.

  • Template Driven5:10

    Explore template-driven forms in Angular, detailing how templates handle inputs, labels, and submission while contrasting with reactive forms and backend API calls to store data.

  • Creating Simple Reactive Forms in Angular6:13

    Create a simple reactive form in Angular by using form group and form control, importing the reactive forms module, and binding the form to the app component to capture input.

  • Form Submission in Angular6:28

    Learn to build an Angular login form with a form group and form controls for username and password, capture inputs via ng submit, and display values in the console.

  • Understanding Directives in Angular5:05

    Discover how directives connect an HTML template to the component logic in Angular, enabling data binding, reactive forms, and events like click to trigger login actions.

  • Understanding Data Binding in Angular Part 14:57

    Explore how directives enable data binding in Angular by linking an HTML template to its component, handling click events, and triggering alert pop-ups.

  • Understanding Data Binding in Angular Part 25:47

    Explore how data binding connects Angular templates and components, demonstrate one-way data binding from component to HTML and two-way binding using ngModel, and set up forms module for interactive input.

  • Functioning of ngModel in Angular2:27

    Learn two-way data binding with ngModel in Angular by connecting a text input to a component property named name, showing data flow from template to class and back.

  • Mini Project on Angular Directive6:20

    Demonstrate Angular directive data binding by building a live input list with ngModel and the forms module. Update a title string into an array as items are added with clicks.

  • Mini Project on Array4:02

    Explore dynamic array handling with Angular's ngFor, rendering a table with variable rows as items are added. Learn binding, iteration, and console logging of array length.

  • Angular Services and Dependency Injection Part 15:16

    Explore how angular services provide reusable code to share data across components, enable external interactions like api calls, and how dependency injection passes these services into constructors to decouple code.

  • Angular Services and Dependency Injection Part 26:47

    Create a dedicated user data service in a services folder, inject it into a component with dependency injection, and fetch and display a list of users with names and ages.

  • Authentication and Authorization in Angular5:55

    Explain how authentication verifies a user to securely access content, detailing signup and login processes, password hashing, and why storing hashed passwords protects against leaks.

  • Angular Directives and Custom Components Part 15:14

    Learn how Angular directives and custom components manipulate HTML templates and the DOM using component decorators and structural directives like Ng4; explore component, attribute, structural, and custom directives.

  • Angular Directives and Custom Components Part 24:46

    Explore how angular directives function as decorators, linking components with HTML through selectors, templates, and CSS, and learn to create custom directives that manipulate HTML and enable two-way data binding.

  • Angular Directives and Custom Components Part 35:27

    Explore how to combine component logic with built-in Angular directives, and create a custom directive inside a shared/directives folder, using a selector to manipulate HTML and demonstrate one-way communication.

  • Angular Directives and Custom Components Part 42:15

    Learn how to use Angular element ref in a custom directive to manipulate a host element’s styles, with red text and yellow background, enabling communication between HTML and the directive.

  • State Management with NgRx Part 13:54

    Learn to manage complex form data in Angular apps using NgRx, enabling unidirectional data flow from templates to components and across components for organized state.

  • State Management with NgRx Part 24:36

    Explore centralized state management in Angular using a store to hold authentication data like username, email, and password; learn how components fetch, update, and display data such as the navbar.

  • State Management with NgRx Part 35:38

    Explore how NgRx store manages user state with actions and reducers, updating username, email, and password from the login page, and fetch the username with a selector for the navbar.

  • Bootstrap and Angular Js Part 15:00

    Learn how Bootstrap, a CSS framework, provides pre-built styling for Angular components through Angular Bootstrap, with installation tips, documentation guidance, and demo-driven card styling.

  • Bootstrap and Angular Js Part 26:07

    Learn how to integrate Angular Bootstrap as a CSS framework, explore alerts, carousels, dropdowns, navbars, and pagination, and emphasize referencing the documentation and copying code.

Requirements

  • Basic knowledge of HTML, CSS, and JavaScript
  • Familiarity with command line and installing packages via npm
  • No prior experience with Angular or Express.js is necessary — we’ll teach from scratch!

Description

This course is a complete, hands-on guide to building modern full-stack web applications using Angular on the front end and Express.js on the back end. Whether you're aiming to build responsive UIs, manage complex state, or set up secure APIs, this course will equip you with the skills to confidently develop real-world applications. From foundational concepts to full project builds, we guide you through everything you need to thrive as a full-stack JavaScript developer.

Section 1: Angular Fundamentals – Building Responsive Web Apps with Ease

This section covers everything from the basics of AngularJS to creating dynamic and reactive user interfaces. You'll begin by understanding Angular’s structure and key features, then move on to components, templates, routing, forms (both template-driven and reactive), directives, and data binding. You’ll implement mini projects and explore advanced topics like dependency injection, authentication, and state management using NgRx. Bootstrap is also integrated for UI styling.

Section 2: ExpressJS Essentials – Building Modern Web APIs

Dive into the world of server-side development using Express.js. Learn to handle routing, manage middleware, organize your app structure, and implement RESTful APIs. You’ll explore tools like Thunder Client for testing HTTP requests and set up full CRUD operations with MongoDB integration. The section also covers authentication using JWT, error handling, and response status codes, making your API production-ready and secure.

By the end of this course, you’ll be fully equipped to build and deploy complete full-stack applications using Angular and Express.js. Whether you’re seeking a career in web development or aiming to build your own projects, this course gives you both the knowledge and practical experience to succeed in the modern development landscape.

Who this course is for:

  • Aspiring full-stack developers looking to master Angular and Express.js
  • Front-end developers who want to learn backend development
  • Backend developers aiming to understand client-side frameworks
  • Students preparing for interviews or job roles in modern web development
  • Entrepreneurs and freelancers looking to build web applications independently