AngularJS JumpStart with Dan Wahlin

Building Web applications? Learn to build robust Single Page Applications (SPAs) with the popular AngularJS framework!
  • Lectures 102
  • Video 9 Hours
  • Skill level all level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

Course Description

** Updated on 4/27/2015 with new content on getting started building custom Angular directives! **

AngularJS is a powerful JavaScript framework that can be used to build Single Page Applications (SPAs) that run in the browser. By the time you're done with this course you'll understand how AngularJS can be used to build applications. This includes learning how to build custom controllers and re-useable services, how to bind data into views, how routing works, and also how custom animations can be used to add polish to your apps. The course even includes bonus sections on getting started building custom directives! This is a hands-on course that you can follow along with and learn by doing.

-----------------------------------

AngularJS continues to trend upward in the number of available jobs (which typically pay quite well) and the number of applications being built. So what is AngularJS and why is it so popular? And more importantly - why should take the time to learn it?

In a nutshell, AngularJS is a robust Single Page Application (SPA) framework that can be used to build dynamic, client-centric applications that can run in desktop browsers as well as on phones and tablets. You can use AngularJS to build multi-screen applications that perform much like a desktop application but can be viewed and interacted with using a normal browser.

In this course by Google Developer Expert (GDE) Dan Wahlin you'll learn essential concepts that you need to know to get started building AngularJS applications such as controllers, scope, views, routes, factories, services and more. The course provides step-by-step walk-throughs and coding demos that you're encouraged to code along with to enhance the learning process. By the end of the course you'll understand how all of the AngularJS pieces fit together and be able to apply this knowledge to building your own custom Web applications.

The AngularJS JumpStart course is broken down into 6 modules with each module providing source code so that you can follow along with Dan.

  1. AngularJS - The Big Picture
  2. Views, Directives and Filters
  3. Controllers, Scope and Modules
  4. Routing
  5. Services and Factories
  6. Animation
  7. Bonus: Getting Started Building Custom Directives
  8. Bonus: Shared Scope, Isolate Scope, the link() Function

By the end of the course you'll have walked through of all of the key components in AngularJS and built a working Single Page Application. If you're looking to "jumpstart" your AngularJS knowledge look no further than this course. It's a great technology to know and add to your resume!

What are the requirements?

  • Any text editor can be used to follow along and build AngularJS code.

