Single Page Web Applications with AngularJS

Product type

Single Page Web Applications with AngularJS

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: Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of Angula…

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: Web Accessibility, Web Analytics, IT Security, Digital Publishing & Editing, and (X)HTML & CSS.

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: Do you want to write powerful, maintainable, and testable front end applications faster and with less code? Then consider joining this course to gain skills in one of the most popular Single Page Application (SPA) frameworks today, AngularJS. Developed and backed by Google, AngularJS is a very marketable skill to acquire. In this course, we will explore the core design of AngularJS 1.x (latest version of AngularJS 1), its components and code organization techniques. We will enhance the functionality of our web app by utilizing dependency injection to reuse existing services as well as write our own. We will create reusable HTML components that take advantage of AngularJS data binding as well as extend HTML syntax with a very powerful feature of AngularJS called directives. We’ll set up routing so our SPA can have multiple views. We will also learn how to unit test our functionality. At the end of this course, you will build a fully functional, well organized and tested web application using AngularJS and deploy it to the cloud.

Created by:  Johns Hopkins University
  • Taught by:  Yaakov Chaikin, Adjunct Professor, Graduate Computer Science

    Whiting School of Engineering
Basic Info Course 5 of 6 in the Ruby on Rails Web Development Specialization Level Intermediate Language English How To Pass Pass all graded assignments to complete the course. User Ratings 4.9 stars Average User Rating 4.9See 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.

Johns Hopkins University The mission of The Johns Hopkins University is to educate its students and cultivate their capacity for life-long learning, to foster independent and original research, and to bring the benefits of discovery to the world.

Syllabus


WEEK 1


Introduction to AngularJS



In this module, we are going to start by going over how grading works for this course, will introduce some recommended books, as well as give you the information on how to find all of the source code that you will see throughout the course. We will then dive into the development environment setup for both Mac and Windows. The core of this module will be the introduction not only to the basics of AngularJS, but more importantly, the concepts that back AngularJS as a good solution for developing front-end web applications. To become a good software developer and not just with AngularJS, you will need to understand these concepts. But for becoming a good AngularJS developer, these concepts are essential, because they will allow you to understand the issues the framework is addressing and therefore get a good grasp on the solutions AngularJS is offering.


21 videos, 7 readings, 9 practice quizzes expand


  1. Video: Course Introduction
  2. Video: Welcome to Module 1
  3. Reading: How Grading and Being Late on Assignments Works
  4. Reading: Recommended Books
  5. Reading: CHECK OUT MY SITE!
  6. Reading: ALL of the EXAMPLE CODE for this course
  7. Reading: Is It Worth It To Learn Angular 1 Since Angular 2 Already Came Out?
  8. Practice Quiz: Quiz 1 - Very Important Quiz!
  9. Video: Development Environment Setup - What We Will Need
  10. Video: Development Environment Setup for Mac, Part 1
  11. Video: Development Environment Setup for Mac, Part 2
  12. Video: Development Environment Setup for Windows, Part 1
  13. Video: Development Environment Setup for Windows, Part 2
  14. Practice Quiz: Quiz 2
  15. Video: Lecture 1: Why NOT Keep Things Simple?
  16. Practice Quiz: Quiz 3
  17. Video: Lecture 2, Part 1: Why Does Code Get Complex?
  18. Video: Lecture 2, Part 2: Why Does Code Get Complex?
  19. Practice Quiz: Quiz 4
  20. Video: Lecture 3: Model-View-ViewModel (MVVM)
  21. Practice Quiz: Quiz 5
  22. Video: Lecture 4: AngularJS Installation and First Simple App
  23. Practice Quiz: Quiz 6
  24. Video: Lecture 5: Sharing Data With The View Through Scope
  25. Video: Lecture 6: Implementing NameCalculator Example in AngularJS
  26. Video: Lecture 7: What’s Behind the “Magic”: Custom HTML Attributes
  27. Practice Quiz: Quiz 7
  28. Video: Lecture 8: Dependency Injection
  29. Video: Lecture 9: How Dependency Injection Works in Javascript
  30. Practice Quiz: Quiz 8
  31. Video: Lecture 10: Protecting Dependency Injection from Minification
  32. Practice Quiz: Quiz 9
  33. Video: Lecture 11, Part 1: Expressions and Interpolation
  34. Video: Lecture 11, Part 2: Expressions and Interpolation
  35. Reading: Frequently Asked Questions
  36. Reading: ENTER RAFFLE (ends April 23rd, 2017)
  37. Video: Module 1 Wrap-up

