AngularJS Fundamentals In 60-ish Minutes
ฝัง
- เผยแพร่เมื่อ 29 มิ.ย. 2024
- 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 TH-cam 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 - วิทยาศาสตร์และเทคโนโลยี
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.
+Anthony Powell What you can do with AngularJS! Forum Application : github.com/amanuel2/ng-forum . Made in Pure AngualarJS
Thank you!
It should be in the description
Well it helps everyone I guess
Anthony Powell z
I'm watching this in 2019 because I have to understand old AngularJS code for my work.
god damn legacy code
Same with me bro
same....2020 and still AngularJS version 1!
hi there
Same here mate!
By minute 16 I was so excited I wanted to hug you! This tutorial is exactly what I needed. Very enjoyable, thank you!
Chareesa Graham You definitely win for best comment ever. :-) Glad to hear it was helpful.
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!
A single video to understand every basic concept of AngularJS. Good job man :)
+sangit dhanani What you can do with AngularJS! Forum Application : github.com/amanuel2/ng-forum . Made in Pure AngualarJS
sangit dhanani Nice to see you here man!
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.
Chris Samoiloff Thanks! Glad to hear it helped you out.
Impressive, most impressive. Thanks for spending the time to pass something back to the dev community Dan.
This is a great example of how to teach everything: important information first, from simplicity to complexity. Thanks a lot.
When you said "I didn't think that [Transclusion] was a real word" I was hooked. I thought the EXACT same thing.
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!!!!!
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.
Fantastic video. Went from ZERO to a working SPA in 1 hour. Thanks mate
Very good starting tutorial for beginners. Thanks for the wonderful work.
+Venkataraman R Thanks - glad to hear is was helpful!
Thanks for making this video. I learned a lot in a span of an hour+. And you're not boring :D
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! :)
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
Was a great intro and helped me understand the role of factories a bit better. Thanks!
You are a really good teacher Dan, thank you for the effort you put into making this tutorial, it's very much appreciated! :)
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.
Only 1/3 of the way through this but it is already the best AngularJS tutorial I have ever come across. Very well done.
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.
impressive tutorial. very high quality. thanks!
AMAZING. best explanation skills, u know your stuff. thanks!
Thanks!
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.
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!
clear audio in youtube... thanks man...
Best tutorial on AJS ! To the Point !
Cannot stress how useful and fun this video was for me, Dan. Thank you very much!
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!!
Thanks Dan, good tutorial, nicely spoken.
Watched it yesterday!
What version/flavour of Visual Studio are you using?
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
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.
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.
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. :)
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 :)
Alan Sutherland Suresh Sharma i followed both fixes and none of them worked, i keep getting "modulerr" error...
I learnt more in this 60-ish minutes than I have have watching all the Angular videos from Google. Thanks.
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 TH-cam, Much appreciated.
thanks for this awesome tutorial.
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!
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. :-)
"learning wall".. ha .. first time I've heard that expression
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.
I agree
Thank you Dan, even 2 and a half years later this has given me the best insight into Angular "in the round".
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
All intro until 8:05. IMO, start there.
You are the fucking man! This is the best Angular tutorial on the interwebs.
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.
Boy! One of the best tutorials I've done in a while.
This is one of the most B-E-A-utiful things I have ever seen.
Thank you, it is awesome
What a great introduction to Angular.js! I loved how you showed some code (reading and understanding) then wrote the code showing your process.
Very helpful tutorial. I love how you present the overview of angular before diving into code itself. Keep it up Dan. Thanks!
Nice tutorial, I'm kinda forced to learn AngularJS in 2020, because stupid legacy code
Who's is watching in 2019 ?
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??
hi, i'm just heard about in the future they will unuse AngularJS, is that true?
One of the best Angular tutorials out there. Genuinely worth the watch. Thanks a lot Dan.
Best beginners' tutorial I've found on Angular so far. Much appreciated.
where to find the code for the app at the end?
Bug in .controller('' SimpleController ', function ( $scope, simpleFactory)){ }, you must include dependency, just change to .controller('' SimpleController ', [ ''$scope' , 'SimpleFactory', function ( $scope, simpleFactory)){ } ],
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.
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!
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?
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. TH-cam doesn't allow videos to be updated unfortunately which is why notes have been added where appropriate.
Dan Wahlin Thanks for your reply. Sorry I must have had the annotations turned off. Great video by the way. Cheers!
No problem at all - easy to miss those. I wish TH-cam would just let me update the video but they don't unfortunately.
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
Dan Wahlin wish
Hi +Dan Wahlin..
Very Awesome Video.
Could you please update it to latest Angular Version.. ?
It will help us more..
:)
Finally watched the whole video. I've already touched some Angular but this video really helped cement some things. Thanks a million Dan!
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!
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
+igor domijan here is all code github.com/idomijan/angularController/blob/master/studentController.html
+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).
+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' }
];
}
tried using
ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js
it works with video tutorial
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.
+Saraí Aragón did you fixed it? i just got the same error
+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.
+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.
+Ganapati prasad yes Ganapati, that was the issue
yes i had the same problem and had to make a module
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.
Well done. This is the best AngularJS intro that I've seen. I wish I saw this when I started with Angular.
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
Yep - this was made during 1.2 and TH-cam 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.
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.
Dan Wahlin Can you please clear this up? Why is this not working???
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).
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!
Wonderful Tutorial.. !
>> 129 Downvotes? Morons... Ignore..
+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.
This was just a really, really great tutorial Dan. Kudos. You packed a book's worth of information into an hour.
Best AngularJS tutorial in the least amount of time, thanks so much for this!
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.
I'm watching this in 2020 for nostalgia reasons. This video was sooo useful for me when I was first learning Angular in 2015
Although almost 4 years old now, still a great start for the angular newbies. Thanks a lot for a great jumpstart!
Agreed. Although AngularJS 2 came out, AngularJS 1 is still pretty relevant.
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
I really appreciate you doing this short tutorial on angularJs very informative,upto the point and covers lot of basic stuff! Thankyou
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 👍🏼
That was hands down the best overview of Angular I've seen. Thanks.
Really appreciate that Allen - thanks! I'm glad to hear the video was helpful.
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.
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.
That was a very thorough introduction to Angular JS. Thank you so much.
I understood everything and that doesn't happen often! Beautiful explanation Dan, great one.
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.
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.
This is a very simple and clear demonstration of AngularJS fundamentals. Thanks!
Very good overview to angularjs in one hour. Nicely explained. Thanks Dan.
I am from Hong Kong. This is just amazing, better than anything AngularJS official.
Thanks for connecting all these dots. Just couldn't see what was going on before this video. Great work.
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.
I just wanted to thank you! I felt exactly the same way you felt when I started reading on Angular but thanks to this video my bulb lit up.. You should really make more videos like this!
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.
Super job Dan. Everything explained in detail and easy to understand. Thanks!
Awesome video! Briefly but clearly introduced all common fundamental concepts of Angular JS.
I had to pause and tell you that this video was very clear and understandable. I would
really want you to continue doing your videos in the future.
Hoping to do a bunch more. Thanks!
this is the best video I ever watched. I learnt something from every second of it. Thank you so much Dan.
Thanks a ton for this. I was so confused by just reading the documentation. This is really helpful.
Took me a week to get through it. Wonderful! Thank you so much Dan!
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.
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'!
Excellent tutorial. Provides the fundamentals to start my first Angular project.
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.
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.
Amazing video, thanks so much! Will start with AngularJS right now!
Thank you, the best basic explanation of angularjs I've ever seen!
Thanks for the crash course in Angular! You saved me literally hours.
Thank you Dan, This video helped me not only understand the Angular JS but given interest to know more about aJS
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