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.
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.
What's included
21 videos8 readings8 assignments
Show info about module content
21 videos•Total 152 minutes
Course Introduction•4 minutes
Welcome to Module 1•1 minute
Development Environment Setup - What We Will Need•3 minutes
Development Environment Setup for Mac, Part 1•6 minutes
Development Environment Setup for Mac, Part 2•15 minutes
Development Environment Setup for Windows, Part 1•6 minutes
Development Environment Setup for Windows, Part 2•15 minutes
Lecture 1: Why NOT Keep Things Simple?•6 minutes
Lecture 2, Part 1: Why Does Code Get Complex?•5 minutes
Lecture 2, Part 2: Why Does Code Get Complex?•7 minutes
Lecture 3: Model-View-ViewModel (MVVM)•9 minutes
Lecture 4: AngularJS Installation and First Simple App•9 minutes
Lecture 5: Sharing Data With The View Through Scope•6 minutes
Lecture 6: Implementing NameCalculator Example in AngularJS•9 minutes
Lecture 7: What’s Behind the “Magic”: Custom HTML Attributes•8 minutes
Lecture 8: Dependency Injection•7 minutes
Lecture 9: How Dependency Injection Works in Javascript•8 minutes
Lecture 10: Protecting Dependency Injection from Minification•10 minutes
Lecture 11, Part 1: Expressions and Interpolation•8 minutes
Lecture 11, Part 2: Expressions and Interpolation•7 minutes
Module 1 Wrap-up•1 minute
8 readings•Total 63 minutes
How Grading and Being Late on Assignments Works•10 minutes
ALL of the EXAMPLE CODE for this course•10 minutes
Is It Worth It To Learn Angular 1 Since Angular 2 Already Came Out?•10 minutes
Before You Begin: Set Up Your Development Environment•3 minutes
Key Points: Mac Development Environment Setup•5 minutes
Key Points: Windows Development Environment Setup•5 minutes
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.
What's included
25 videos3 readings13 assignments
Show info about module content
25 videos•Total 195 minutes
Welcome to Module 2•2 minutes
Lecture 12: Filters•8 minutes
Lecture 13, Part 1: Creating Custom Filters•6 minutes
Lecture 13, Part 2: Creating Custom Filters•4 minutes
Lecture 13, Part 3: Creating Custom Filters•9 minutes
Lecture 14, Part 1: Digest Cycle•4 minutes
Lecture 14, Part 2: Digest Cycle•7 minutes
Lecture 14, Part 3: Digest Cycle•9 minutes
Lecture 15: $digest and $apply•10 minutes
Lecture 16: 2-way, 1-way and 1-time Binding•12 minutes
Lecture 17: ng-repeat•12 minutes
Lecture 18: Filtered ng-repeat•11 minutes
Lecture 19, Part 1: Prototypal Inheritance•5 minutes
Lecture 19, Part 2: Prototypal Inheritance•13 minutes
Lecture 19, Part 3: Scope Inheritance•7 minutes
Lecture 19, Part 4: Scope Inheritance•11 minutes
Lecture 19, Part 5: Controller As Syntax•9 minutes
Lecture 20, Part 1: Custom Services•4 minutes
Lecture 20, Part 2: Custom Services•12 minutes
Lecture 21, Part 1: Custom Services with .factory()•7 minutes
Lecture 21, Part 2: Custom Services with .factory()•9 minutes
Lecture 22, Part 1: Custom Services with .provider()•5 minutes
Lecture 22: Part 2: Custom Services with .provider()•9 minutes
Lecture 23: ng-if, ng-show and ng-hide•7 minutes
Module 2 Wrap-Up•2 minutes
3 readings•Total 22 minutes
Recommended Books•10 minutes
CONNECT WITH ME!•2 minutes
Frequently Asked Questions•10 minutes
13 assignments•Total 390 minutes
Quiz 8•30 minutes
Quiz 9•30 minutes
Quiz 10•30 minutes
Quiz 11•30 minutes
Quiz 12•30 minutes
Quiz 13•30 minutes
Quiz 14•30 minutes
Quiz 15•30 minutes
Quiz 16•30 minutes
Quiz 17•30 minutes
Quiz 18•30 minutes
Quiz 19•30 minutes
Module 2 Assignment•30 minutes
Week 3 - Promises, Ajax, and Custom Directives
Module 3•9 hours to complete
Module details
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!
What's included
19 videos3 readings11 assignments
Show info about module content
19 videos•Total 156 minutes
Welcome to Module 3•1 minute
Lecture 24, Part 1: Asynchronous Behavior with Promises and $q•6 minutes
Lecture 24, Part 2: Asynchronous Behavior with Promises and $q•15 minutes
Lecture 25, Part 1: Ajax with $http Service•5 minutes
Lecture 25, Part 2: Ajax with $http Service•15 minutes
Lecture 26, Part 1: Directives: Dynamic HTML•7 minutes
Lecture 26, Part 2: Directives: Dynamic HTML•13 minutes
Lecture 27: restrict Property•12 minutes
Lecture 28, Part 1: Directive’s Isolate Scope: “=” and “@”•9 minutes
Lecture 28, Part 2: Directive’s Isolate Scope: “=” and “@”•10 minutes
Lecture 29, Part 1: Using Controllers Inside Directives•5 minutes
Lecture 29, Part 2: Using Controllers Inside Directives•10 minutes
Lecture 30, Part 1: Directive APIs and “&”•8 minutes
Lecture 30, Part 2: Directive APIs and “&”•13 minutes
Lecture 31, Part 1: Manipulating the DOM with link•5 minutes
Lecture 31, Part 2: Manipulating the DOM with link•15 minutes
Lecture 32, Part 1: Using Directive’s transclude to Wrap Other Elements•2 minutes
Lecture 32, Part 2: Using Directive’s transclude to Wrap Other Elements•5 minutes
Module 3 Wrap-Up•1 minute
3 readings•Total 22 minutes
Recommended Books•10 minutes
New Tutorials - here is how...•2 minutes
Frequently Asked Questions•10 minutes
11 assignments•Total 360 minutes
Quiz 20•30 minutes
Quiz 21•30 minutes
Quiz 22•30 minutes
Quiz 23•30 minutes
Quiz 24•30 minutes
Quiz 25•30 minutes
Quiz 26•30 minutes
Quiz 27•30 minutes
Quiz 28•30 minutes
Quiz 29•30 minutes
Module 3 Assignment•60 minutes
Module 4 - Components, Events, Modules, and Routing
Module 4•8 hours to complete
Module details
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.
What's included
22 videos3 readings10 assignments
Show info about module content
22 videos•Total 164 minutes
Welcome to Module 4•2 minutes
Lecture 33, Part 1: Components & Component-Based Architecture•8 minutes
Lecture 33, Part 2: Components & Component-Based Architecture•9 minutes
Lecture 33, Part 3: Components & Component-Based Architecture•10 minutes
Lecture 33, Part 4: Components & Component-Based Architecture•9 minutes
Lecture 34, Part 1: AngularJS Event System•9 minutes
Lecture 34, Part 2: AngularJS Event System•15 minutes
Lecture 35, Part 1: Modules•7 minutes
Lecture 35, Part 2: Modules•11 minutes
Lecture 36, Part 1: Routing•12 minutes
Lecture 36, Part 2: Routing•16 minutes
Lecture 37, Part 1: Routing State with Controller•2 minutes
Lecture 37, Part 2: Routing State with Controller•8 minutes
Lecture 38, Part 1: Routing State with resolve•4 minutes
Lecture 38, Part 2: Routing State with resolve•6 minutes
Lecture 39, Part 1: Routing State with URL Parameters•3 minutes
Lecture 39, Part 2: Routing State with URL Parameters•12 minutes
Lecture 40, Part 1: Routing State with Nested Views•3 minutes
Lecture 40, Part 2: Routing State with Nested Views•10 minutes
Lecture 41, Part 1: Router State Transition Events•2 minutes
Lecture 41, Part 2: Router State Transition Events•7 minutes
Module 4 Wrap-Up•2 minutes
3 readings•Total 22 minutes
Recommended Books•10 minutes
CONNECT WITH ME!•2 minutes
Frequently Asked Questions•10 minutes
10 assignments•Total 300 minutes
Quiz 30•30 minutes
Quiz 31•30 minutes
Quiz 32•30 minutes
Quiz 33•30 minutes
Quiz 34•30 minutes
Quiz 35•30 minutes
Quiz 36•30 minutes
Quiz 37•30 minutes
Quiz 38•30 minutes
Module 4 Assignment•30 minutes
Module 5 - Form Validation, Testing, and Restaurant Site Development
Module 5•9 hours to complete
Module details
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.
What's included
32 videos5 readings8 assignments
Show info about module content
32 videos•Total 268 minutes
Welcome to Module 5•2 minutes
Lecture 42, Part 1: Form Validation•8 minutes
Lecture 42, Part 2: Form Validation•11 minutes
Lecture 43, Part 1: Testing Javascript with Jasmine•9 minutes
Lecture 43, Part 2: Testing Javascript with Jasmine•13 minutes
Lecture 44, Part 1: Testing AngularJS Controllers•6 minutes
Lecture 44, Part 2: Testing AngularJS Controllers•6 minutes
Lecture 44, Part 3: Testing AngularJS Controllers•3 minutes
Lecture 44, Part 4: Testing AngularJS Controllers•5 minutes
Lecture 45, Part 1: Testing AngularJS Services and $http•4 minutes
Lecture 45, Part 2: Testing AngularJS Services and $http•5 minutes
Lecture 46, Part 1: Testing AngularJS Directives•6 minutes
Lecture 46, Part 2: Testing AngularJS Directives•10 minutes
Lecture 47, Part 1: Testing AngularJS Components•2 minutes
Lecture 47, Part 2: Testing AngularJS Components•6 minutes
(OPTIONAL) Lecture 48, Part 1: Visit With The Client•11 minutes
(OPTIONAL) Lecture 48, Part 2: Visit With The Client•9 minutes
(OPTIONAL) Lecture 49, Part 1: Non-AngularJS Website Overview•8 minutes
(OPTIONAL) Lecture 49, Part 2: Non-AngularJS Website Overview•10 minutes
Lecture 50 (Mac Version): Restaurant Server Setup•17 minutes
Lecture 50 (Windows Version): Restaurant Server Setup•17 minutes
Lecture 51, Part 1: Basic Structure of the Restaurant App•4 minutes
Lecture 51, Part 2: Basic Structure of the Restaurant App•14 minutes
Lecture 52: Coding Up a Loader/Spinner•7 minutes
Lecture 53: Coding Up $http Interceptor•11 minutes
Lecture 54: Coding Up Menu Categories View - Part 1•10 minutes
Lecture 55: Coding Up Menu Categories View - Part 2•13 minutes
Lecture 56: Coding Up Menu Categories View - Part 3•11 minutes
Lecture 57: Single Category View - Part 1•5 minutes
Lecture 58: Single Category View - Part 2•11 minutes
Lecture 59: Single Category View - Part 3•13 minutes
Course Wrap-Up•2 minutes
5 readings•Total 42 minutes
Recommended Books•10 minutes
New Tutorials - here is how...•2 minutes
Frequently Asked Questions•10 minutes
Keep In Touch with Me! •10 minutes
Recommended Books•10 minutes
8 assignments•Total 245 minutes
Quiz 39•30 minutes
Quiz 40•30 minutes
Quiz 41•30 minutes
Quiz 42•30 minutes
Quiz 43•30 minutes
Quiz 44•5 minutes
Quiz 45•30 minutes
Module 5 Assignment•60 minutes
Instructor
Instructor ratings
Instructor ratings
We asked all learners to give feedback on our instructors based on the quality of their teaching style.
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.
"To be able to take courses at my own pace and rhythm has been an amazing experience. I can learn whenever it fits my schedule and mood."
Jennifer J.
Learner since 2020
"I directly applied the concepts and skills I learned from my courses to an exciting new project at work."
Larry W.
Learner since 2021
"When I need courses on topics that my university doesn't offer, Coursera is one of the best places to go."
Chaitanya A.
"Learning isn't just about being better at your job: it's so much more than that. Coursera allows me to learn without limits."
Learner reviews
4.8
1,903 reviews
5 stars
90.01%
4 stars
7.51%
3 stars
0.94%
2 stars
0.42%
1 star
1.10%
Showing 3 of 1903
F
FB
5·
Reviewed on Dec 24, 2016
Best course for Single Page Web Applications (with AngularJS) I've seen so far. Teaching skills is everything and this Yaakov Chaikin is really good at it. I've learned a lot from it!
D
DR
5·
Reviewed on Sep 17, 2016
This is an excellent course. The lectures are clear and very well-prepared. The course material is excellent and Yaakov is an excellent presenter: very informative and engaging. Highly recommended.
S
SG
5·
Reviewed on Mar 22, 2017
I highly recommend this course for web dev beginners. Compared to other online materials this course provides much deeper understanding of the technologies taught and is a good starting point.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I purchase the Certificate?
When you purchase a Certificate you get access to all course materials, including graded assignments. Upon completing the course, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Is financial aid available?
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.