Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

 

AngularJS

The term "Single Page Application" (SPA) is one of the biggest buzz words out there right now especially when it comes to building client-centric applications. SPAs provide a great way to load different views into a screen without reloading everything from scratch. When done right, true SPAs have support for history, routing, page lifecycle management, two-way data binding and more. How you get started with SPAs though? Do you go down the road of building 100% custom SPA applications or rely on a framework?

I've debated that question a lot over the past year and preached (pretty strongly) that building a SPA from scratch just doesn't make any sense if productivity and maintenance are important to you. It may not be an issue for smaller apps but for larger, enterprise-scale apps with multiple screens, custom business rules and a plethora of other features custom SPAs just don't make sense in my opinion. If you work on a team with multiple developers all having different skill levels then you can imagine what it'd be like to have everyone contributing custom code that doesn't have any consistency across it. In the long-run it becomes a maintenance nightmare especially if there isn't any documentation or tests available (which is bad I realize). Add in several 3rd party libraries and the problem can get even worse especially over time as new versions of scripts are released and others become stale.

imageThe good news is that several different SPA frameworks have appeared on the scene that can greatly simplify the process of building SPAs while also making maintenance easier. One of the SPA frameworks that I really like is AngularJS since it provides a robust set of features that can be used out-of-the-box without having to be an expert in routing, history, data binding and more. It provides a solid base that you can build on top of. The challenge that I hear from many people though is that "AngularJS has a steep learning curve!". I just gave a talk on AngularJS at the AngleBrackets conference in Las Vegas and heard this statement from several people. To be real honest, I felt the same way the first time I looked at it. However, the more I dug in the more I realized how powerful the framework was and all of the ways it could enhance productivity while simplifying maintenance. image

Note: Before moving on I should mention that I also like the Durandal SPA framework too - it has robust functionality built-in as well and is definitely worth checking out.

To help break down the learning curve I've put together a short video series titled "AngularJS Fundamentals in 60-ish Minutes" (I added "ish" because it ended up being more than 60 minutes :-)). In the video you'll learn how to get started with the AngularJS framework and some of the key features it provides that simplify SPA development. You'll see how to use directives, filters and data binding techniques to capture and display data. Next up is views, controllers and scope and the role they play followed by a discussion of modules, routes and factories/services. At the end of the video a sample application built using AngularJS is shown. I hope you enjoy the video and that it helps jumpstart your AngularJS learning process!

 

AngularJS Fundamentals in 60-ish Minutes

 

Watch the complete video tutorial here or choose specific sections from the video below.


 

Jump to a Specific Section:


Download AngularJS samples and the Customer Manager sample application shown in the video.


Check out my other posts on AngularJS

Published Friday, April 12, 2013 8:07 PM by dwahlin

Comments

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Saturday, April 13, 2013 11:44 AM by dwahlin

Hi Alex,

Although I'm not going to be able to re-encode everything to MP4 (too much of a challenge to keep multiple videos in-sync if they change in the future), check out Any Video Converter Free since it can grab youtube videos and convert them to MP4 if you're interested: www.any-video-converter.com/.../for_video_free. I like it so much I ended up buying the "Ultimate" version.

Dan

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Sunday, April 14, 2013 5:31 AM by aub3n

Hi Dan,

thanks for the great video, it's a good starting point for for further exploration of angular. I downloaded your app source too and got a question about your route setup. You're using:

