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

comments powered by Disqus

36 Comments

  • 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: http://www.any-video-converter.com/products/for_video_free. I like it so much I ended up buying the "Ultimate" version.

    Dan

  • 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.

  • 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

  • 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.....

  • 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.

  • 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

  • Paul, you have the reversed me thinks.

  • 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

  • Thanks for the correction.

  • Awesome job, thanks Dan!

  • Thanks Steven and fraserxv - appreciate it!

    Dan

  • 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.

  • 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

  • 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

  • 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!

  • 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!

  • 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?

  • Really nice introduction of angular

  • 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

  • Much thanks, Dan. Very straightforward!

  • 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?

  • Great introduction Dan. Learned a lot from your video !

  • 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!

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

  • Great tutorial, thanks!

    Kevin: the reason the script breaks when you switch from over to 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.

  • thanks for the video !

  • 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

  • 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)

  • 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

  • Excellent Tutorial, one of the very best.

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

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

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

  • I really needed this -- great job.

  • thanks man, great job

  • Thanks for your hard work.

Comments have been disabled for this content.