Graded: Module 1 Coding Assignment

WEEK 2


Module 2 - Filters, Digest Cycle, Controller Inheritance, and Custom Services



We will start this module by learning how to use Angular filters to manipulate our data into the format we want and learn how to create our own custom filters. We will then dive deep into the digest cycle, which is the process AngularJS uses to magically update our web page with the bound data from our ViewModel or the controller. Understanding this process is crucial in getting comfortable with AngularJS. We'll also see some cases where we'll need to assist that process somewhat and understand why that is. After that, we'll learn one of the most fundamental concepts in the Javascript programming language, which is Prototypal Inheritance. Clear understanding of that topic is a must before we talk about inheritance between AngularJS controllers in our application. We'll finish off the module by learning how to create our own custom Angular services as well as how to configure them. With custom Angular services we'll be able to share data across different controllers or other components in our application. We will also learn a few useful Angular directives that allow us to place looping and conditional logic direction into our HTML. You'll see that by the end of this module, you'll have the skills to create a fairly sophisticated web application that starts to use some of the more advanced software architecture techniques.


25 videos, 3 readings, 12 practice quizzes expand


  1. Video: Welcome to Module 2
  2. Reading: Recommended Books
  3. Video: Lecture 12: Filters
  4. Practice Quiz: Quiz 10
  5. Video: Lecture 13, Part 1: Creating Custom Filters
  6. Video: Lecture 13, Part 2: Creating Custom Filters
  7. Video: Lecture 13, Part 3: Creating Custom Filters
  8. Practice Quiz: Quiz 11
  9. Video: Lecture 14, Part 1: Digest Cycle
  10. Practice Quiz: Quiz 12
  11. Video: Lecture 14, Part 2: Digest Cycle
  12. Video: Lecture 14, Part 3: Digest Cycle
  13. Practice Quiz: Quiz 13
  14. Video: Lecture 15: $digest and $apply
  15. Video: Lecture 16: 2-way, 1-way and 1-time Binding
  16. Practice Quiz: Quiz 14
  17. Video: Lecture 17: ng-repeat
  18. Video: Lecture 18: Filtered ng-repeat
  19. Practice Quiz: Quiz 15
  20. Video: Lecture 19, Part 1: Prototypal Inheritance
  21. Video: Lecture 19, Part 2: Prototypal Inheritance
  22. Practice Quiz: Quiz 16
  23. Video: Lecture 19, Part 3: Scope Inheritance
  24. Video: Lecture 19, Part 4: Scope Inheritance
  25. Video: Lecture 19, Part 5: Controller As Syntax
  26. Reading: CONNECT WITH ME!
  27. Practice Quiz: Quiz 17
  28. Video: Lecture 20, Part 1: Custom Services
  29. Video: Lecture 20, Part 2: Custom Services
  30. Practice Quiz: Quiz 18
  31. Video: Lecture 21, Part 1: Custom Services with .factory()
  32. Video: Lecture 21, Part 2: Custom Services with .factory()
  33. Practice Quiz: Quiz 19
  34. Video: Lecture 22, Part 1: Custom Services with .provider()
  35. Video: Lecture 22: Part 2: Custom Services with .provider()
  36. Practice Quiz: Quiz 20
  37. Video: Lecture 23: ng-if, ng-show and ng-hide
  38. Reading: Frequently Asked Questions
  39. Video: Module 2 Wrap-Up
  40. Practice Quiz: Quiz 21

Graded: Module 2 Assignment

WEEK 3


Week 3 - Promises, Ajax, and Custom Directives



Welcome to module 3! In this module, we go over a lot of essential features of AngularJS. We will start with learning about the Promise API. While Promises are essential to Angular, this topic reaches far beyond Angular. It's really an essential topic to understanding modern web development with Javascript. We will also learn about making calls to the server through the built in Angular service called the HTTP service. We'll finish off the module by spending a considerable amount of time on THE crown feature of AngularJS: directives. Directives are really at the core of the entire framework. They not only allow us to extend the functionality of existing HTML elements, which is already pretty amazing in an of itself, but they also allow us to create our own element with custom view and custom behavior. Pretty exciting stuff!


