AngularJS Fundamentals In 60-ish Minutes

The code link shown in the video has changed to the following:
codewithdan.me/AngularJsDemos
If you like the AngularJS in 60-ish Minutes video you'll love the AngularJS JumpStart video training course. Check it out at tinyurl.com/AngularJSJumpStart.
For more articles and videos subscribe to my KZbin channel or visit weblogs.asp.net/dwahlin.
In this video you'll learn how to get started with the AngularJS SPA framework. First you'll be introduced to what a SPA is and AngularJS features that simplify building SPAs. From there you'll see how to use directives, filters and data binding techniques. 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 a sample application built using AngularJS is shown.
Note that routing changes a little in AngularJS 1.2 or higher. You'll see a note about this in the appropriate spot in the video and can read about the changes at tinyurl.com/ngRoute.
Stay up-to-date on all things related to AngularJS by subscribing to my free AngularJS Magazine: flip.it/bdyUX and my Code with Dan newsletter at blog.codewithdan.com.
Blog: blog.codewithdan.com
Twitter: / danwahlin
9:25 Directives/Data Binding
17:23 Filters
23:35 Views/$scope/Controller Intro
31:00 Modules/Routes/Factories Intro & Explanation
33:57 Modules & Containers
38:32 Correct way to set up a Controllers
40:33 Anther way to set up Controllers
42:03 Roles of Routes
43:17 Defining Routes
49:28 ng-view
53:45 Factories / Services
55:18 Defining Factories
57:36 Factory Example
63:13 End of instruction
63:16 Examples / Demos
67:50 Summary
69:30 Sample code / Resources

[@babyboie20]

9:25 Directives/Data Binding 17:23 Filters 23:35 Views/$scope/Controller Intro 31:00 Modules/Routes/Factories Intro & Explanation 33:57 Modules & Containers 38:32 Correct way to set up a Controllers 40:33 Anther way to set up Controllers 42:03 Roles of Routes 43:17 Defining Routes 49:28 ng-view 53:45 Factories / Services 55:18 Defining Factories 57:36 Factory Example 63:13 End of instruction 63:16 Examples / Demos 67:50 Summary 69:30 Sample code / Resources Please don't mind me I often find myself coming back to your vid for things I may have forgot and I made a list of all the key points I thought I would need in this quick ref so I wont have to slide to the points every time. Sorry if this is a issue remove this and I will understand... just trying to make it easier for me lol.

[@amanuel2135]

+Anthony Powell What you can do with AngularJS! Forum Application : github.com/amanuel2/ng-forum . Made in Pure AngualarJS

[@fredrikoller9555]

Thank you!

[@jeffersonribeiro1669]

It should be in the description

[@himanshusingh-rm2vf]

Well it helps everyone I guess

[@nucknine]

Anthony Powell z

[@danlam1987]

I'm watching this in 2019 because I have to understand old AngularJS code for my work.

[@somekindofaweird]

god damn legacy code

[@aniezecollins2653]

Same with me bro

[@amodmathur2269]

same....2020 and still AngularJS version 1!

[@user-hy2qh2tq1z]

hi there

[@_torgeek9108]

Same here mate!

[@chareesagraham7008]

By minute 16 I was so excited I wanted to hug you! This tutorial is exactly what I needed. Very enjoyable, thank you!

[@DanWahlin]

Chareesa Graham You definitely win for best comment ever. :-) Glad to hear it was helpful.

[@SharifKhan]

I learnt more in this 60-ish minutes than I have have watching all the Angular videos from Google. Thanks.

[@IsaacPrice]

This is the best overall breakdown I have come across, very well put together and clear to understand. Also, Thanks for the pop overs in the video to let us know about the changes made since this video was recorded, like routing. Cheers!

[@sangitdhanani2137]

A single video to understand every basic concept of AngularJS. Good job man :)

[@amanuel2135]

+sangit dhanani What you can do with AngularJS! Forum Application : github.com/amanuel2/ng-forum . Made in Pure AngualarJS

[@sagardafle]

sangit dhanani Nice to see you here man!

[@bryannoronha8127]

