Explore

Front-End JavaScript Frameworks: Angular

Approx. 38 hours to complete

Save Course

Go to Course

Course Summary

Angular is a popular JavaScript framework for building web applications. In this course, you will learn the basics of Angular and how to use it to create dynamic and responsive web applications.

Key Learning Points

Understand the fundamentals of Angular including components, directives, and services
Learn how to build dynamic and responsive web applications using Angular
Discover best practices for structuring and organizing your Angular code

Learning Outcomes

Build web applications using Angular
Understand the core concepts of Angular such as components, directives, and services
Follow best practices for structuring and organizing Angular code

Prerequisites or good to have knowledge before taking this course

Basic knowledge of HTML, CSS, and JavaScript
Familiarity with web development concepts

Course Difficulty Level

Intermediate

Course Format

Online
Self-paced
Video lectures
Hands-on projects
Quizzes

Similar Courses

React
Vue.js
Node.js

Related Education Paths

Notable People in This Field

Brad Traversy
Mosh Hamedani

Related Books

Description

This course concentrates mainly on Javascript based front-end frameworks, and in particular the Angular framework (Currently Ver. 6.x). This course will use Typescript for developing Angular application. Typescript features will be introduced in the context of Angular as part of the exercises. You will also get an introduction to the use of Angular Material and Angular Flex-Layout for responsive UI design. You will be introduced to various aspects of Angular including components, directives and services. You will learn about data binding, Angular router and its use for developing single-page applications. You will also learn about designing both template-driven forms and reactive forms. A quick introduction to Observables, reactive programming and RxJS in the context of Angular is included. You will then learn about Angular support for client-server communication through the HTTP client and the use of REST API on the server side. A quick tour through Angular animation support and Angular testing rounds off the course. You must have either completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of front end web-UI frameworks to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended.

At the end of this course you will: - Be familiar with client-side Javascript frameworks and the Angular framework - Be able to implement single page applications in Angular - Be able to use various Angular features including directives, components and services - Be able to implement a functional front-end web application using Angular - Be able to use Angular Material and Angular Flex-Layout for designing responsive Angular applications - Be able to use Observables and RxJS in the context of Angular applications

Outline

Front-End JavaScript Frameworks Overview: Angular
Welcome to Front-End JavaScript Frameworks: Angular
How to Use the Learning Resources
What is Full-Stack Web Development?
Exercise (Video): Setting up Git
Exercise (Video): Basic Git Commands
Exercise (Video): Online Git Repositories
Node.js and NPM
Exercise (Video): Setting up Node.js and NPM
Exercise (Video): Basics of Node.js and NPM
Front-end JavaScript Frameworks Overview
Introduction to Angular
Exercise (Video): Getting Started with Angular
Angular Application Architecture Overview
Exercise (Video): Configuring your Angular Application
Angular Components
Exercise (Video): Angular Components Part 1
Structural Directives
Exercise (Video): Angular Components Part 2
Assignment 1 Requirements (Video): Angular Components
Welcome to Front-End JavaScript Frameworks: Angular: Additional Resources
Full Stack Web Development: The Big Picture: Objectives and Outcomes
Full Stack Web Development: Additional Resources
Setting up Your Development Environment: Git and Node: Objectives and Outcomes
Setting up your Development Environment
Exercise (Instructions): Setting up Git
Exercise (Instructions): Basic Git Commands
Exercise (Instructions): Online Git Repositories
Exercise (Instructions): Setting up Node.js and NPM
Exercise (Instructions): Basics of Node.js and NPM
Setting up your Development Environment: Git and Node: Additional Resources
Introduction to Angular: Objectives and Outcomes
Exercise (Instructions): Getting Started with Angular
Exercise (Instructions): Configuring your Angular Application
Introduction to Angular: Additional Resources
Angular Components: Objectives and Outcomes
Exercise (Instructions): Angular Components Part 1
Exercise (Instructions): Angular Components Part 2
Angular Components: Additional Resources
Assignment 1: Angular Components: Additional Resources
Ideation: Objectives and Outcomes
Ideation Report Template
Ideation: Additional Resources

Angular Services, Routing and Single Page Applications
Data Binding
Exercise (Video): Data Binding
MVC and MVVM
Angular Services
Dependency Injection
Exercise (Video): Angular Service Basics
Exercise (Video): Header and Footer
Angular Routing Basics
Exercise (Video): Angular Routing Basics
Single Page Applications
Exercise (Video): Single Page Applications Part 1
Angular Router: Parameters
Exercise (Video): Single Page Applications Part 2
Assignment 2 Requirements (Video): Angular Services, Routing and Single Page Applications
Data Binding: Objectives and Outcomes
Exercise (Instructions): Data Binding
Data Binding: Additional Resources
Angular Service Basics: Objectives and Outcomes
Exercise (Instructions): Angular Service Basics
Angular Service Basics: Additional Resources
Angular Routing: Objectives and Outcomes
Exercise (Instructions): Header and Footer
Exercise (Instructions): Angular Routing Basics
Angular Routing: Additional Resources
Single Page Applications: Objectives and Outcomes
Exercise (Instructions): Single Page Applications Part 1
Exercise (Instructions): Single Page Applications Part 2
Single Page Applications: Additional Resources
Assignment 2: Angular Services, Routing and Single Page Applications: Additional Resources
UI Design and Prototyping: Objectives and Outcomes
UI Design and Prototyping Report Template
UI Design and Prototyping: Additional Resources