19 videos, 3 readings, 10 practice quizzes expand


  1. Video: Welcome to Module 3
  2. Reading: Recommended Books
  3. Video: Lecture 24, Part 1: Asynchronous Behavior with Promises and $q
  4. Practice Quiz: Quiz 22
  5. Video: Lecture 24, Part 2: Asynchronous Behavior with Promises and $q
  6. Practice Quiz: Quiz 23
  7. Video: Lecture 25, Part 1: Ajax with $http Service
  8. Practice Quiz: Quiz 24
  9. Video: Lecture 25, Part 2: Ajax with $http Service
  10. Reading: ENTER RAFFLE (ends April 23rd, 2017)
  11. Practice Quiz: Quiz 25
  12. Video: Lecture 26, Part 1: Directives: Dynamic HTML
  13. Video: Lecture 26, Part 2: Directives: Dynamic HTML
  14. Practice Quiz: Quiz 26
  15. Video: Lecture 27: restrict Property
  16. Video: Lecture 28, Part 1: Directive’s Isolate Scope: “=” and “@”
  17. Video: Lecture 28, Part 2: Directive’s Isolate Scope: “=” and “@”
  18. Practice Quiz: Quiz 27
  19. Video: Lecture 29, Part 1: Using Controllers Inside Directives
  20. Video: Lecture 29, Part 2: Using Controllers Inside Directives
  21. Practice Quiz: Quiz 28
  22. Video: Lecture 30, Part 1: Directive APIs and “&”
  23. Video: Lecture 30, Part 2: Directive APIs and “&”
  24. Practice Quiz: Quiz 29
  25. Video: Lecture 31, Part 1: Manipulating the DOM with link
  26. Video: Lecture 31, Part 2: Manipulating the DOM with link
  27. Practice Quiz: Quiz 30
  28. Video: Lecture 32, Part 1: Using Directive’s transclude to Wrap Other Elements
  29. Video: Lecture 32, Part 2: Using Directive’s transclude to Wrap Other Elements
  30. Practice Quiz: Quiz 31
  31. Reading: Frequently Asked Questions
  32. Video: Module 3 Wrap-Up

Graded: Module 3 Assignment

WEEK 4


Module 4 - Components, Events, Modules, and Routing



In this module, we start by introducing the idea of Component-based architecture. We will then delve into the AngularJS component API. The component API is something that was just recently added into Angular 1 and it's not only supposed to improve your application through the use of Component-based architecture, but also prepare you for an upgrade to Angular version 2, which uses components almost exclusively. We will then learn about the AngularJS event system and how to split up our application into smaller modules that can then be glued together to produce our final application. We'll finish off the module by diving fairly deep into Routing between views in your application and, specifically, into the use of the ui-router module, which is one of the most popular open source routing solutions within the AngularJS ecosystem. In fact, it's so popular that even the main Google documentation for routing in Angular links to ui-router. Routing is a very important topic. Without it, your Single Page Application is stuck displaying just 1 view, without an elegant way to display other views.


22 videos, 3 readings, 9 practice quizzes expand


  1. Video: Welcome to Module 4
  2. Reading: Recommended Books
  3. Video: Lecture 33, Part 1: Components & Component-Based Architecture
  4. Video: Lecture 33, Part 2: Components & Component-Based Architecture
  5. Video: Lecture 33, Part 3: Components & Component-Based Architecture
  6. Video: Lecture 33, Part 4: Components & Component-Based Architecture
  7. Reading: CONNECT WITH ME!
  8. Practice Quiz: Quiz 32
  9. Video: Lecture 34, Part 1: AngularJS Event System
  10. Video: Lecture 34, Part 2: AngularJS Event System
  11. Practice Quiz: Quiz 33
  12. Video: Lecture 35, Part 1: Modules
  13. Video: Lecture 35, Part 2: Modules
  14. Practice Quiz: Quiz 34
  15. Video: Lecture 36, Part 1: Routing
  16. Video: Lecture 36, Part 2: Routing
  17. Practice Quiz: Quiz 35
  18. Video: Lecture 37, Part 1: Routing State with Controller
  19. Video: Lecture 37, Part 2: Routing State with Controller
  20. Practice Quiz: Quiz 36
  21. Video: Lecture 38, Part 1: Routing State with resolve
  22. Video: Lecture 38, Part 2: Routing State with resolve
  23. Practice Quiz: Quiz 37
  24. Video: Lecture 39, Part 1: Routing State with URL Parameters
  25. Video: Lecture 39, Part 2: Routing State with URL Parameters
  26. Practice Quiz: Quiz 38
  27. Video: Lecture 40, Part 1: Routing State with Nested Views
  28. Video: Lecture 40, Part 2: Routing State with Nested Views
  29. Practice Quiz: Quiz 39
  30. Video: Lecture 41, Part 1: Router State Transition Events
  31. Video: Lecture 41, Part 2: Router State Transition Events
  32. Practice Quiz: Quiz 40
  33. Reading: Frequently Asked Questions
  34. Video: Module 4 Wrap-Up

