Front-End JavaScript Frameworks: Angular

Product type

Front-End JavaScript Frameworks: Angular

Coursera (CC)
Logo Coursera (CC)
Provider rating: starstarstarstar_halfstar_border 7.2 Coursera (CC) has an average rating of 7.2 (out of 6 reviews)

Need more information? Get more details on the site of the provider.

Description

When you enroll for courses through Coursera you get to choose for a paid plan or for a free plan

  • Free plan: No certicification and/or audit only. You will have access to all course materials except graded items.
  • Paid plan: Commit to earning a Certificate—it's a trusted, shareable way to showcase your new skills.

About this course: 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 …

Read the complete description

Frequently asked questions

There are no frequently asked questions yet. If you have any more questions or need help, contact our customer service.

Didn't find what you were looking for? See also: JavaScript & AJAX, Programming (general), Java, Web Accessibility, and Web Analytics.

When you enroll for courses through Coursera you get to choose for a paid plan or for a free plan

  • Free plan: No certicification and/or audit only. You will have access to all course materials except graded items.
  • Paid plan: Commit to earning a Certificate—it's a trusted, shareable way to showcase your new skills.

About this course: 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

Who is this class for: This course is aimed at students with sufficient knowledge of Web technologies like HTML, CSS and JavaScript. A good working knowledge of JavaScript, especially ES 5 is strongly recommended.

Created by:  The Hong Kong University of Science and Technology
  • Taught by:  Jogesh K. Muppala, Associate Professor

    Department of Computer Science and Engineering
Basic Info Course 2 of 5 in the Full Stack Web and Multiplatform Mobile App Development Specialization Level Intermediate Commitment 4 weeks of study, 6-8 hours/week Language English How To Pass Pass all graded assignments to complete the course. User Ratings 4.8 stars Average User Rating 4.8See what learners said Coursework

Each course is like an interactive textbook, featuring pre-recorded videos, quizzes and projects.

Help from your peers

Connect with thousands of other learners and debate ideas, discuss course material, and get help mastering concepts.

Certificates

Earn official recognition for your work, and share your success with friends, colleagues, and employers.

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.

Syllabus


WEEK 1


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.


19 videos, 23 readings expand


  1. Video: Welcome to Front-End JavaScript Frameworks: Angular
  2. Video: How to Use the Learning Resources
  3. Reading: Welcome to Front-End JavaScript Frameworks: Angular: Additional Resources
  4. Reading: Full Stack Web Development: The Big Picture: Objectives and Outcomes
  5. Video: What is Full-Stack Web Development?
  6. Reading: Full Stack Web Development: Additional Resources
  7. Reading: Setting up Your Development Environment: Git and Node: Objectives and Outcomes
  8. Reading: Setting up your Development Environment
  9. Video: Exercise (Video): Setting up Git
  10. Reading: Exercise (Instructions): Setting up Git
  11. Video: Exercise (Video): Basic Git Commands
  12. Reading: Exercise (Instructions): Basic Git Commands
  13. Video: Exercise (Video): Online Git Repositories
  14. Reading: Exercise (Instructions): Online Git Repositories
  15. Video: Node.js and NPM
  16. Video: Exercise (Video): Setting up Node.js and NPM
  17. Reading: Exercise (Instructions): Setting up Node.js and NPM
  18. Video: Exercise (Video): Basics of Node.js and NPM
  19. Reading: Exercise (Instructions): Basics of Node.js and NPM
  20. Reading: Setting up your Development Environment: Git and Node: Additional Resources
  21. Reading: Introduction to Angular: Objectives and Outcomes
  22. Video: Front-end JavaScript Frameworks Overview
  23. Video: Introduction to Angular
  24. Video: Exercise (Video): Getting Started with Angular
  25. Reading: Exercise (Instructions): Getting Started with Angular
  26. Video: Angular Application Architecture Overview
  27. Video: Exercise (Video): Configuring your Angular Application
  28. Reading: Exercise (Instructions): Configuring your Angular Application
  29. Reading: Introduction to Angular: Additional Resources
  30. Reading: Angular Components: Objectives and Outcomes
  31. Video: Angular Components
  32. Video: Exercise (Video): Angular Components Part 1
  33. Reading: Exercise (Instructions): Angular Components Part 1
  34. Video: Structural Directives
  35. Video: Exercise (Video): Angular Components Part 2
  36. Reading: Exercise (Instructions): Angular Components Part 2
  37. Reading: Angular Components: Additional Resources
  38. Video: Assignment 1 Requirements (Video): Angular Components
  39. Reading: Assignment 1: Angular Components: Additional Resources
  40. Reading: Ideation: Objectives and Outcomes
  41. Reading: Ideation Report Template
  42. Reading: Ideation: Additional Resources