Angular Forms, Angular and Reactive JavaScript
Exercise (Video): Dialogs
Angular Template-driven Forms
Exercise (Video): Angular Template-driven Forms Part 1
Angular Template-driven Form Validation
Exercise (Video): Angular Template-driven Forms Part 2
Angular Reactive Forms
Exercise (Video): Angular Reactive Forms Part 1
Angular Reactive Form Validation
Exercise (Video): Angular Reactive Forms Part 2
Promises
Exercise (Video): Angular and Promise Part 1
Exercise (Video): Angular and Promise Part 2
Angular and RxJS
Exercise (Video): Angular and RxJS Part 1
Exercise (Video): Angular and RxJS Part 2
Exercise (Video): Angular Reactive Forms Part 3
Assignment 3 Requirements (Video): Single Page Applications and Angular Forms
Angular Template-driven Forms: Objectives and Outcomes
Exercise (Instructions): Dialogs
Exercise (Instructions): Angular Template-driven Forms Part 1
Exercise (Instructions): Angular Template-driven Forms Part 2
Angular Template-driven Forms: Additional Resources
Angular Reactive Forms: Objectives and Outcomes
Exercise (Instructions): Angular Reactive Forms Part 1
Exercise (Instructions): Angular Reactive Forms Part 2
Angular Reactive Forms: Additional Resources
Angular and Promise: Objectives and Outcomes
Exercise (Instructions): Angular and Promise Part 1
Exercise (Instructions): Angular and Promise Part 2
Angular and Promise: Additional Resources
Angular and RxJS: Objectives and Outcomes
Exercise (Instructions): Angular and RxJS Part 1
Exercise (Instructions): Angular and RxJS Part 2
Exercise (Instructions): Angular Reactive Forms Part 3
Angular and RxJS: Additional Resources
Assignment 3: Single Page Applications and Angular Forms: Additional Resources

Client-Server Communication
Networking Essentials
Exercise (Video): Setting up a Server using json-server
Angular HTTP Client
Brief Representational State Transfer (REST)
Exercise (Video): Angular HTTP Client
Exercise (Video): Angular HTTP Client: Error Handling
Exercise (Video): Saving Changes to Server
Attribute Directives
Exercise (Video): Custom Attribute Directives
Angular Animations
Exercise (Video): Angular Animations Part 1
Exercise (Video): Angular Animations Part 2
Assignment 4 Requirements (Video): Client-Server Communication
Angular Testing
Exercise (Video): Angular Testing
End-to-End Testing Angular Applications
Exercise (Video): End-to-End Testing Angular Applications
Introduction to Webpack
Exercise (Video): Building and Deploying the Angular Application
Conclusions
Client-Server Communication: Objectives and Outcomes
Exercise (Instructions): Setting up a Server using json-server
Client-Server Communication: Additional Resources
Angular HTTP Client: Objectives and Outcomes
Exercise (Instructions): Angular HTTP Client
Exercise (Instructions): Angular HTTP Client: Error Handling
Exercise (Instructions): Saving Changes to Server
Angular HTTP Client: Additional Resources
Animation and Directives: Objectives and Outcomes
Exercise (Instructions): Custom Attribute Directives
Exercise (Instructions): Angular Animations Part 1
Exercise (Instructions): Angular Animations Part 2
Animation and Directives: Additional Resources
Assignment 4: Client-Server Communication: Additional Resources
Testing Angular Applications: Objectives and Outcomes
Exercise (Instructions): Angular Testing
Exercise (Instructions): End-to-End Testing Angular Applications
Testing Angular Applications: Additional Resources
Building and Deployment: Objectives and Outcomes
Exercise (Instructions): Building and Deploying the Angular Application
Building and Deployment: Additional Resources
Conclusions: Additional Resources
Project Implementation: Objectives and Outcomes
Final Report Template

Summary of User Reviews

Read reviews and ratings from satisfied learners who took the Angular course on Coursera. This course is highly recommended for those who want to learn Angular development. Learners appreciated the course's clear explanations and hands-on exercises.

Key Aspect Users Liked About This Course

Clear explanations and hands-on exercises

Pros from User Reviews

In-depth coverage of Angular concepts
Great practice exercises to reinforce learning
Well-structured course materials
Excellent instructor support
Flexible learning schedule

Cons from User Reviews

Some learners found the course challenging
A few learners felt the pace was too fast
Not enough emphasis on real-world applications
Course materials could be more visually engaging
Some learners experienced technical difficulties with the platform

Recommended for you

Redux Saga with React: Fast-track Redux Saga intro course

QUICKEST way to understand and get up and running with Redux Sagas and start implementing in React and Redux projects. ** Course Updates **...

Save Course

Full Stack Kotlin Development

Leverage the power of Kotlin to build full-stack applications Kotlin brings many advantages to Java developers. A strongly typed language like Kotlin brings safety to Javascript development....

Save Course

React: React Native Mobile Development: 3-in-1

Combine the power of React Native to build dynamic and stunning native mobile apps for Android and iOS React has taken the web development world by storm....

Save Course

Web Design for Everybody Capstone

The capstone will develop a professional-quality web portfolio. Students will demonstrate the ability to design and implement a responsive site for a minimum of three platforms....

Save Course