I am watching this video for the second time and still loving it. The simplicity and the pace at which you explain things is really great. Appreciate the time you took to make this video.

[@Psicoeducazione]

This is a great example of how to teach everything: important information first, from simplicity to complexity. Thanks a lot.

[@KindnessHawthorn]

I can't thank you enough for this. I've been trying to wrap my head around AngularJS to jump in on a project at work. This was JUST what I needed.

[@DanWahlin]

Chris Samoiloff Thanks! Glad to hear it helped you out.

[@universalproblemsolver]

When you said "I didn't think that [Transclusion] was a real word" I was hooked. I thought the EXACT same thing.

[@S347GOaT]

This is by far one of the most succinct but jam packed tutorials on Angular I have come across so far. I would LOVE you to make an updated video if you ever get the itch to do so.

[@AcceleratedIdeas]

Impressive, most impressive. Thanks for spending the time to pass something back to the dev community Dan.

[@HenryWilly]

INDEX _________________ 1:50 Intro 3:27 Agenda - What this is about 4:40 Getting Started 9:26 Directives, Filters and Awesome Data Binding .... 12:25 Basics .... 14:15 Iterating (ng-repeat directive) .... 17:28 Filters .... 19:40 Filter example 23:36 Views, Controllers scope .... 28:15 Controller Example #1 31:01 Modules, Routes and Factories .... 31:02 Basics about Modules .... 38:26 Example Module .... 40:05 Controller Example #2 .... 40:40 Controller Example #3 .... 42:04 Basics about Routes .... 44:52 Routes Example .... 53:45 Basics Factories, Services, Provider, Value .... 57:35 Factory Example 1:03:14 Demo using all above. 1:07:50 Summary and good bye folks 1:09:28 URL for downloading Demo 1:09:48 Resources 1:10:48 Black Screen You're welcome!!!!!

[@venkataramanr9535]

Very good starting tutorial for beginners. Thanks for the wonderful work.

[@DanWahlin]

+Venkataraman R Thanks - glad to hear is was helpful!

[@PanthersHockey4]

I've tried using a few different resources for AngularJS so far and this one has by far been the clearest and easiest to wrap my head around. Thank you!

[@nicefalcon]

I have to say, This is by far one of the best tutorials and introductions into anything I've ever seen in my life. Thanks man.

[@TheMalni]

You are a really good teacher Dan, thank you for the effort you put into making this tutorial, it's very much appreciated! :)

[@ampnezztalaga9743]

Thanks for making this video. I learned a lot in a span of an hour+. And you're not boring :D

[@bgstigma]

Must say this tutorial should be on angular's official documentation! Straight to the point, no pointless oversimplified examples with no actual usage, well explained! This is probably the best crash course I've ever watched! Thank you so much for spending time to record this and sharing the code in github! :)

[@gajendra1987]

This is one of the best AngularJS framework tutorial that one could cover in 1.10 hr. Many Thanks for posting it here in the KZbin, Much appreciated.

[@JoshuhaOwen]

Was a great intro and helped me understand the role of factories a bit better. Thanks!

[@gowthamgts]

clear audio in youtube... thanks man...

[@srirangaachar799]

Was looking for an overview of AngularJS to get started, found yours to be perfect for my needs. Got me off the blocks in no time. Thank you very much, highly appreciated!!

[@fadichamieh]

Cannot stress how useful and fun this video was for me, Dan. Thank you very much!

[@invinciblekd]

Best tutorial on AJS ! To the Point !

[@DoctorCobweb]

AMAZING. best explanation skills, u know your stuff. thanks!

[@DanWahlin]

Thanks!

[@camaulay]

Fantastic video. Went from ZERO to a working SPA in 1 hour. Thanks mate

[@davidking2846]

Thank you Dan, even 2 and a half years later this has given me the best insight into Angular "in the round".

[@JeromeEtienne]

impressive tutorial. very high quality. thanks!

[@MrDeerings]

Thanks Dan, good tutorial, nicely spoken.

[@AlekseyFilippovHuzzah]

Watched it yesterday!

[@KimDanMsc]

What version/flavour of Visual Studio are you using?

[@robert9060]

Boy! One of the best tutorials I've done in a while.