Graded: Angular Components
Graded: Ideation

WEEK 2


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.


14 videos, 18 readings expand


  1. Reading: Data Binding: Objectives and Outcomes
  2. Video: Data Binding
  3. Video: Exercise (Video): Data Binding
  4. Reading: Exercise (Instructions): Data Binding
  5. Reading: Data Binding: Additional Resources
  6. Reading: Angular Service Basics: Objectives and Outcomes
  7. Video: MVC and MVVM
  8. Video: Angular Services
  9. Video: Dependency Injection
  10. Video: Exercise (Video): Angular Service Basics
  11. Reading: Exercise (Instructions): Angular Service Basics
  12. Reading: Angular Service Basics: Additional Resources
  13. Reading: Angular Routing: Objectives and Outcomes
  14. Video: Exercise (Video): Header and Footer
  15. Reading: Exercise (Instructions): Header and Footer
  16. Video: Angular Routing Basics
  17. Video: Exercise (Video): Angular Routing Basics
  18. Reading: Exercise (Instructions): Angular Routing Basics
  19. Reading: Angular Routing: Additional Resources
  20. Reading: Single Page Applications: Objectives and Outcomes
  21. Video: Single Page Applications
  22. Video: Exercise (Video): Single Page Applications Part 1
  23. Reading: Exercise (Instructions): Single Page Applications Part 1
  24. Video: Angular Router: Parameters
  25. Video: Exercise (Video): Single Page Applications Part 2
  26. Reading: Exercise (Instructions): Single Page Applications Part 2
  27. Reading: Single Page Applications: Additional Resources
  28. Video: Assignment 2 Requirements (Video): Angular Services, Routing and Single Page Applications
  29. Reading: Assignment 2: Angular Services, Routing and Single Page Applications: Additional Resources
  30. Reading: UI Design and Prototyping: Objectives and Outcomes
  31. Reading: UI Design and Prototyping Report Template
  32. Reading: UI Design and Prototyping: Additional Resources

Graded: Angular Services, Routing and Single Page Applications
Graded: UI Design and Prototyping

WEEK 3


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.


16 videos, 18 readings expand


  1. Reading: Angular Template-driven Forms: Objectives and Outcomes
  2. Video: Angular Template-driven Forms
  3. Video: Exercise (Video): Angular Template-driven Forms Part 1
  4. Reading: Exercise (Instructions): Angular Template-driven Forms Part 1
  5. Video: Angular Template-driven Form Validation
  6. Video: Exercise (Video): Angular Template-driven Forms Part 2
  7. Reading: Exercise (Instructions): Angular Template-driven Forms Part 2
  8. Reading: Angular Template-driven Forms: Additional Resources
  9. Reading: Angular Reactive Forms: Objectives and Outcomes
  10. Video: Angular Reactive Forms
  11. Video: Exercise (Video): Angular Reactive Forms Part 1
  12. Reading: Exercise (Instructions): Angular Reactive Forms Part 1
  13. Video: Angular Reactive Form Validation
  14. Video: Exercise (Video): Angular Reactive Forms Part 2
  15. Reading: Exercise (Instructions): Angular Reactive Forms Part 2
  16. Reading: Angular Reactive Forms: Additional Resources
  17. Reading: Angular and Promise: Objectives and Outcomes
  18. Video: Promises
  19. Video: Exercise (Video): Angular and Promise Part 1
  20. Reading: Exercise (Instructions): Angular and Promise Part 1
  21. Video: Exercise (Video): Angular and Promise Part 2
  22. Reading: Exercise (Instructions): Angular and Promise Part 2
  23. Reading: Angular and Promise: Additional Resources
  24. Reading: Angular and RxJS: Objectives and Outcomes
  25. Video: Angular and RxJS
  26. Video: Exercise (Video): Angular and RxJS Part 1
  27. Reading: Exercise (Instructions): Angular and RxJS Part 1
  28. Video: Exercise (Video): Angular and RxJS Part 2
  29. Reading: Exercise (Instructions): Angular and RxJS Part 2
  30. Video: Exercise (Video): Angular Reactive Forms Part 3
  31. Reading: Exercise (Instructions): Angular Reactive Forms Part 3
  32. Reading: Angular and RxJS: Additional Resources
  33. Video: Assignment 3 Requirements (Video): Single Page Applications and Angular Forms
  34. Reading: Assignment 3: Single Page Applications and Angular Forms: Additional Resources

