Front-End JavaScript Frameworks: Angular

4.8
413 ratings
123 reviews

Course 2 of 5 in the Full Stack Web and Multiplatform Mobile App Development Specialization

This course concentrates mainly on Javascript based front-end frameworks, and in particular the Angular framework (Currently Ver. 4.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 and the use of REST API on the server side. You will use Restangular for communicating with a server supporting the REST API. 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
Globe

Только онлайн-курс

Начните сейчас и учитесь по собственному графику.
Intermediate Level

Промежуточный уровень

Clock

Прибл. 39 ч. на завершение

Предполагаемая нагрузка: 4 weeks of study, 6-8 hours/week
Comment Dots

English

Субтитры: English

Приобретаемые навыки

AngularjsNode.JsJavascriptSoftware Testing
Globe

Только онлайн-курс

Начните сейчас и учитесь по собственному графику.
Intermediate Level

Промежуточный уровень

Clock

Прибл. 39 ч. на завершение

Предполагаемая нагрузка: 4 weeks of study, 6-8 hours/week
Comment Dots

English

Субтитры: English

Syllabus - What you will learn from this course

1

Section
Clock
12 hours to complete

Front-End JavaScript Frameworks Overview: Angular

In this module we get a quick introduction to front-end JavaScript frameworks, followed by an introduction to Angular. We will also learn about Angular components and their templates....
Reading
19 videos (Total 248 min), 23 readings, 2 quizzes
Video19 videos
How to Use the Learning Resources10m
What is Full-Stack Web Development?6m
Exercise (Video): Setting up Git6m
Exercise (Video): Basic Git Commands18m
Exercise (Video): Online Git Repositories12m
Node.js and NPM3m
Exercise (Video): Setting up Node.js and NPM2m
Exercise (Video): Basics of Node.js and NPM23m
Front-end JavaScript Frameworks Overview17m
Introduction to Angular7m
Exercise (Video): Getting Started with Angular9m
Angular Application Architecture Overview14m
Exercise (Video): Configuring your Angular Application27m
Angular Components10m
Exercise (Video): Angular Components Part 131m
Structural Directives5m
Exercise (Video): Angular Components Part 221m
Assignment 1 Requirements (Video): Angular Components6m
Reading23 readings
Welcome to Front-End JavaScript Frameworks: Angular: Additional Resources10m
Full Stack Web Development: The Big Picture: Objectives and Outcomes10m
Full Stack Web Development: Additional Resources10m
Setting up Your Development Environment: Git and Node: Objectives and Outcomes10m
Setting up your Development Environment10m
Exercise (Instructions): Setting up Git10m
Exercise (Instructions): Basic Git Commands10m
Exercise (Instructions): Online Git Repositories10m
Exercise (Instructions): Setting up Node.js and NPM10m
Exercise (Instructions): Basics of Node.js and NPM10m
Setting up your Development Environment: Git and Node: Additional Resources10m
Introduction to Angular: Objectives and Outcomes10m
Exercise (Instructions): Getting Started with Angular10m
Exercise (Instructions): Configuring your Angular Application10m
Introduction to Angular: Additional Resources10m
Angular Components: Objectives and Outcomes10m
Exercise (Instructions): Angular Components Part 110m
Exercise (Instructions): Angular Components Part 210m
Angular Components: Additional Resources10m
Assignment 1: Angular Components: Additional Resources10m
Ideation: Objectives and Outcomes10m
Ideation Report Template10m
Ideation: Additional Resources10m

2

Section
Clock
10 hours to complete

Angular Services, Routing and Single Page Applications

In this week, you learn about data binding in Angular. You will learn how to design basic services. You will learn about Angular router and its use in designing single page applications. You will also learn about single page applications and use Angular Router to design single page applications....
Reading
14 videos (Total 206 min), 18 readings, 2 quizzes
Video14 videos
Exercise (Video): Data Binding19m
MVC and MVVM7m
Angular Services4m
Dependency Injection6m
Exercise (Video): Angular Service Basics12m
Exercise (Video): Header and Footer24m
Angular Routing Basics16m
Exercise (Video): Angular Routing Basics22m
Single Page Applications11m
Exercise (Video): Single Page Applications Part 136m
Angular Router: Parameters10m
Exercise (Video): Single Page Applications Part 218m
Assignment 2 Requirements (Video): Angular Services, Routing and Single Page Applications3m
Reading18 readings
Data Binding: Objectives and Outcomes10m
Exercise (Instructions): Data Binding10m
Data Binding: Additional Resources10m
Angular Service Basics: Objectives and Outcomes10m
Exercise (Instructions): Angular Service Basics10m
Angular Service Basics: Additional Resources10m
Angular Routing: Objectives and Outcomes10m
Exercise (Instructions): Header and Footer10m
Exercise (Instructions): Angular Routing Basics10m
Angular Routing: Additional Resources10m
Single Page Applications: Objectives and Outcomes10m
Exercise (Instructions): Single Page Applications Part 110m
Exercise (Instructions): Single Page Applications Part 210m
Single Page Applications: Additional Resources10m
Assignment 2: Angular Services, Routing and Single Page Applications: Additional Resources10m
UI Design and Prototyping: Objectives and Outcomes10m
UI Design and Prototyping Report Template10m
UI Design and Prototyping: Additional Resources10m

3

Section
Clock
10 hours to complete

Angular Forms, Angular and Reactive JavaScript

In this module we study Angular support for forms and form validation. Both template-driven forms and reactive forms will be introduced. You will also learn about Promises. Then you will learn briefly about reactive programming, RxJs and its use in Angular....
Reading
16 videos (Total 273 min), 18 readings, 1 quiz
Video16 videos
Exercise (Video): Angular Template-driven Forms Part 137m
Angular Template-driven Form Validation8m
Exercise (Video): Angular Template-driven Forms Part 213m
Angular Reactive Forms9m
Exercise (Video): Angular Reactive Forms Part 134m
Angular Reactive Form Validation4m
Exercise (Video): Angular Reactive Forms Part 212m
Promises12m
Exercise (Video): Angular and Promise Part 111m
Exercise (Video): Angular and Promise Part 216m
Angular and RxJS22m
Exercise (Video): Angular and RxJS Part 113m
Exercise (Video): Angular and RxJS Part 229m
Exercise (Video): Angular Reactive Forms Part 331m
Assignment 3 Requirements (Video): Single Page Applications and Angular Forms9m
Reading18 readings
Angular Template-driven Forms: Objectives and Outcomes10m
Exercise (Instructions): Angular Template-driven Forms Part 110m
Exercise (Instructions): Angular Template-driven Forms Part 210m
Angular Template-driven Forms: Additional Resources10m
Angular Reactive Forms: Objectives and Outcomes10m
Exercise (Instructions): Angular Reactive Forms Part 110m
Exercise (Instructions): Angular Reactive Forms Part 210m
Angular Reactive Forms: Additional Resources10m
Angular and Promise: Objectives and Outcomes10m
Exercise (Instructions): Angular and Promise Part 110m
Exercise (Instructions): Angular and Promise Part 210m
Angular and Promise: Additional Resources10m
Angular and RxJS: Objectives and Outcomes10m
Exercise (Instructions): Angular and RxJS Part 110m
Exercise (Instructions): Angular and RxJS Part 210m
Exercise (Instructions): Angular Reactive Forms Part 310m
Angular and RxJS: Additional Resources10m
Assignment 3: Single Page Applications and Angular Forms: Additional Resources10m

4

Section
Clock
14 hours to complete

Client-Server Communication

In this module you will explore client-server communication using both Angular HTTP module and the REST API. You will get a brief introduction to animation support in Angular and create a custom attribute directive. You will also learn about testing, building and deploying Angular applications....
Reading
22 videos (Total 356 min), 27 readings, 2 quizzes
Video22 videos
Exercise (Video): Setting up a Server using json-server7m
Angular HTTP Client9m
Exercise (Video): Angular HTTP Client32m
Exercise (Video): Angular HTTP Client: Error Handling20m
Brief Representational State Transfer (REST)16m
Restangular14m
Exercise (Video): Angular and REST18m
Exercise (Video): Angular and REST: Saving Changes to Server12m
Attribute Directives6m
Exercise (Video): Custom Attribute Directives12m
Angular Animations13m
Exercise (Video): Angular Animations Part 112m
Exercise (Video): Angular Animations Part 228m
Angular Testing13m
Exercise (Video): Angular Testing49m
End-to-End Testing Angular Applications7m
Exercise (Video): End-to-End Testing Angular Applications25m
Introduction to Webpack15m
Exercise (Video): Building and Deploying the Angular Application7m
Assignment 4 Requirements (Video): Client-Server Communication10m
Conclusions3m
Reading27 readings
Client-Server Communication: Objectives and Outcomes10m
Exercise (Instructions): Setting up a Server using json-server10m
Client-Server Communication: Additional Resources10m
Angular HTTP Client: Objectives and Outcomes10m
Exercise (Instructions): Angular HTTP Client10m
Exercise (Instructions): Angular HTTP Client: Error Handling10m
Angular HTTP Client: Additional Resources10m
Angular and REST: Objectives and Outcomes10m
Exercise (Instructions): Angular and REST10m
Exercise (Instructions): Angular and REST: Saving Changes to Server10m
Angular and REST: Additional Resources10m
Animation and Directives: Objectives and Outcomes10m
Exercise (Instructions): Custom Attribute Directives10m
Exercise (Instructions): Angular Animations Part 110m
Exercise (Instructions): Angular Animations Part 210m
Animation and Directives: Additional Resources10m
Testing Angular Applications: Objectives and Outcomes10m
Exercise (Instructions): Angular Testing10m
Exercise (Instructions): End-to-End Testing Angular Applications10m
Testing Angular Applications: Additional Resources10m
Building and Deployment: Objectives and Outcomes10m
Exercise (Instructions): Building and Deploying the Angular Application10m
Building and Deployment: Additional Resources10m
Assignment 4: Client-Server Communication: Additional Resources10m
Conclusions: Additional Resources10m
Project Implementation: Objectives and Outcomes10m
Final Report Template10m
4.8
Direction Signs

38%

started a new career after completing these courses
Briefcase

83%

got a tangible career benefit from this course
Money

18%

got a pay increase or promotion

Top Reviews

By PHDec 8th 2017

Excellent course. Thanks to Josep for allowing us to give us their knowledge and wisdom in this matter, Also many thanks to coursera for being the institution that allows access to this knowledge.

By ASDec 23rd 2017

One of the excellent courses I have taken. I learned a lot from this course. Really useful and very detailed.\n\nProf. Jogesh K. Muppala is a great instructor who has advanced teaching methods.

Instructor

Avatar

Jogesh K. Muppala

Associate Professor

About The Hong Kong University of Science and Technology

HKUST - A dynamic, international research university, in relentless pursuit of excellence, leading the advance of science and technology, and educating the new generation of front-runners for Asia and the world....

Frequently Asked Questions

  • Once you enroll for a Certificate, you’ll have access to all videos, quizzes, and programming assignments (if applicable). Peer review assignments can only be submitted and reviewed once your session has begun. If you choose to explore the course without purchasing, you may not be able to access certain assignments.

  • If you pay for this course, you will have access to all of the features and content you need to earn a Course Certificate. If you complete the course successfully, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile. Note that the Course Certificate does not represent official academic credit from the partner institution offering the course.

  • Yes! Coursera provides financial aid to learners who would like to complete a course but cannot afford the course fee. To apply for aid, select "Learn more and apply" in the Financial Aid section below the "Enroll" button. You'll be prompted to complete a simple application; no other paperwork is required.

More questions? Visit the Learner Help Center