[@kushfanikiso]

One of the best Angular tutorials out there. Genuinely worth the watch. Thanks a lot Dan.

[@JasonCtutorials]

thanks for this awesome tutorial.

[@cooltune]

This vid was so god damn helpfull! Got stuck on the Service/Factory/Provider bits in the official "Getting Started" tutorial. They just didn't make any sense to me. You've turned the learning-wall back in to a learning-curve again. Thanks!

[@DanWahlin]

Thanks! Glad it helped. I got stuck on the same exact things when I first starting learning AngularJS "back in the day". Hopefully they make more sense now though. :-)

[@brcaswell]

"learning wall".. ha .. first time I've heard that expression

[@sedfreymanego5849]

i love how you used the term learning wall . . . i'm trying to learn this too. and i think the video is helpful. i have not finished watching it, though.

[@vitaliiznak6825]

I agree

[@inigosmith331]

Best beginners' tutorial I've found on Angular so far. Much appreciated.

[@JohnWayne-ql5dt]

Probably the only video walkthrough that i did not have to rewind. It was so simple i got it the first time, great video if you are stuck or cannot get past the basics of angular js

[@Cinicraft00]

You are the fucking man! This is the best Angular tutorial on the interwebs.

[@n8guy]

All intro until 8:05. IMO, start there.

[@JeffWeakley]

Having a coherent, high level view (with just enough deep dive to know where I want to get to in my learning) is a great formula for me. Awesome, understandable intro to what can be a complicated subject in the wrong hands. thanks

[@paulventura3118]

Very helpful tutorial. I love how you present the overview of angular before diving into code itself. Keep it up Dan. Thanks!

[@FLYBYMEable]

where to find the code for the app at the end?

[@ss27051980]

Hi guys, I was struggling to get the route providers working in the version AngularJS v1.2.26, it seems that there are some changes in the framework and people who might follow this example might not be able to get it working. I understand that there is a link on the video mentioning this, however like me for those who missed link here is the working code. 1. add link to angular-route.js (ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js) 2.inject the ngRoute to module object. var appDemo = angular.module('appDemo', ['ngRoute']); The solution would be working after this changes. Regards Suresh Sharma

[@PSIemilia]

Hi Suresh, I was wondering if there is a step missing in your suggestion above? I can't get routing to work, using your steps. I read somewhere that you have to be running through a web server for routing to work. Is that true? Dan, great video. Lots of light bulb moments for me, except that dang routing! Yes, I'm a relative noob to angularjs.

[@DanWahlin]

PSIemilia Sorry to hear you're running into a problem with the routing. The steps listed in the comment above are correct so I suspect you might have another issue. I'd recommend selecting ctrl/cmd + shift + i in Chrome to see if you might have any other script errors going on.

[@PSIemilia]

Dan Wahlin It turned out I did have a bug in my code. I started over and tried again, and it totally worked. And yes, I did use Chrome's inspector and console to see what hidden issues there were, and there were no script errors. Go figure! I'm sure it was something I missed. I have other code problems now, but unrelated to this exercise. I'll get it, I'll just keep plodding along. :)

[@pixelomo5180]

I ran in to the same problem, checked my code for ages and there were no syntax errors, I changed my angular sources to: and changed the module object to: var demoApp = angular.module('demoApp', ['ngRoute']); and now it works :)

[@UsernameNULL755]

Alan Sutherland Suresh Sharma i followed both fixes and none of them worked, i keep getting "modulerr" error...

[@lwe1231]

After a couple of months of trying to grasp the essence of angular, I finally watched this video. Thanks very much for a well-organized presentation and great delivery. The tumblers are finally in place.

[@jploudre]

What a great introduction to Angular.js! I loved how you showed some code (reading and understanding) then wrote the code showing your process.

[@ImmacHn]

This is one of the most B-E-A-utiful things I have ever seen.

[@gugldisniland]

I get an error on SimpleController saying function undefined. I dont get the customers list like in previous examples, just the entry form. Is there any updates since this video is published? Tnx for the video

[@gugldisniland]

+igor domijan here is all code github.com/idomijan/angularController/blob/master/studentController.html