What am I going to get from this course?

  • Over 102 lectures and 9 hours of content!
  • Learn the benefits of Single Page Applications
  • Learn and be able to explain the key components in Angular
  • Stay up-to-date on Angular with Google Developer Expert (GDE) Dan Wahlin
  • Teach HTML New Tricks with Directives
  • Build Controllers and Bind Data to Views
  • Use $scope for Data Binding
  • Understand the importance of two-way data binding
  • Understand the Role of Modules
  • Learn what routing is and why it's so important in Angular apps
  • Understand how to use Factories and Services
  • Learn how to "Jazz" up your SPAs with Animations
  • Get introduced to Angular 2 (once it's ready later in 2015) plus get a huge discount off the next course covering Angular 2!

What is the target audience?

  • Web developers with existing experience working with HTML, CSS, and JavaScript

What you get with this course?

Not for you? No problem.
30 day money back guarantee

Forever yours.
Lifetime access

Learn on the go.
Desktop, iOS and Android

Get rewarded.
Certificate of completion

Curriculum

Section 1: AngularJS - The Big Picture
01:25

AngularJS is a robust Single Page Application (SPA) framework that can be used to build dynamic, client-centric applications. In this course you'll learn key concepts that you need to know to get started building AngularJS applications such as controllers, scope, views, routes, factories, services and more. The course provides step-by-step walk-throughs and coding demos that you're encouraged to code along with to enhance the learning process. By the end of the course you'll understand how all of the AngularJS pieces fit together and be able to apply this knowledge to building your own custom SPAs.

Course Outline and Application Overview
Preview
03:49
Meet the Instructor
Preview
00:49
Pre-Requisites
Preview
00:34
Where do I get the Module Materials and Code?
Preview
Text
Module Materials and Code
31 pages
01:18

What's a Single Page Application (SPA) and what features does AngularJS provide to help you build SPAs? This module will explore SPA concepts and key AngularJS features, provide a Hello World sample to get you started using it quickly, and explore key components of the framework and how they work together. You'll also learn how to navigate the AngularJS documentation to find additional details about the framework.

SPA Overview
Preview
04:35
Jumping into AngularJS
Preview
02:59
AngularJS Hello World
Preview
07:02
Key Players in AngularJS
Preview
07:11
AngularJS Documentation
Preview
02:53
Summary
Preview
00:44
Module 1 Quiz
10 questions
Section 2: Views, Directives and Filters
Module Materials and Code
24 pages
01:46

In this module you'll learn the difference between control-oriented and data-oriented programming and see how AngularJS data-binding functionality will save you time and allow you to focus on your application's data. You'll also learn about the role of views and directives and see several directives in action. Finally, you'll learn about filters and how they can be used to filter, format, and sort data in AngularJS SPA applications.

Data Binding Overview
Preview
05:25
Directives and Expressions
06:23
Directives and Expressions in Action
07:52
Additional Directives
05:53
Iterating Over Data
01:41
ng-repeat in Action
05:21
Sorting and Formatting Data
05:11
Formatting Data with Filters
05:25
Sorting and Filtering Data with Filters
03:56
Dynamic Sorting with the orderBy Filter
03:17
Summary
00:40
Module 2 Quiz
10 questions
Section 3: Controllers, Scope and Modules
Module Materials and Code
26 pages
02:46

Controllers play a critical role in the AngularJS framework. In this module you'll learn the role that controllers play, how they can be created, and how scope fits into the picture for binding data to views using a data-oriented approach. You'll also learn how to create an AngularJS module and how to add controllers into it.

AngularJS Architecture Patterns
Preview
03:36
The Role of Controllers
04:42
Creating a Controller
06:33
The ng-controller Directive
03:05
Hooking a View to a Controller
01:15
Using "Controller As" Syntax
02:18
The Role of Modules
03:21
Creating a Module
02:21
Adding a Controller to a Module
07:04
Options for Adding a Controller into a Module
05:24
Parameter Injection Techniques
03:16
Summary
01:00
Module 3 Quiz
10 questions
Section 4: Routing
Module Materials and Code
19 pages
02:16

Once you understand how to create controllers and views you need to know how to integrate routing into your Single Page Application. In this module you'll learn how to do that using the $routeProvider and see how to define routes, create route parameters, and access route parameter values. You'll also learn about the role that the ng-view directive plays in AngularJS.

Routing Overview
Preview
03:18
Referencing the ngRoute Module
01:07
Adding the ngRoute Script into an Application
01:48
Configuring Routes
04:50
Using $routeProvider to Configure Routes
03:56
Using the ng-view Directive
01:16
Adding ng-view to a Page
01:33
Adding Another Route, View, and Controller
09:23
Summary
01:21
Module 4 Quiz
10 questions
Section 5: Factories and Services
Module Materials and Code
27 pages
02:05

Factories and services can be used to encapsulate re-useable code so it can be shared across application components such as controllers and even other factories or services. In this module you'll learn about the role of factories and services, see how they can be created and added into a module, and learn the difference between the two. You'll also learn about built-in AngularJS services such as $http and see how it can be used to make Ajax calls to a back-end Node.js RESTful service.

Factory and Service Overview
Preview
03:25
Creating a Factory
06:12
Refactoring Code into a Factory
03:51
Injecting a Factory into a Controller
05:20
Creating a Service
03:01
Refactoring Code into a Service
01:42
Defining Application Values
02:27
Defining Values and Constants
03:49
Making Ajax Calls from a Factory/Service
03:58
Creating a RESTful Service
03:30
Using the $http Service
02:29
Wiring Promises to Success and Error Callbacks
03:41
Using the $log Service
03:12
Summary
00:58
Module 5 Quiz
10 questions
Section 6: UI and Animation
Module Materials and Code
19 pages
01:57

Learn how to enhance the user interface with Bootstrap CSS classes and AngularJS animations to add a professional look and feel. Different options for defining animations will be discussed including CSS transitions and animations with a focus on transitions in the code.

Enhancing the UI with Bootstrap
Preview
02:54
Adding Bootstrap Classes
06:17
Animation Overview
03:45
Animation Examples and Resources
03:58
The ngAnimate Module
01:09
Adding the ngAnimate Script and Module
01:41
Defining Animations in CSS
05:19
Creating a Stylesheet with CSS Transitions
04:33
Referencing Animation Classes
01:51
Hooking Directives to Animations
02:37
Summary
01:35
Module 6 Quiz
5 questions
Section 7: Bonus: Getting Started Building Custom Directives
1 slide

Several people have asked if I could include videos covering the basics of building custom AngularJS directives. I'm happy to include 2 full sections from the AngularJS Custom Directives course (also on Udemy) that will help you get started!

Module Materials and Code
26 slides
Introduction
02:18
The Role of Directives
04:42
Creating a Hello World Directive
04:09
Directive Categories
06:08
Directive Building Blocks
10:06
Summary
01:22
Section 8: Bonus: Shared Scope, Isolate Scope, the link() Function in Custom Directives
1 slide

Several people have asked if I could include videos covering the basics of building custom AngularJS directives. I'm happy to include 2 full sections from the AngularJS Custom Directives course (also on Udemy) that will help you get started!

Module Materials and Code
30 slides
Introduction
01:36
Understanding Shared and Isolate Scope
08:06
Shared and Isolate Scope Demo
02:35
@ Local Scope Property
04:15
@ Local Scope Property Demo
05:36
= Local Scope Property
02:46
= Local Scope Property Demo
04:54
& Local Scope Property
03:57
& Local Scope Property Demo
04:09
The link() function
07:31

Instructor Biography

Dan Wahlin , Architect and Software Engineer at Wahlin Consulting

Dan Wahlin is a world-renowned developer and instructor who has been teaching developers for over 15 years and has a knack for making hard concepts easy to understand. He founded Wahlin Consulting which provides consulting and training services on Web technologies such as JavaScript, AngularJS and other SPA frameworks, jQuery, HTML5, NodeJS, C#, MVC, Web API, and SharePoint. Dan also speaks at conferences and user groups around the world and has written several books on Web technologies. Dan blogs frequently about a variety of topics at weblogs.asp.net/dwahlin, runs the Web Weekly newsletter, and writes columns for various technical magazines. Follow Dan on Twitter @DanWahlin.

Dan is a member of the Google Developer Expert (GDE) group, is a Microsoft MVP, and is part of the Microsoft Regional Directors group.

Join the biggest student community

5,900,000

Hours of video content

22,000,000

Course Enrollments

6,500,000

Students

Reviews

Average Rating
4.9
Details
  1. 5 Stars
    157
  2. 4 Stars
    11
  3. 3 Stars
    0
  4. 2 Stars
    1
  5. 1 Stars
    0
    • Eric Bell

    Really good introduction, got me up and running

    I was looking for an AngularJS course that would give me a reasonable grasp of the terminology, concepts and technologies building an Angular Spa (single page app). This course did exactly this. So much so I've been able to write my own Angular SPA (including a backend using node, express, loopback and mongodb). If you're new to Javascript this course will overwhelm you. However if you've got a reasonable grasp it moves along at a good pace, Dan presents background information and good examples that you follow along with. You'll leave this course thinking you've just got to go out and try it for yourself. This is a overview course, a jumpstart, not an exhaustive course. Because he has you play with Node and Express a little, you should be able to go further on your own to create a full stack (front-end/Angular - middleware/Express - backend/mongodb for instance) with some research on your own. With this course you'll be able to pick up other Angular code off the web or someone's project, look at it and say to yourself - "I get it". Maybe not everything but "I get it". Syntax like - ng-app, ng-model, ng-repeat, ui.router, $Inject, .factory, .controller - will just make sense. Without this course I was lost and just didn't know where to start. I didn't get "it" because there are so many opinions out there about structure, terminology, and thinking. Dan provides very clear opinions about how to get going. He provides a consistent structure that evolves throughout the course building more and more. And, he regularly addresses his students questions rather fully. If you've got a problem with the course or if you've just got a question that's off course material but near enough to the substance, he'll answer your question. There's material that you download throughout the course that helps act as a reference. There's a starting code folder, the ending or finished code folder and the slides in PDF form. I recommend you use the starting code folder and write the code he presents yourself into the project. Do it intentionally thinking and testing as you go. Make changes to test bits here and there and you'll learn a lot about Angular fast. Something very helpful to me has been the discussions. Occasionally I didn't get something from the lecture, just missed it. Then I'd read the discussions and find someone else didn't as well and there's Dan's answer (or sometimes another student's answer) and my problem was solved. Have taken a number of Udemy courses this is the first time the discussions seemed so on point. Finally, the only thing he didn't do that I like, helping cement concepts, is give assignments say one per section. An assignment make you think and use the material. While assignments are not included, he and the course deserves 5-stars just because the material is that good. In the end I have to create my own assignments so to speak by way of the work that I do anyway applying what I've learned.

    • Burke Jones

    Experienced Programmer

    I've been writing software in the Desktop .NET world for over a decade. I've always found HTML/javascript/CSS frustrating because of the lack of data binding. AngularJS solved that problem for me. Dan made it very easy to understand and learn so that I could start rewriting my applications into SPAs quickly. Highly recommend this to anyone who wants to learn AngularJS.

    • Aviad Hager

    Very good course

    I like this course and the way Dan guiding the student step by step.

    • Αθανάσιος Κόντης

    High quality lectures with real-life example and best practices

    Dan is a very knowledgeable and pleasant instructor. He tackles the course material with comfort and cohesion and teaches best coding practices along the way. The only caveat is that the student must have a well-established vanilla JavaScript knowledge before he enrolls, as the pace is fast and the instructor brushes over advanced concepts like IIFE (immediately invoked function expressions) and the sort. Nonetheless, personally, I found it refreshing and fulfilled all my expectations. Finally, Dan's distinct southern US accent gives a unique air in the course and makes it even more interesting and fun, as I love this variation of american english.

    • Matthias Kuhs

    A course well presented

    This course helped me write my own first SPA by simply going along with the course example. I also like the fact that the instructor is answering every single comment on the forum and that he added some bonus material recently. This is exactly how on-line courses should be!

Show more reviews
Ready to start learning?
Preview this course