This course is part of the Ruby on Rails Web Development Specialization
Single Page Web Applications with AngularJS
Offered By
About this Course
4.9
1,386 ratings
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.
Skills you will gain
Unit TestingJavaScriptAngularjsWeb Development
Syllabus - What you will learn from this course
1
Section
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 (Total 152 min), 7 readings, 10 quizzes
21 videos
Welcome to Module 11m
Development Environment Setup - What We Will Need2m
Development Environment Setup for Mac, Part 16m
Development Environment Setup for Mac, Part 215m
Development Environment Setup for Windows, Part 15m
Development Environment Setup for Windows, Part 214m
Lecture 1: Why NOT Keep Things Simple?6m
Lecture 2, Part 1: Why Does Code Get Complex?5m
Lecture 2, Part 2: Why Does Code Get Complex?7m
Lecture 3: Model-View-ViewModel (MVVM)9m
Lecture 4: AngularJS Installation and First Simple App9m
Lecture 5: Sharing Data With The View Through Scope5m
Lecture 6: Implementing NameCalculator Example in AngularJS9m
Lecture 7: What’s Behind the “Magic”: Custom HTML Attributes7m
Lecture 8: Dependency Injection6m
Lecture 9: How Dependency Injection Works in Javascript8m
Lecture 10: Protecting Dependency Injection from Minification10m
Lecture 11, Part 1: Expressions and Interpolation8m
Lecture 11, Part 2: Expressions and Interpolation7m
Module 1 Wrap-upm
7 readings
How Grading and Being Late on Assignments Works10m
Recommended Books10m
CHECK OUT MY SITE!10m
ALL of the EXAMPLE CODE for this course10m
Is It Worth It To Learn Angular 1 Since Angular 2 Already Came Out?10m
Frequently Asked Questions10m
ENTER RAFFLE (ends April 23rd, 2017)10m
9 practice exercises
Quiz 1 - Very Important Quiz!10m
Quiz 24m
Quiz 32m
Quiz 44m
Quiz 56m
Quiz 62m
Quiz 74m
Quiz 84m
Quiz 92m
2
Section
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 (Total 195 min), 3 readings, 13 quizzes
25 videos
Lecture 12: Filters7m
Lecture 13, Part 1: Creating Custom Filters6m
Lecture 13, Part 2: Creating Custom Filters3m
Lecture 13, Part 3: Creating Custom Filters8m
Lecture 14, Part 1: Digest Cycle4m
Lecture 14, Part 2: Digest Cycle7m
Lecture 14, Part 3: Digest Cycle9m
Lecture 15: $digest and $apply10m
Lecture 16: 2-way, 1-way and 1-time Binding11m
Lecture 17: ng-repeat11m
Lecture 18: Filtered ng-repeat11m
Lecture 19, Part 1: Prototypal Inheritance5m
Lecture 19, Part 2: Prototypal Inheritance13m
Lecture 19, Part 3: Scope Inheritance7m
Lecture 19, Part 4: Scope Inheritance10m
Lecture 19, Part 5: Controller As Syntax8m
Lecture 20, Part 1: Custom Services4m
Lecture 20, Part 2: Custom Services11m
Lecture 21, Part 1: Custom Services with .factory()7m
Lecture 21, Part 2: Custom Services with .factory()9m
Lecture 22, Part 1: Custom Services with .provider()5m
Lecture 22: Part 2: Custom Services with .provider()8m
Lecture 23: ng-if, ng-show and ng-hide7m
Module 2 Wrap-Up1m
3 readings
Recommended Books10m
CONNECT WITH ME!10m
Frequently Asked Questions10m
12 practice exercises
Quiz 104m
Quiz 116m
Quiz 122m
Quiz 132m
Quiz 144m
Quiz 152m
Quiz 166m
Quiz 172m
Quiz 184m
Quiz 194m
Quiz 204m
Quiz 212m
3
Section
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 (Total 156 min), 3 readings, 11 quizzes
19 videos
Lecture 24, Part 1: Asynchronous Behavior with Promises and $q5m
Lecture 24, Part 2: Asynchronous Behavior with Promises and $q15m
Lecture 25, Part 1: Ajax with $http Service5m
Lecture 25, Part 2: Ajax with $http Service14m
Lecture 26, Part 1: Directives: Dynamic HTML6m
Lecture 26, Part 2: Directives: Dynamic HTML12m
Lecture 27: restrict Property11m
Lecture 28, Part 1: Directive’s Isolate Scope: “=” and “@”8m
Lecture 28, Part 2: Directive’s Isolate Scope: “=” and “@”9m
Lecture 29, Part 1: Using Controllers Inside Directives5m
Lecture 29, Part 2: Using Controllers Inside Directives10m
Lecture 30, Part 1: Directive APIs and “&”7m
Lecture 30, Part 2: Directive APIs and “&”12m
Lecture 31, Part 1: Manipulating the DOM with link4m
Lecture 31, Part 2: Manipulating the DOM with link14m
Lecture 32, Part 1: Using Directive’s transclude to Wrap Other Elements2m
Lecture 32, Part 2: Using Directive’s transclude to Wrap Other Elements5m
Module 3 Wrap-Up1m
3 readings
Recommended Books10m
ENTER RAFFLE (ends April 23rd, 2017)10m
Frequently Asked Questions10m
10 practice exercises
Quiz 222m
Quiz 236m
Quiz 244m
Quiz 254m
Quiz 264m
Quiz 276m
Quiz 288m
Quiz 294m
Quiz 306m
Quiz 312m
4
Section
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 (Total 164 min), 3 readings, 10 quizzes
22 videos
Lecture 33, Part 1: Components & Component-Based Architecture7m
Lecture 33, Part 2: Components & Component-Based Architecture8m
Lecture 33, Part 3: Components & Component-Based Architecture9m
Lecture 33, Part 4: Components & Component-Based Architecture9m
Lecture 34, Part 1: AngularJS Event System8m
Lecture 34, Part 2: AngularJS Event System14m
Lecture 35, Part 1: Modules7m
Lecture 35, Part 2: Modules10m
Lecture 36, Part 1: Routing12m
Lecture 36, Part 2: Routing15m
Lecture 37, Part 1: Routing State with Controller2m
Lecture 37, Part 2: Routing State with Controller7m
Lecture 38, Part 1: Routing State with resolve3m
Lecture 38, Part 2: Routing State with resolve5m
Lecture 39, Part 1: Routing State with URL Parameters2m
Lecture 39, Part 2: Routing State with URL Parameters11m
Lecture 40, Part 1: Routing State with Nested Views2m
Lecture 40, Part 2: Routing State with Nested Views9m
Lecture 41, Part 1: Router State Transition Events2m
Lecture 41, Part 2: Router State Transition Events6m
Module 4 Wrap-Up1m
3 readings
Recommended Books10m
CONNECT WITH ME!10m
Frequently Asked Questions10m
9 practice exercises
Quiz 328m
Quiz 336m
Quiz 346m
Quiz 354m
Quiz 362m
Quiz 372m
Quiz 382m
Quiz 394m
Quiz 404m
4.9
33%
83%
Top Reviews
By SS•Jan 30th 2017
Very expressively explained. I like the way that you explain it by showing us what you are doing as well. In that way, it is easy for me to grasp the contents of the lecture. Thank you for the course.
By NO•Sep 18th 2016
My special "thank you" for going deep inside the subject with your "how?" and "why?", instead of just instructing us "do this and that". It's a real pleasure to participate in your class, thank you!
Instructor
Yaakov Chaikin
Adjunct Professor, Graduate Computer ScienceWhiting School of Engineering
About 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.
About the Ruby on Rails Web Development Specialization
This Specialization covers the fundamentals of web development with Ruby on Rails. You’ll learn everything you need to develop your own web application using Ruby on Rails, SQL and NoSQL databases, and HTML/CSS, and Javascript. We will also touch on advanced topics such as security, services using HTTP/RESTful access patterns, and user access and user experience from multiple device platforms. In the final Capstone Project, you’ll apply your skills to develop a web application that hosts uploaded photos and displays them using a map.
Frequently Asked Questions
When will I have access to the lectures and assignments?
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.
What will I get if I subscribe to this Specialization?
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile. If you only want to read and view the course content, you can audit the course for free.
What is the refund policy?
Is financial aid available?
More questions? Visit the Learner Help Center.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