[@DanWahlin]

+igor domijan Please see the red note in the video where controller functions are introduced. Starting with Angular 1.3 and higher you have to put functions in modules. Modules are covered later in the video. You can also download the demos (see the link at the beginning and end of the video).

[@MiikaKontio]

+igor domijan I had same error and found out that in Angular 1.3 and higher you cannot put controllers as global (use ng-controller directive). Instead they have to be set to certain app module as .controller like this in the javascript: //declare module var myAppModule = angular.module('app', ['ngRoute']); //configure controllers myAppModule.controller('SimpleController', SimpleController); //controller functions function SimpleController($scope) { $scope.customers = [ { id: 1, name: 'test1', type: 'animal' } ]; }

[@kmajid6484]

tried using ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js it works with video tutorial

[@bobbymahalanabis]

one of the best videos to start learning angular.js. Dan explains things so well, its a must watch video. Thanks mate for making this video. Cheers

[@Elric54]

Well done. This is the best AngularJS intro that I've seen. I wish I saw this when I started with Angular.

[@mahsahassankashi4303]

Thank you, it is awesome

[@danbackyardson2532]

Nice tutorial, I'm kinda forced to learn AngularJS in 2020, because stupid legacy code

[@Daijyobanai]

I'm only 21 minutes in and I'm impressed. Nice work by the Angular team and nicely put together and presented by Dan. Very easy to follow along at a nice not-too-fast-not-too-slow pace.

[@nagendragpu]

I really appreciate you doing this short tutorial on angularJs very informative,upto the point and covers lot of basic stuff! Thankyou

[@saraiaragon2985]

Hi Dan, Nice video, I got stuck in the part of controllers, when I try to use SimpleController, it doesn't show anything and I get the error that the function is not defined.

[@taniaaranda673]

+Saraí Aragón did you fixed it? i just got the same error

[@saraiaragon2985]

+Tania Aranda Hi Tania, I did fix it, but by the moment I don't remember where was the error. If you can give me more info I gladly help you.

[@ganapatiprasads5794]

+Saraí Aragón Hi Sarai, Even i faced the same issue. If we are using angular 1.3 version and writing controller without creating module , will leads to this error.

[@saraiaragon2985]

+Ganapati prasad yes Ganapati, that was the issue

[@taniaaranda673]

yes i had the same problem and had to make a module

[@XsmaelTheBest7]

Who's is watching in 2019 ?

[@asifkamal166]

me..I have a ques... if i write the src for angular.min.js like him in the bottom it does not work...i see the name in curly braces in the html body...but when i moved it above it worked....Can you plese tell me why??

[@tienquangcao7832]

hi, i'm just heard about in the future they will unuse AngularJS, is that true?

[@brianfabrizio4676]

Only 1/3 of the way through this but it is already the best AngularJS tutorial I have ever come across. Very well done.

[@DanWahlin]

Thanks! Glad to hear it was helpful. It's a bit old now, but it still provides a quick look at the core concepts to get started.

[@Krishnan1509]

That was a very thorough introduction to Angular JS. Thank you so much.

[@sunmustbedestroyed]

For some reason the controller syntax you use here doesn't work for me. After some research I found another way that worked: var app = angular.module('simpleApp', []); app.controller('SimpleController', function($scope) { $scope.customers = [ { name: ''', city: '' }, { name: '', city: '' } ] }); Any idea why this is? Is it some new version of Angular that demands different syntax?

[@DanWahlin]

John They changed how it works starting with version 1.3. There's a note in the video about that actually and using modules is shown a little later. Glad you got it going. KZbin doesn't allow videos to be updated unfortunately which is why notes have been added where appropriate.

[@sunmustbedestroyed]

Dan Wahlin Thanks for your reply. Sorry I must have had the annotations turned off. Great video by the way. Cheers!

[@DanWahlin]

No problem at all - easy to miss those. I wish KZbin would just let me update the video but they don't unfortunately.

[@tblancog]

John Same thing happened to me, I had to check out the docs and try again. However this is a great tutorial, keep up the good work +Dan Wahlin

[@brianvanvlymenpaws]

Dan Wahlin wish

