AngularJS JumpStart with Dan Wahlin

Name: AngularJS JumpStart with Dan Wahlin
Rating: 4.6 (3638 reviews)

Building Web applications? Learn to build robust Single Page Applications (SPAs) with the popular AngularJS framework!

Created byDan Wahlin

Last updated 6/2019

English

What you'll learn

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

Course content

9 sections • 113 lectures • 6h 35m total length

Course Introduction1: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 Overview3:49
Meet the Instructor0:49
Pre-Requisites0:34
Where do I get the Module Materials and Code?0:13
Module Materials and Code31:00
Introduction1: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 Overview4:35
Jumping into AngularJS2:59
AngularJS Hello World7:02
Key Players in AngularJS7:11
AngularJS Documentation2:53
Summary0:44
Module 1 Quiz

Module Materials and Code24:00
Introduction1: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 Overview5:25
Directives and Expressions6:23
Directives and Expressions in Action7:52
Additional Directives5:53
Iterating Over Data1:41
ng-repeat in Action5:21
Sorting and Formatting Data5:11
Formatting Data with Filters5:25
Sorting and Filtering Data with Filters3:56
Dynamic Sorting with the orderBy Filter3:17
Summary0:40
Module 2 Quiz

Module Materials and Code26:00
Introduction2: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 Patterns3:36
The Role of Controllers4:42
Creating a Controller6:33
A Quick Note About Stand-Alone Controller Functions1:47
The ng-controller Directive3:05
Hooking a View to a Controller1:15
Using "Controller As" Syntax2:18
The Role of Modules3:21
Creating a Module2:21
Adding a Controller to a Module7:04
Options for Adding a Controller into a Module5:24
Parameter Injection Techniques3:16
Summary1:00
Module 3 Quiz

Module Materials and Code19:00
Introduction2: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 Overview3:18
Referencing the ngRoute Module1:07
Adding the ngRoute Script into an Application1:48
Configuring Routes4:50
Using $routeProvider to Configure Routes3:56
Using the ng-view Directive1:16
Adding ng-view to a Page1:33
Adding Another Route, View, and Controller9:23
Summary1:21
Module 4 Quiz

Module Materials and Code27:00
Introduction2: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 Overview3:25
Creating a Factory6:12
Refactoring Code into a Factory3:51
Injecting a Factory into a Controller5:20
Creating a Service3:01
Refactoring Code into a Service1:42
Defining Application Values2:27
Defining Values and Constants3:49
Making Ajax Calls from a Factory/Service3:58
RESTful Services: A Quick Note About Node.js Express Versions1:12
Creating a RESTful Service3:30
Using the $http Service2:29
Wiring Promises to Success and Error Callbacks3:41
Using the $log Service3:12
Summary0:58
Module 5 Quiz

Module Materials and Code19:00
Introduction1: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 Bootstrap2:54
Adding Bootstrap Classes6:17
Animation Overview3:45
Animation Examples and Resources3:58
The ngAnimate Module1:09
Adding the ngAnimate Script and Module1:41
Defining Animations in CSS5:19
Creating a Stylesheet with CSS Transitions4:33
Referencing Animation Classes1:51
Hooking Directives to Animations2:37
Summary1:35
Module 6 Quiz
Thank You!1:21

About this Bonus Content1:00
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 Code26:00
Introduction2:18
The Role of Directives4:42
Creating a Hello World Directive4:09
Directive Categories6:08
Directive Building Blocks10:06
Summary1:22

About this Bonus Content1:00
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 Code30:00
Introduction1:36
Understanding Shared and Isolate Scope8:06
Shared and Isolate Scope Demo2:35
@ Local Scope Property4:15
@ Local Scope Property Demo5:36
= Local Scope Property2:46
= Local Scope Property Demo4:54
& Local Scope Property3:57
& Local Scope Property Demo4:09
The link() function7:31
link() Function Demo6:14
Summary1:33

Requirements

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

Description

** Updated with new articles and bonus videos about getting started building custom Angular directives! **

Please note that this course covers version 1.x of AngularJS. This course does not cover Angular development (which is different than AngularJS).

There are many AngularJS courses on the Web now. Which one should you take? If you're looking to quickly grasp the core concepts of AngularJS 1.x with hands-on examples and want to learn from a developer/instructor with over 20 years of experience who has also been awarded the Angular Google Developer Expert (GDE) award from Google then this is the course for you! Dan also created the popular AngularJS in 60-ish Minutes video on YouTube (over 1.9 million views) so if you enjoyed that then you'll love this course!

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 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 additional bonus modules included) with each module providing source code so that you can follow along if you'd like.

AngularJS - The Big Picture
Views, Directives and Filters
Controllers, Scope and Modules
Routing
Services and Factories
Animation
Bonus: Getting Started Building Custom Directives
Bonus: Shared Scope, Isolate Scope, the link() Function
Bonus: Articles on Building Custom AngularJS Directives

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!

Who this course is for:

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

AngularJS JumpStart with Dan Wahlin

What you'll learn

Explore related topics

Course content

AngularJS - The Big Picture13 lectures • 1hr 5min

Views, Directives and Filters13 lectures • 1hr 17min

Controllers, Scope and Modules15 lectures • 1hr 14min

Routing11 lectures • 50min

Factories and Services17 lectures • 1hr 18min

UI and Animation14 lectures • 58min

Bonus: Getting Started Building Custom Directives8 lectures • 56min

Bonus: Shared Scope, Isolate Scope, the link() Function in Custom Directives14 lectures • 1hr 24min

Bonus: Articles on Building Custom Directives8 lectures • 1hr 9min

Requirements

Description

Who this course is for: