Learn JavaScript Angular framework by examples

Last Update: Feb 25, 2024

Learn JavaScript Angular framework by examples

Free

About Course

In this self-paced 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.

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

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 our 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:

Recommended Free Courses

If you are new to the IT or programming, we suggest the following free courses:

Learn JavaScript Angular framework by examples