[@GauravGoyal1911]

Hi +Dan Wahlin.. Very Awesome Video. Could you please update it to latest Angular Version.. ? It will help us more.. :)

[@wazels]

Finally watched the whole video. I've already touched some Angular but this video really helped cement some things. Thanks a million Dan!

[@joshcampos597]

Best AngularJS tutorial in the least amount of time, thanks so much for this!

[@EmcaBorg]

Bug in .controller('' SimpleController ', function ( $scope, simpleFactory)){ }, you must include dependency, just change to .controller('' SimpleController ', [ ''$scope' , 'SimpleFactory', function ( $scope, simpleFactory)){ } ],

[@seanthayer2005]

Using AngularJS >= v1.3, the step of removing ng-init and using ng-controller with the $scope variable (around 28:30 in the video) will fail with this error: docs.angularjs.org/error/ng/areq?p0=SimpleController&p1=not%20a%20function,%20got%20undefined Global controllers will no longer work by default. See migration doc: docs.angularjs.org/guide/migration And therefore you'll also have to initialize $scope by passing it as a string when registering your controller function, since you're passing it as an anonymous function to the angular.module.controller method. See **Setting up the initial state of a $scope object** here: docs.angularjs.org/guide/controller

[@DanWahlin]

Yep - this was made during 1.2 and KZbin doesn't support video updates unfortunately (have to create a completely new video). Check out the notes that were added about global functions though in the video - that's covered.

[@seanthayer2005]

Dan Wahlin Great. I was just following along on my laptop, ran into this problem, and thought I'd f'd it up in some way. I should have watched the whole video first. Great vids BTW. Thanks.

[@drum9119]

Dan Wahlin Can you please clear this up? Why is this not working???

[@DanWahlin]

Angular 1.3+ no longer allows stand-alone functions. You have to put them in a module starting with 1.3. That's covered in the video (and there's a note about the change they made).

[@drum9119]

Dan Wahlin Thanks for the fast reply! All right, I guess I haven't got that far yet, and since you mentioned stand-alone functions aren't the way to go, I won't worry about it. Thanks for the tutorial!

[@chad74721]

You have taught me more about Angular in 70 minutes than I could have learned in weeks by reading my Safari Online library. Thanks so much, Dan. I can't wait for more tutorials.

[@emilycraig3511]

Great video! I spent several days looking through various resources to try to wrap my head around Angular - and this video by far has been easiest to understand. Thanks for this!

[@SanjayKumarme]

Wonderful Tutorial.. ! >> 129 Downvotes? Morons... Ignore..

[@SamarianHalo]

+S K Amaan True it was wonderful. I would love to see him work live on www.livecoding.tv definitely would tune in and donate or hire him.

[@malkitsingh01]

I recently got change to work on ionic framework, was in real need of understanding this angular quickly, great presentation Dan...you made it easy to start up with. Thanks.

[@koundamanee]

This is a very simple and clear demonstration of AngularJS fundamentals. Thanks!

[@zamba3612]

This was just a really, really great tutorial Dan. Kudos. You packed a book's worth of information into an hour.

[@JuanFVasquez]

More than a year later and this is by far the best tutorial to get started with AngularJS. Other tutorials start talking about factories, controllers or services as if you where familiar with the terms, here you get a good explanation about the concepts and then do the coding.

[@MohammadSamiulIslam]

I understood everything and that doesn't happen often! Beautiful explanation Dan, great one.

[@MoreDanYouKnow]

I'm watching this in 2020 for nostalgia reasons. This video was sooo useful for me when I was first learning Angular in 2015

[@adityamarreddy7082]

this is the best video I ever watched. I learnt something from every second of it. Thank you so much Dan.

[@gimmeshelter1969]

Super job Dan. Everything explained in detail and easy to understand. Thanks!

[@jeffj1544]

Of all the instructional videos that I've viewed over the years, this was by far the best. Great examples, clear explanation and well articulated. I'm new to AngularJS but this is what I needed to understand the basics and I'm ready to dive in. Thanks Dan.

[@EDISTIZU]

This is the best tutorial on Angular icould find, and i went through a lot . . . you have a way of simplifying things that makes it easy to follow. Best hour ever spent

[@kenthhagstrom461]

Thank you, the best basic explanation of angularjs I've ever seen!

[@FilipBekic01]

This is great - you helped me actually understand how AngularJS work and i got a whole picture in my head now. Before this video, i didn't see the purpose of AngularJS but now i see it's really powerful, thanks!

[@smvishnukanth]

Hi Wahlin, Thanks for such a nice video explaining Angular in detail. Your effort is much appreciated. I got the 'can do' confidence after watching this video.

[@MrVirtual1992]

This video is just blessing for angular-beginners as well as developers who really want to brush-up their fundamentals. Thanks a lot for this video.

[@u0249898]

I needed a refreshment on Angular and this is perfect! thank you sir! If your controller doesn't work, don't panic! it isn't your fault. Just move it into a module. New angular requires putting controllers in modules.

[@yb9682]

Very good overview to angularjs in one hour. Nicely explained. Thanks Dan.

[@pawanpillai]

Best AngularJS tutorial on the web. Saw it 5 years back and it helped me and many others start AngularJS. Dan Wahlin should make another free 60-ish Angular 7+ tutorial for the next generation 👍🏼

[@haldaneprince184]

Excellent tutorial. Provides the fundamentals to start my first Angular project.

[@DanielBeckel]

Dude, I had to pause the video in between just to say that is amazing learn things when we have teachers like you. I was dying looking for a good tutorial that explain why, when, how and the best practice of coding but I couldn't find. And when I was up to give up, I found your tutorial that brought me to life again. Please, make more video like this one, for humanity's sake. Your tutorial have the best didatic I've ever seen. Thanks a lot for sharing your knowledge. I'm up to share it with my friends.

[@TrondHus]

One of the most stimulating 60-ish minutes I have spent

[@rickfranklin4196]

Thanks for connecting all these dots. Just couldn't see what was going on before this video. Great work.

[@qingyang7719]

Awesome video! Briefly but clearly introduced all common fundamental concepts of Angular JS.

[@johnathonkarcz6605]

thank you for the great video. Cleared up a lot of things that other tutorials seem to breeze over without much mention of what is going on.

[@islandmystic2]

Took me a week to get through it. Wonderful! Thank you so much Dan!

[@heikoschwarz556]

Useful and clear tutorial! Loved the overview and other things that are not immediately obvious from reading the docs. Thank you Dan!

[@AnilNatha]

Thank you! This was a great way to understand the basics of AngularJS for those just starting out with it.

[@Jsda718]

I'm learning Angular to work with Ionic, this tuturial helped me out so much thanks a bunch!

[@BharatKhianiOnline]

This video has really helped me get started with angular. Its better than reading a book cos then, if you get stuck, your only options are SO or forums, but the way Dan explains the concepts and the way the samples are constructed its really a breeze to learn. I was against learning it but i can say that this video has convinced me that angularjs is something we can't really ignore. I'm sure it will help a lot of other beginners too. Every minute is worth it. Thanks Dan :) really appreciate your effort.

[@smplx]

Absolutly amazing tutorial! Ive been offfered an internship to work with AngularJS and this definetly help me get started!

[@HolySpiritBreathing]

That was hands down the best overview of Angular I've seen. Thanks.

[@DanWahlin]

Really appreciate that Allen - thanks! I'm glad to hear the video was helpful.

[@I3PREDACON]

Amazing video dude, you really simplified things and made everything super easy to understand!

[@craiglavender5540]

Excellent tutorial. Helped form the bigger Angular picture. Thank you Dan!

[@aroubin]

Thanks for a great overview of Angular, this is a great way to get started quickly.

[@AnujitNene]

Hey Dan, this is a really great fundamentals video to Angular JS. What is really important in learning a new library is the knowledge on all the different pieces and how they all fit in together. You've done a great job in introducing these different pieces.. Especially those two charts used in the video were really helpful and cleared a lot of confusion. Thanks for this! I wish I find something similar for Node JS which explains its 'different pieces'!

[@francisbaconcheeseburger]

Just wanted to say thanks. This is a valuable resource for people like me, who are learning angular.