AngularJS Fundamentals In 60-ish Minutes

[@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

[@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.

[@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!!!!!

[@KindnessOrme]

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.

[@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!

[@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! :)

[@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!

[@AcceleratedIdeas]

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

[@universalproblemsolver]

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

[@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!

[@venkataramanr9535]

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

[@DanWahlin]

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

[@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 👍🏼

[@n8guy]

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

[@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.

[@camel_doctor]

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

[@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.

[@JoshuhaOwen]

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

[@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

[@invinciblekd]

Best tutorial on AJS ! To the Point !

[@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.

[@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

[@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.

[@DoctorCobweb]

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

[@DanWahlin]

Thanks!

[@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.

[@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

[@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.

[@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

[@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!

[@SharifKhan]

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

[@FLYBYMEable]

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

[@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.

[@TheMalni]

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

[@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!!

[@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

[@freedbanl1768]

Although almost 4 years old now, still a great start for the angular newbies. Thanks a lot for a great jumpstart!

[@steverogers9453]

Agreed. Although AngularJS 2 came out, AngularJS 1 is still pretty relevant.

[@ampnezztalaga9743]

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

[@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.

[@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...

[@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.

[@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?

[@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!

[@Cinicraft00]

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

[@camaulay]

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

[@EmcaBorg]

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

[@digitalkov]

Very good intro to Angular JS. If you are new to AngularJS, watch it. Worth every 60-ish minute of it.

[@MrDeerings]

Thanks Dan, good tutorial, nicely spoken.

[@AlekseyFilippovHuzzah]

Watched it yesterday!

[@KimDanMsc]

What version/flavour of Visual Studio are you using?

[@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.

[@danbackyardson2532]

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

[@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.

[@JasonCtutorials]

thanks for this awesome tutorial.

[@Holdino_]

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

[@mahsahassankashi4303]

Thank you, it is awesome

[@robert9060]

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

[@GauravGoyal1911]

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

[@Psicoeducazione]

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

[@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!

[@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.

[@thearchitectsofindia]

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.

[@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.

[@LaVengeanceInc]

Wow! This is a superb example of how a tutorial should be recorded.

[@l4zy_jake]

This sets a new standard for what coding video tutorials should be. Terrific stuff, thanks.

[@DanWahlin]

Appreciate it David - glad to hear it helped you out!

[@chrisjansen8984]

Dan - I had the exact same experience you mentioned in the first 10 min of the video. A lot of confusion and then, a moment of clarity. Thank you for putting this video together!

[@bagoquarks]

An awesome investment of 70 minutes and 49 seconds of your time. I give this 5 out of 5 stars! BTW, for newbies like myself, be aware that the Angular 'routing' in this video is within the client side. 'Routing' between client and server is a separate topic. A solid grasp of Javascript functions and HTML layout is recommended prior to watching.

[@goldenbearkin]

I am from Hong Kong. This is just amazing, better than anything AngularJS official.

[@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

[@kushfanikiso]

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

[@MarkoMijuskovic]

Best damn beginner tutorial on AngularJS. As usual Dan does a great job of starting with simple example and then expanding on it to where in the end everything just makes sense.

[@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.

[@EricBishard]

When you jump to new code, be sure to scroll and let us see what you have off screen, I couldn't get my project to build after the View1 & View2 portion of the video. Other than that Great video! I have learned a ton! Can't wait to mix with MVC & Web API

[@inigosmith331]

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

[@vi-kaivladyslavfang7593]

Thank you very much, Dan.People like you are making this world better by helping begginers to get the information they need!!! Thanks!

[@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

[@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.

[@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.

[@SaifRaihan28]

So far I found this was the easiest and simplest Angularjs fundamental Tutorial. Thanks for the awesome video. Highly recommended for complete beginners :)

[@fadichamieh]

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

[@ss27051980]

Dan this is one heck of a tutorial, prior to this i was ignorant to AngularJS but your video has thrown in 'a lot of bulbs'. It is one of those tutorials that hold the person from beginning to end. Your articulation and practicals were awesome keep up the good work and continue to enlighten others the similar way.

[@francisbaconcheeseburger]

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

[@mikerouse9741]

This is *the* AngularJS video I have been looking for. Finally someone explained $scope in a way I can 'get it' and carry with me.

[@wazels]

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

[@smplx]

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

[@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

[@jayeshmali299]

almost 6 years old but still useful and clear and helpful and concise , nice video really

[@ZeeshanZakariaz]

This was extremely helpful. I was wondering for a while what is this AngularJS and how to approach it for learning purposes without wasting too much time. Now I know what it is and I can confidently make an app for testing/learning purpose using this framework.

[@reasonableroger6115]

Top notch educator - thanks Dan. I reckon I've saved about 4-5 hours by starting with this.

[@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!

[@masud554]

This becomes the kick start video for all who wants to learn angular.

[@Jsda718]

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

[@nagendragpu]

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

[@Unplugged_Bits]

Hey Dan, Thanks for your tutorial. Am a student of yours on Plural-sight, You're a great instructor. God Bless You Man...

[@jonmayer]

This is an amazing video for getting to know AngularJS from nothing. I was trying to figure out the basics and got completely lost. The way this is described in the video is just fantastic. By the end, you can easily extrapolate to create very complex applications.

[@staticrealms]

I was very frustrated with the complexity of Angular but after this video I feel I have a better understanding as to what is going on and how to start building dynamic pages. So thanks Dan for this video.

[@KlarthArche]

Got me running in 2 hours-ish, following your examples and doing htem on my computer. Crystal clear comments, can't wait for the one in Angular 2

[@DanWahlin]

Hoping to start that soon once Angular v4 is officially out (soon). They're skipping 3. :-)

[@heyheyhey7757]

Man im new to angular, so i tried out all tutorials on the web.... I think this is the BEST one for beginner.

[@heyheyhey7757]

And please make an updated one for Angular 1.5 !!!!

[@Elric54]

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

[@albxdotcom]

I found in newer versions of AngularJs, you have to add ngRoute as a dependency for your application because it is no longer part of the angular.js file. 1 - You will need to include this script (download at AngularJs site): 2 - Then create application to include route dependency: var demoApp = angular.module('demoApp', ['ngRoute']);

[@joshcampos597]

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

[@kishykumar]

Pretty good demo. Clarified all the important concepts. My aim was to learn Angular concepts in the least possible time so that I can work on an already-existing app. This demo was the best and the first I hit.

[@jchGARZA]

I know that the video is outdated, but I think it explain the fundamentales very easy and almost in an ELI5 way , thank you very much !

[@DanWahlin]

+jchGARZA Thanks - glad to hear it helped.