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.

Single Page Web Applications with AngularJS
Ends in 3 days! Save 40% on your access to 10,000+ programs and make a real impact in your career. Save now.

Single Page Web Applications with AngularJS

Instructor: Yaakov Chaikin
129,276 already enrolled
Included with •Learn more
Ask Coursera
Skills you'll gain
Details to know

Add to your LinkedIn profile
See how employees at top companies are mastering in-demand skills

There are 5 modules in this course
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
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
- Frequently Asked Questions•10 minutes
- Recommended Books•10 minutes
8 assignments•Total 155 minutes
- Quiz 1•5 minutes
- Quiz 2•5 minutes
- Quiz 3•10 minutes
- Quiz 4•5 minutes
- Quiz 5•10 minutes
- Quiz 6•30 minutes
- Quiz 7•30 minutes
- Module 1 Coding Assignment•60 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
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
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
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
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
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
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
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

Offered by
Explore more from Mobile and Web Development
CCoursera
Guided Project
PPackt
Course

Guided Project

Course
Why people choose Coursera for their career

Felipe M.

Jennifer J.

Larry W.

Chaitanya A.
Frequently asked questions
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.
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.
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.
More questions
Financial aid available,
¹ Some assignments in this course are AI-graded. For these assignments, your data will be used in accordance with Coursera's Privacy Notice.




