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 |
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
- Video: Welcome to Front-End JavaScript Frameworks: Angular
- Video: How to Use the Learning Resources
- Reading: Welcome to Front-End JavaScript Frameworks: Angular: Additional Resources
- Reading: Full Stack Web Development: The Big Picture: Objectives and Outcomes
- Video: What is Full-Stack Web Development?
- Reading: Full Stack Web Development: Additional Resources
- Reading: Setting up Your Development Environment: Git and Node: Objectives and Outcomes
- Reading: Setting up your Development Environment
- Video: Exercise (Video): Setting up Git
- Reading: Exercise (Instructions): Setting up Git
- Video: Exercise (Video): Basic Git Commands
- Reading: Exercise (Instructions): Basic Git Commands
- Video: Exercise (Video): Online Git Repositories
- Reading: Exercise (Instructions): Online Git Repositories
- Video: Node.js and NPM
- Video: Exercise (Video): Setting up Node.js and NPM
- Reading: Exercise (Instructions): Setting up Node.js and NPM
- Video: Exercise (Video): Basics of Node.js and NPM
- Reading: Exercise (Instructions): Basics of Node.js and NPM
- Reading: Setting up your Development Environment: Git and Node: Additional Resources
- Reading: Introduction to Angular: Objectives and Outcomes
- Video: Front-end JavaScript Frameworks Overview
- Video: Introduction to Angular
- Video: Exercise (Video): Getting Started with Angular
- Reading: Exercise (Instructions): Getting Started with Angular
- Video: Angular Application Architecture Overview
- Video: Exercise (Video): Configuring your Angular Application
- Reading: Exercise (Instructions): Configuring your Angular Application
- Reading: Introduction to Angular: Additional Resources
- Reading: Angular Components: Objectives and Outcomes
- Video: Angular Components
- Video: Exercise (Video): Angular Components Part 1
- Reading: Exercise (Instructions): Angular Components Part 1
- Video: Structural Directives
- Video: Exercise (Video): Angular Components Part 2
- Reading: Exercise (Instructions): Angular Components Part 2
- Reading: Angular Components: Additional Resources
- Video: Assignment 1 Requirements (Video): Angular Components
- Reading: Assignment 1: Angular Components: Additional Resources
- Reading: Ideation: Objectives and Outcomes
- Reading: Ideation Report Template
- 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
- Reading: Data Binding: Objectives and Outcomes
- Video: Data Binding
- Video: Exercise (Video): Data Binding
- Reading: Exercise (Instructions): Data Binding
- Reading: Data Binding: Additional Resources
- Reading: Angular Service Basics: Objectives and Outcomes
- Video: MVC and MVVM
- Video: Angular Services
- Video: Dependency Injection
- Video: Exercise (Video): Angular Service Basics
- Reading: Exercise (Instructions): Angular Service Basics
- Reading: Angular Service Basics: Additional Resources
- Reading: Angular Routing: Objectives and Outcomes
- Video: Exercise (Video): Header and Footer
- Reading: Exercise (Instructions): Header and Footer
- Video: Angular Routing Basics
- Video: Exercise (Video): Angular Routing Basics
- Reading: Exercise (Instructions): Angular Routing Basics
- Reading: Angular Routing: Additional Resources
- Reading: Single Page Applications: Objectives and Outcomes
- Video: Single Page Applications
- Video: Exercise (Video): Single Page Applications Part 1
- Reading: Exercise (Instructions): Single Page Applications Part 1
- Video: Angular Router: Parameters
- Video: Exercise (Video): Single Page Applications Part 2
- Reading: Exercise (Instructions): Single Page Applications Part 2
- Reading: Single Page Applications: Additional Resources
- Video: Assignment 2 Requirements (Video): Angular Services, Routing and Single Page Applications
- Reading: Assignment 2: Angular Services, Routing and Single Page Applications: Additional Resources
- Reading: UI Design and Prototyping: Objectives and Outcomes
- Reading: UI Design and Prototyping Report Template
- 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
- Reading: Angular Template-driven Forms: Objectives and Outcomes
- Video: Angular Template-driven Forms
- Video: Exercise (Video): Angular Template-driven Forms Part 1
- Reading: Exercise (Instructions): Angular Template-driven Forms Part 1
- Video: Angular Template-driven Form Validation
- Video: Exercise (Video): Angular Template-driven Forms Part 2
- Reading: Exercise (Instructions): Angular Template-driven Forms Part 2
- Reading: Angular Template-driven Forms: Additional Resources
- Reading: Angular Reactive Forms: Objectives and Outcomes
- Video: Angular Reactive Forms
- Video: Exercise (Video): Angular Reactive Forms Part 1
- Reading: Exercise (Instructions): Angular Reactive Forms Part 1
- Video: Angular Reactive Form Validation
- Video: Exercise (Video): Angular Reactive Forms Part 2
- Reading: Exercise (Instructions): Angular Reactive Forms Part 2
- Reading: Angular Reactive Forms: Additional Resources
- Reading: Angular and Promise: Objectives and Outcomes
- Video: Promises
- Video: Exercise (Video): Angular and Promise Part 1
- Reading: Exercise (Instructions): Angular and Promise Part 1
- Video: Exercise (Video): Angular and Promise Part 2
- Reading: Exercise (Instructions): Angular and Promise Part 2
- Reading: Angular and Promise: Additional Resources
- Reading: Angular and RxJS: Objectives and Outcomes
- Video: Angular and RxJS
- Video: Exercise (Video): Angular and RxJS Part 1
- Reading: Exercise (Instructions): Angular and RxJS Part 1
- Video: Exercise (Video): Angular and RxJS Part 2
- Reading: Exercise (Instructions): Angular and RxJS Part 2
- Video: Exercise (Video): Angular Reactive Forms Part 3
- Reading: Exercise (Instructions): Angular Reactive Forms Part 3
- Reading: Angular and RxJS: Additional Resources
- Video: Assignment 3 Requirements (Video): Single Page Applications and Angular Forms
- 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
- Reading: Client-Server Communication: Objectives and Outcomes
- Video: Networking Essentials
- Video: Exercise (Video): Setting up a Server using json-server
- Reading: Exercise (Instructions): Setting up a Server using json-server
- Reading: Client-Server Communication: Additional Resources
- Reading: Angular HTTP Client: Objectives and Outcomes
- Video: Angular HTTP Client
- Video: Exercise (Video): Angular HTTP Client
- Reading: Exercise (Instructions): Angular HTTP Client
- Video: Exercise (Video): Angular HTTP Client: Error Handling
- Reading: Exercise (Instructions): Angular HTTP Client: Error Handling
- Reading: Angular HTTP Client: Additional Resources
- Reading: Angular and REST: Objectives and Outcomes
- Video: Brief Representational State Transfer (REST)
- Video: Restangular
- Video: Exercise (Video): Angular and REST
- Reading: Exercise (Instructions): Angular and REST
- Video: Exercise (Video): Angular and REST: Saving Changes to Server
- Reading: Exercise (Instructions): Angular and REST: Saving Changes to Server
- Reading: Angular and REST: Additional Resources
- Reading: Animation and Directives: Objectives and Outcomes
- Video: Attribute Directives
- Video: Exercise (Video): Custom Attribute Directives
- Reading: Exercise (Instructions): Custom Attribute Directives
- Video: Angular Animations
- Video: Exercise (Video): Angular Animations Part 1
- Reading: Exercise (Instructions): Angular Animations Part 1
- Video: Exercise (Video): Angular Animations Part 2
- Reading: Exercise (Instructions): Angular Animations Part 2
- Reading: Animation and Directives: Additional Resources
- Reading: Testing Angular Applications: Objectives and Outcomes
- Video: Angular Testing
- Video: Exercise (Video): Angular Testing
- Reading: Exercise (Instructions): Angular Testing
- Video: End-to-End Testing Angular Applications
- Video: Exercise (Video): End-to-End Testing Angular Applications
- Reading: Exercise (Instructions): End-to-End Testing Angular Applications
- Reading: Testing Angular Applications: Additional Resources
- Reading: Building and Deployment: Objectives and Outcomes
- Video: Introduction to Webpack
- Video: Exercise (Video): Building and Deploying the Angular Application
- Reading: Exercise (Instructions): Building and Deploying the Angular Application
- Reading: Building and Deployment: Additional Resources
- Video: Assignment 4 Requirements (Video): Client-Server Communication
- Reading: Assignment 4: Client-Server Communication: Additional Resources
- Video: Conclusions
- Reading: Conclusions: Additional Resources
- Reading: Project Implementation: Objectives and Outcomes
- Reading: Final Report Template
Graded: Client-Server Communication
Graded: Project Implementation and Final Report
FAQs
How It Works
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.
Creators
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.
Pricing
| Audit | Purchase Course | |
|---|---|---|
| Access to course materials | Available | Available |
| Access to graded materials | Not available | Available |
| Receive a final grade | Not available | Available |
| Earn a shareable Course Certificate | Not available | Available |
Ratings and Reviews
Very Effective and useful course
very good course
great course to learn Angular
Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.
© 2017 Coursera Inc. All rights reserved.
CL
nice