Angularjs Tutorial for Beginners – learn Angular.js using UI-Router
Working Angularjs Code Sample on Plunkr:
This tutorial will teach you how to build a single page javascript application using Angular.js from Google. Angular is an amazing framework for rapid development and building stable apps with little effort.
I'm using UI-Router ( ) for this example, as I really like the way that functions over angular's built-in router.
Once you get used to "the angular way", you'll be building an angular.js application in no time.
Angular's templating, two-way data binding, and great way of separating concerns makes it an all-around great javascript framework.
Next up: Learn Angular Directives!
NOTE: At 30:15, there's an error because I forgot to change the Home Controller to match the new service syntax on line 5:
Friends.get().then(function(data) {
$scope.friends = data;
});
-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial – Tips for making web sites look great on any device"
-~-~~-~~~-~~-~-
Fantastic.
As a long time developer who never even looked at angular, I got a commercial site done in four days based on this tutorial and the followups I looked up . Thanks for taking the time. So helpful.
Will, thank you so much for taking the time to put together these tutorials! I’m a real back-end systems engineer (UNIX/Network/DB/Storage). I’m making my way toward web dev as a career change. Your videos have been incredibly helpful –thanks again 🙂
Awesome, that’s great to hear!
This was exactly the intro I needed. Immediate dive into the fundamentals and excellent pace. And you used the DRY method for teaching. 😉
Thanks a lot! Great video for a rookie to see what can be done rather than exactly how to do it (which could also be done by pausing a few times).
This tutorial is awesome, thanks for putting it together. One small thing I wanna point out though. When you’re writing the .config() for app.js, you didn’t mention that you moved the closing array bracket. That took me 3 hours to figure out!! Don’t get me wrong it’s good debugging practice for me but I thought I would mention it nonetheless.
Thanks again!
thanks man (y) covered most of the basic concepts, superb live demonstration specially the links added later to cover missed portions. i wonder how anyone can unlike this
Hi, your explanation on ui-router looks so easy. BTW, I was looking at your app structure and looks very good and fit the segregation pattern. May i know where I could explore the pattern? Thanks
This discussion has some good points on the Angular MVC/MV* pattern:
http://stackoverflow.com/questions/13067607/angularjs-client-mvc-pattern
Awesome tutorial, but when I went back to give it a try I couldn’t get past the first minute. I think it was because I haven’t really used the “router” part yet and I’m still pretty new to Angular so having all the right files in the right places can be overwhelming at times haha. I’ll bookmark this one for sure for future reference though. Thanks again for all of your tutorials!
@***** Thanks for the link. That will actually help me out a lot. Once I get the basics hammered into my head I’m sure this will all flow nicely.
Good stuff!. Writing minifier-safe scripts gets tricky sometimes and I can see its ‘weird’ syntax bit you at the very end. I tend to write my scripts without annotating and make use of ngmin project by Brian Ford to handle annotation. Github project available here https://github.com/btford/ngmin
Great tutorial Will! Do you have any plans on expanding on the MEAN stack architecture?
Thank You so much.. it was the best tutorial on YouTube as i was watching angular js tuts since 2 hours.. but i found your tut wonderful it helped me figure out some advance and basic features of Angular js..
Thanks! Really enjoyed this and very helpful to a total AngularJS newbie like me.
This is the tutorial I was looking for. Thank you!
great tutorial for beginners. thank you very much 🙂
Thanks a lot! That’s great tutorial for the beginners like me!
Thankyou for this amazing tutorial. Its soo frustrating when I sometimes get stuck at a point coz of some super silly mistake i make like missing out a semicolon or something. I beat myself up for that. It heartening to see that an experienced coder like you too get hung up sometimes like that 🙂
Once again thankyou for the wonderful tutorial.
Excellent, thanks for taking the time (and guts!) to push out a very live video. Makes the (under-estimated) role of UI-Router much clearer. Wish I had this 6 months ago!
This is one of the best angularjs tutorials I have ever seen. Thanks!
Great video! Covers a lot of ground in short order, and very clearly — thank you!
This is a great video. You explained every thing very well and I was finally able to get my angular projects working correctly
@Jesse Jaime Awesome, great to hear.