Last Update: Oct 09, 2024

Learn Angular From Scratch

  • Free

About Course

Start your journey into modern web development with our course to learn Angular from scratch. This course covers all the fundamentals and provides a step-by-step guide on how to learn Angular, making it easy for beginners to master one of the most popular front-end frameworks.

In this course you learn how to build elegant front-end applications with JavaScript Angular framework.

The AngularJS course provides a thorough introduction to the Angular JavaScript Framework including coverage of its latest versions. You will learn the fundamental skills necessary to build Web Applications using Angular and the MVVM (Model-View-ViewModel) design pattern. Topics include using TypeScript and ECMAScript 6 to create components, using directives and components to define UI elements, routes and screens, applying dependency injection, designing views/templates, routing, data binding and pipes, applying directives, as well as form integration and validation. You will also use the Angular services to communicate with RESTful web services and provide CRUD database operations.

 

Learn Angular Step By Step

Our course is designed to help you learn Angular step by step, from basic concepts to advanced features. You’ll also dive into the latest version, learn Angular 14, gaining hands-on experience in building robust, scalable web applications.
 

AngularJS Learning Objectives

You will learn the following:

  • Using TypeScript and ECMAScript 6 to create components
  • Using directives and components to define UI elements, routes and screens
  • Working effectively with component lifecycle events
  • Injecting dependencies to lessen coupling and increase testability
  • Unit testing Angular applications with Karma and Jasmine
  • Using property binding to link DOM elements with model data
  • Building Single Page Applications using Angular
  • Integrating forms with Angular
  • Organizing code using modules
  • Communicating with RESTful Web services

 

AngularJS Topics and Subtopics

The following outline is covered in this course:

Session 1: Getting started with Angular 2+

Section 1.1: Getting started with Angular 2 with node.js/expressjs backend (http example included)

Section 1.2: Install angular2 with angular-cli

Section 1.3: Getting started with Angular 2 without angular-cli

Section 1.4: Getting through that pesky company proxy

Section 1.5: Keeping Visual Studios in sync with NPM and NODE Updates

Section 1.6: Let’s dive into Angular 4!

 

Session 2: Components

Section 2.1: A simple component

Section 2.2: Templates & Styles

Section 2.3: Testing a Component

Section 2.4: Nesting components

 

Session 3: Component interactions

Section 3.1: Pass data from parent to child with input binding

Section 3.2: Parent – Child interaction using @Input & @Output properties

Section 3.3: Parent – Child interaction using ViewChild

Section 3.4: Bidirectional parent-child interaction through a service

 

Session 4: Directives

Section 4.1: *ngFor

Section 4.2: Attribute directive

Section 4.3: Component is a directive with template

Section 4.4: Structural directives

Section 4.5: Custom directive

Section 4.6: Copy to Clipboard directive

Section 4.7: Testing a custom directive

Session 5: Page title

Section 5.1: changing the page title

 

Session 6: Templates

Section 6.1: Angular 2 Templates

 

Session 7: Commonly built-in directives and services

Section 7.1: Location Class

Section 7.2: AsyncPipe

Section 7.3: Displaying current Angular 2 version used in your project

Section 7.4: Currency Pipe

 

Session 8: Directives & components : @Input @Output

Section 8.1: Angular 2 @Input and @Output in a nested component

Section 8.2: Input example

Section 8.3: Angular 2 @Input with asynchronous data

Session 9: Attribute directives to affect the value of properties on the host node by using the @HostBinding decorator.

Section 9.1: @HostBinding

 

Session 10: How to Use ngif

Section 10.1: To run a function at the start or end of *ngFor loop Using *ngIf

Section 10.2: Display a loading message

Section 10.3: Show Alert Message on a condition

Section 10.4: Use *ngIf with*ngFor

Session 11: How to use ngfor

Section 11.1: *ngFor with pipe

Section 11.2: Unordered list example

Section 11.3: More complext template example

Section 11.4: Tracking current interaction example

Section 11.5: Angular 2 aliased exported values

Requirements

Basic knowledge of HTML and CSS as well as good knowledge of JavaScript.

Related Courses

Complete Training Bundle

If you are serious about learning web design and development, you should enroll in Coding Bootcamps school Web Design and Development Training Bundle. This bundle covers all essential and practical topics related to web development. For $290 monthly subscription, you can have access to 300+ hours of hands-on project-based training covering all courses related to web development like JavaScript, PHP, JavaScript frameworks like React or Angular and many more. Click here to learn more.

Private Tutoring Classes

To take skills you learn from this course to the next level, taking the following tutoring classes are highly recommended. It is also a great opportunity to discuss your questions and problems related to this course with an experienced instructor:

What Is Next?

After finishing this course, you can enroll in any of following classes:

 

What Will You Learn?

  • Learn new things
  • Revamp your career
  • Target IT jobs
  • Sharpen your skills
Free
Free access this course

Requirements

  • A laptop or PC
  • Good Internet
  • Routine Study
  • Regular Join Class