Graded: Angular Forms and Reactive Programming

WEEK 4


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.


22 videos, 27 readings expand


  1. Reading: Client-Server Communication: Objectives and Outcomes
  2. Video: Networking Essentials
  3. Video: Exercise (Video): Setting up a Server using json-server
  4. Reading: Exercise (Instructions): Setting up a Server using json-server
  5. Reading: Client-Server Communication: Additional Resources
  6. Reading: Angular HTTP Client: Objectives and Outcomes
  7. Video: Angular HTTP Client
  8. Video: Exercise (Video): Angular HTTP Client
  9. Reading: Exercise (Instructions): Angular HTTP Client
  10. Video: Exercise (Video): Angular HTTP Client: Error Handling
  11. Reading: Exercise (Instructions): Angular HTTP Client: Error Handling
  12. Reading: Angular HTTP Client: Additional Resources
  13. Reading: Angular and REST: Objectives and Outcomes
  14. Video: Brief Representational State Transfer (REST)
  15. Video: Restangular
  16. Video: Exercise (Video): Angular and REST
  17. Reading: Exercise (Instructions): Angular and REST
  18. Video: Exercise (Video): Angular and REST: Saving Changes to Server
  19. Reading: Exercise (Instructions): Angular and REST: Saving Changes to Server
  20. Reading: Angular and REST: Additional Resources
  21. Reading: Animation and Directives: Objectives and Outcomes
  22. Video: Attribute Directives
  23. Video: Exercise (Video): Custom Attribute Directives
  24. Reading: Exercise (Instructions): Custom Attribute Directives
  25. Video: Angular Animations
  26. Video: Exercise (Video): Angular Animations Part 1
  27. Reading: Exercise (Instructions): Angular Animations Part 1
  28. Video: Exercise (Video): Angular Animations Part 2
  29. Reading: Exercise (Instructions): Angular Animations Part 2
  30. Reading: Animation and Directives: Additional Resources
  31. Reading: Testing Angular Applications: Objectives and Outcomes
  32. Video: Angular Testing
  33. Video: Exercise (Video): Angular Testing
  34. Reading: Exercise (Instructions): Angular Testing
  35. Video: End-to-End Testing Angular Applications
  36. Video: Exercise (Video): End-to-End Testing Angular Applications
  37. Reading: Exercise (Instructions): End-to-End Testing Angular Applications
  38. Reading: Testing Angular Applications: Additional Resources
  39. Reading: Building and Deployment: Objectives and Outcomes
  40. Video: Introduction to Webpack
  41. Video: Exercise (Video): Building and Deploying the Angular Application
  42. Reading: Exercise (Instructions): Building and Deploying the Angular Application
  43. Reading: Building and Deployment: Additional Resources
  44. Video: Assignment 4 Requirements (Video): Client-Server Communication
  45. Reading: Assignment 4: Client-Server Communication: Additional Resources
  46. Video: Conclusions
  47. Reading: Conclusions: Additional Resources
  48. Reading: Project Implementation: Objectives and Outcomes
  49. Reading: Final Report Template

Graded: Client-Server Communication
Graded: Project Implementation and Final Report
There are no reviews yet.

Share your review

Do you have experience with this course? Submit your review and help other people make the right choice. As a thank you for your effort we will donate £1.- to Stichting Edukans.

There are no frequently asked questions yet. If you have any more questions or need help, contact our customer service.