app.config(function ($routeProvider) { ... }

but shouldn't there be a request for the $routeProvider dependency too? I looked at the docs and in their example they use:

angular.module('phonecat', []).config(['$routeProvider', function($routeProvider) { ... }]

What is the difference between the two approaches and why did you not have specify the $routeProvider dependency explicitly?

Thanks.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Sunday, April 14, 2013 2:55 PM by dwahlin

aub3n:

Great question and something I initially wondered about as well. If you use the string array to pass values then the names you give in the strings must match up with the actual object, factory, service, etc. you are injecting. Then in the anonymous function the name can be whatever you want but the parameter in the function has to match with the position in the string array. If you don't use the string array then the parameter name in the function must match up with the actual object, factory, service, etc.

By using the string array you can also avoid some minification problems when you shrink your scripts where parameter names in the function could get messed up due to the minification process. Strings are left alone during that process though so if the script is minified the parameter names are changed and it won't matter. I didn't want to go into all that in the 60 minute video (too much info for people new to AngularJS) and went with the more simple approach that works.

Here's an example of what I mean by renaming things. I don't normally like to do this since it makes it more confusing I think long-term, but it's an option:

var app = angular.module('demoApp', []);

//Notice that the string array values below match up with the actual objects

//but that the function parameter names are different...the order does matter though.

//If the script was "minified" the parameter names could change & it

//wouldn't affect anything since the string values will be left alone and AngularJS will

//handle passing the correct object/server/factory.

app.controller('MainCtrl', ['$scope', '$http', function(myScope, myHttp) {

 myScope.name = 'World';

}]);

HTH,

Dan

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Monday, April 15, 2013 9:35 AM by Lamin Sanneh

Hi Dan, thanks for this video, really brilliantly done... I was wondering if you have any pointers as to how Angular deals with model relationships.... It seems to not have any explicit way of handling this.....

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, April 16, 2013 7:03 AM by Paul

One of the best intros to angularjs I've seen.

It's worth highlighting that the difference between service/factory isn't really just the use of this vs returning an object. A service function is constructed (i.e. called with 'new') by angular when a dependency is injected so each controller that depends on a service will get their own instance. A factory object provides the opposite and behaves as a singleton hence they have pretty different use cases depdending on your needs.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, April 16, 2013 11:01 AM by dwahlin

Paul:

Excellent point! Thanks for adding that. I may do a follow-up video on the differences between services/factories/providers/value at some point so I'll make sure to highlight that.

Dan

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, April 16, 2013 12:51 PM by Ryan

Paul, you have the reversed me thinks.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, April 16, 2013 1:20 PM by dwahlin

Karl and Ryan:

Thanks for additional info. I will say that services/factories/providers are hard to wrap your head around. Appreciate the link Karl. I had thought everything was actually a singleton when I first worked with them but really need to dig into the differences more myself and prove it all out.

Dan

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, April 16, 2013 4:22 PM by Paul

Thanks for the correction.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, April 16, 2013 5:09 PM by Steven

Awesome job, thanks Dan!

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, April 16, 2013 5:46 PM by dwahlin

Thanks Steven and fraserxv - appreciate it!

Dan

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Thursday, April 18, 2013 2:10 AM by BarDev

I've been working with AngularJS for a short while and have viewed many, many videos about the subject, but this is probably the best introduction I've seen to AngularJS.  I'm looking forward to the PluralSight videos and the follow-up video on the differences between services/factories/providers/value.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Thursday, April 18, 2013 3:26 AM by Matt

Dan you are a very clever man, Easily the best AngularJS video.

I had a sneaky feeling that Scott was working on a AngularJS PluralSight video, based on his latest set of blog posts

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Thursday, April 18, 2013 7:39 AM by Khuzema

Really appreciate the video and expectation are really gone high with the Pluralsight Angular course you are working on. By the way when its going to release? Can't wait....thanks

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Thursday, April 18, 2013 10:35 AM by Dave Black

Hi Dan,

Great introduction to angular.  Could you please consider a video about integrating Angular with TypeScript?  With both of these technologies becoming more and more popular, it will be more common to integrate them together.

Thanks for your consideration!

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Friday, April 19, 2013 8:51 AM by LuxB2000

Thanks a lot for the video!

You kept the things really clear. It helps me to quickly understand bases.

Thanks for the time you spent on it!

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Sunday, April 21, 2013 6:24 AM by Steve

Great videos! In 5. AngularJS Fundamentals in 60 Minutes - Modules, Routes and Factories around 20:00 you are sharing SimpleController across 2 views. Why is it when you add a new person in view1 the view is updated with the new user but when you switch to view2 you get the initial scope without the new user? I would have assumed the scope is "global" and visible to all views?

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Sunday, April 21, 2013 1:19 PM by vishnu

Really nice introduction of angular

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Sunday, April 21, 2013 3:15 PM by dwahlin

Steve:

Thanks for watching. The scope is specific to the controller so at that point nothing was being shared across the views since the controller was created again for view 2. Normally you'd put data logic into a factory or service which is covered more at the end of the video and you'd have a backend to store it. The demos don't have that here mainly to keep things simple and focused.

Dan

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Sunday, April 21, 2013 10:45 PM by Scott E

Much thanks, Dan.  Very straightforward!

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, April 23, 2013 11:43 AM by Erik

This is a very great introduction to AngularJS. I've been on the hunt for a JavaScript MVVM/MVC framework and I think enough light bulbs went on so far in this video to use it in an enterprise application. Do you have any plans for more videos?

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Wednesday, April 24, 2013 1:06 AM by 8indaas

Great introduction Dan. Learned a lot from your video !

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Friday, April 26, 2013 3:11 PM by Kevin

This is a great tutorial! I spent almost 2 weeks doing Angular tutorials and watching video conferences and this condensed everything I learned into 60 min! I wish I would have watched this weeks ago. After looking through your source I'm a little confused about the animatedView.js. I have seen ng-view used to bind templates but never a directive. Can you explain how this directive works? Namely, I'm interested in how the templateUrl is binded to the directive and why the script breaks when I switch from <div animated-view></div> over to <div ng-view></div>.

Thanks again!

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Saturday, April 27, 2013 8:21 PM by Isaac

After trying about a dozen Getting Started with Angular JS tutorials, this is the only one that's worked. Great stuff, thanks!

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Monday, May 6, 2013 8:38 AM by Jo

Great tutorial, thanks!

Kevin: the reason the script breaks when you switch from <div animated-view></div> over to <div ng-view></div> is the css of the .view class. In order to make the animated-view fade-in work properly, it is initially hidden (opacity: 0.0;). Remove this and it will work.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Monday, May 6, 2013 1:37 PM by vincent bunjes

thanks for the video !

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Monday, May 6, 2013 3:38 PM by dwahlin

Thanks Jo! I completely lost track of the original question (sorry about that Kevin) so I appreciate you answering it. That's absolutely correct.

Dan

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, May 7, 2013 10:29 AM by GeorgieP

Hi Dan, I have to echo previous comments and say this is by far the best introduction video to AngularJS available to date, and thanks for taking the time to make and share with us.

1 comment: As I was following along I got quite stuck for a long while with the routes becuase I kept making several mistakes with the URLs, typing them with hashes and slashes and without - I tried every possible variation except the right ones.

In fairness, while following along I went on very different fork to what you showed, but did this in order to ensure I was "getting it".

Is there any chance you could explain this a bit more? - if this is something particular to AngularJS (it could be an SPA thing in general, as I'm new to the whole concept)

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Wednesday, May 8, 2013 6:17 AM by Sumit K Gupta

I have a question regarding the Grid implementation in Angularjs which have a functionality of editing like grid-view in asp.net. I want to show data in the grid with edit button and more editable icons. Can you please guide me how to implement it in Angularjs  

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Friday, May 10, 2013 9:27 AM by Kenneth

Excellent Tutorial, one of the very best.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Friday, May 10, 2013 6:02 PM by Gary Haddon

Nice intro on Angular. I had the same reaction when I first looked at Angular.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Sunday, May 12, 2013 1:29 PM by Naresh

Excellent tutorial, to the point covering fundamentals and love your presentation.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Sunday, May 12, 2013 10:23 PM by Prashant

Great video for new comer like me i love it hopefully will be able to master it in future.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Thursday, June 27, 2013 7:58 AM by Sean McAuliffe

I really needed this -- great job.

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Saturday, July 6, 2013 11:29 AM by Denis

thanks man, great job

# re: Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

Tuesday, July 9, 2013 3:22 PM by Ankur

Thanks for your hard work.

# Random Link Roundup | .NET Meditations

Thursday, August 15, 2013 8:35 PM by Random Link Roundup | .NET Meditations

Pingback from  Random Link Roundup | .NET Meditations

# Using an AngularJS Factory to Interact with a RESTful Service

Friday, August 16, 2013 1:48 PM by Dan Wahlin

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free

# Learning AngularJS: Helpful Info Sources | .NET, Silverlight, and Prism

Pingback from  Learning AngularJS:  Helpful Info Sources | .NET, Silverlight, and Prism

# AngularJS Animations in Version 1.2+

Sunday, August 18, 2013 6:38 PM by Dan Wahlin

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free

# Building an AngularJS Dialog Service

Monday, August 19, 2013 11:10 PM by Dan Wahlin

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free

# The AngularJS Magazine – What’s New this Week?

Friday, August 23, 2013 7:58 PM by Dan Wahlin

&#160; Click to view the FlipBoard magazine &#160; AngularJS Magazine Updates for August 23rd Configuring

# The AngularJS Magazine – What’s New this Week?

Tuesday, September 3, 2013 10:10 AM by Dan Wahlin

&#160; Click to View &#160; AngularJS Magazine Updates for September 30th Custom Validations in AngularJS

# The AngularJS Magazine – What’s New this Week?

Tuesday, September 17, 2013 12:38 AM by Dan Wahlin

&#160; Click to View Here’s what’s new in the world of AngularJS. Check out the Flipboard magazine above

# Building an AngularJS Modal Service | enCaliber

Sunday, September 22, 2013 5:18 AM by Building an AngularJS Modal Service | enCaliber

Pingback from  Building an AngularJS Modal Service | enCaliber

# Building a Custom AngularJS Unique Value Directive

Tuesday, September 24, 2013 9:42 PM by Dan Wahlin

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free

# Building a Custom AngularJS Unique Value Directive

Wednesday, September 25, 2013 3:12 PM by Building a Custom AngularJS Unique Value Directive

Pingback from  Building a Custom AngularJS Unique Value Directive

# Learning AngularJS by Example – The Customer Manager Application

Saturday, October 26, 2013 3:15 PM by Dan Wahlin

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free

# R&amp;D | AngularJS Learning Resources

Monday, November 4, 2013 12:20 PM by R&D | AngularJS Learning Resources

Pingback from  R&amp;D  | AngularJS Learning Resources

# Cancelling Route Navigation in AngularJS Controllers

Wednesday, November 13, 2013 12:09 AM by Community Blogs

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free

# The Morning Brew #1335 | Geekness in Words

Friday, November 15, 2013 5:53 AM by The Morning Brew #1335 | Geekness in Words

Pingback from  The Morning Brew #1335 | Geekness in Words

# Learning AngularJS by Example ??? The Customer Manager Application

Pingback from  Learning AngularJS by Example ??? The Customer Manager Application

# Structuring AngularJS Code

Monday, December 2, 2013 2:03 AM by Dan Wahlin

If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free

# Tutorial for Building SPA using AngularJS | Bit of Technology

Pingback from  Tutorial for Building SPA using AngularJS | Bit of Technology

# D??veloppement WEB | Pearltrees

Sunday, January 26, 2014 6:01 AM by D??veloppement WEB | Pearltrees

Pingback from  D??veloppement WEB | Pearltrees

# Angularjs !! | Hello World !!

Tuesday, February 11, 2014 2:57 PM by Angularjs !! | Hello World !!

Pingback from  Angularjs !! | Hello World !!

# Tutorial for Building SPA using AngularJS - Bit of Technology

Pingback from  Tutorial for Building SPA using AngularJS - Bit of Technology