Graded: Module 4 Assignment

WEEK 5


Module 5 - Form Validation, Testing, and Restaurant Site Development



Welcome to module 5! This is the last module in the course. We'll start this module by learning just how easy it is to validate forms with Angular. We will then delve into unit testing our AngularJS code. We will go over how to set up tests for every type of major Angular artifact: controller, service, directive, and component, as well as how to test services that access the network through the HTTP service. However, the last part of the module is the most fun. We will take the site that was developed for our real client in my previous course and re-write the entire thing using AngularJS. However, the coding fun doesn't have to stop there. After you finish the required part of the course, you can move on to the optional bonus part where we take our newly developed AngularJS application and enhance with it even more features that will allow the restaurant owners to administer their own data. We'll go over setting up authentication, editing restaurant menu items, uploading menu item pictures and so on.


32 videos, 6 readings, 7 practice quizzes expand


  1. Video: Welcome to Module 5
  2. Reading: Recommended Books
  3. Video: Lecture 42, Part 1: Form Validation
  4. Video: Lecture 42, Part 2: Form Validation
  5. Practice Quiz: Quiz 41
  6. Video: Lecture 43, Part 1: Testing Javascript with Jasmine
  7. Video: Lecture 43, Part 2: Testing Javascript with Jasmine
  8. Reading: ENTER RAFFLE (ends April 23rd, 2017)
  9. Practice Quiz: Quiz 42
  10. Video: Lecture 44, Part 1: Testing AngularJS Controllers
  11. Video: Lecture 44, Part 2: Testing AngularJS Controllers
  12. Video: Lecture 44, Part 3: Testing AngularJS Controllers
  13. Video: Lecture 44, Part 4: Testing AngularJS Controllers
  14. Practice Quiz: Quiz 43
  15. Video: Lecture 45, Part 1: Testing AngularJS Services and $http
  16. Video: Lecture 45, Part 2: Testing AngularJS Services and $http
  17. Practice Quiz: Quiz 44
  18. Video: Lecture 46, Part 1: Testing AngularJS Directives
  19. Video: Lecture 46, Part 2: Testing AngularJS Directives
  20. Practice Quiz: Quiz 45
  21. Video: Lecture 47, Part 1: Testing AngularJS Components
  22. Video: Lecture 47, Part 2: Testing AngularJS Components
  23. Practice Quiz: Quiz 46
  24. Video: (OPTIONAL) Lecture 48, Part 1: Visit With The Client
  25. Video: (OPTIONAL) Lecture 48, Part 2: Visit With The Client
  26. Reading: CONNECT WITH ME!
  27. Video: (OPTIONAL) Lecture 49, Part 1: Non-AngularJS Website Overview
  28. Video: (OPTIONAL) Lecture 49, Part 2: Non-AngularJS Website Overview
  29. Video: Lecture 50 (Mac Version): Restaurant Server Setup
  30. Video: Lecture 50 (Windows Version): Restaurant Server Setup
  31. Video: Lecture 51, Part 1: Basic Structure of the Restaurant App
  32. Video: Lecture 51, Part 2: Basic Structure of the Restaurant App
  33. Video: Lecture 52: Coding Up a Loader/Spinner
  34. Video: Lecture 53: Coding Up $http Interceptor
  35. Practice Quiz: Quiz 47
  36. Video: Lecture 54: Coding Up Menu Categories View - Part 1
  37. Video: Lecture 55: Coding Up Menu Categories View - Part 2
  38. Video: Lecture 56: Coding Up Menu Categories View - Part 3
  39. Video: Lecture 57: Single Category View - Part 1
  40. Video: Lecture 58: Single Category View - Part 2
  41. Video: Lecture 59: Single Category View - Part 3
  42. Reading: Frequently Asked Questions
  43. Reading: Keep In Touch with Me! (LINKS)
  44. Video: Course Wrap-Up
  45. Reading: CONNECT WITH ME!

Graded: Module 5 Assignment
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.