Introduction to Angular JS
Вставка
- Опубліковано 29 вер 2024
- Walk through building a sample application with AngularJS to learn some of the basics along with some commentary that contrasts it with jQuery / Backbone.JS
This is part 1 of a screencast series:
Part 2: "End to End with Angular JS" • End to End with Angula...
Part 3: "Security with Angular JS" • Security with Angular JS
Part 4: "Frontend Workflows with Grunt and Angular JS" • Frontend Workflows wit...
Part 5: "Testing Strategies for Angular JS" • Testing Strategies for...
Excellent Tutorials by John Lindquist: www.egghead.io
Basic Source: github.com/dav...
Advanced Source: github.com/dav...
An Intro to Lineman: • Say Hello to Lineman
All resources at one url: blog.davemo.com...
This is one of the best way that anybody can give an Intro to Angular.
I really appreciate the efforts and deep knowledge of the presenter.
When I become a millionaire javascript developer (heh) I'm DEFINITELY going to remember you. I *love* the way you explain things, especially your pace. You don't waste time with the simple stuff, while at the same time not focusing solely on stuff that requires loads of experience.
Thank you for not "stopping the video" to fix something without "looking silly". That's hard to find in tutorial videos, but witnessing your train of thought following an "oh no, its not working!" moment is VERY valuable.
I wish you would make a complete series. THANK YOU!!!
Oh brilliant - 5 minutes further into this video, you stopped!! *facepalm*
I considered posting the above message when I was watching another one of your other videos, and HAD to when I saw the same thing here. You're a good instructor... you should teach.
Alex McMillan thanks for the encouragement; teaching and sharing knowledge is definitely a passion of mine :)
Sadly not captioned. Poor deaf me. :-p
thank you so much.
i have been looking for all different videos on angular js since yesterday, but yours is awesome and actually clears loads of scary stuff being taught in other videos.
Glad I could help Harpreet Bhatia :)
sir ***** when it comes to database/server interactivity, I get confused and have questions.
NOTE: i have only watched your first view today, and have not much gone through Angular API yet
As I might use it(angularjs) with some php framework(codeigniter specifically )
1) since we load templates via templateURL and giving the name of file, when using framework i need to provide the server controller function and display template. Is this standard or is there something better?
2) example like in your video we create the login controller. Now, actual login will require server interactions too. So we can use ajax and stuff within those??
i know they are stupid questions, but i dont want to end using normal JS between Angular specific syntax.
Harpreet Bhatia Watch the end-to-end video that's up next and then the workflows video, they should clear up any questions you have about interacting with the API :)
***** yeah working on that since morning, few stuff has changed on angular API.
currently stuck with
reference error: _ is not defined
despite of including angular js
Harpreet Bhatia that sounds like you are using the lodash or underscore library in your code and not actually including it...did you check your import statements?
It worth every second spent on viewing this video. Now I know how Angular works and I'm amazed... Thinking about rewriting my frontend...
Thank you for this tut. We are using Angular at work, and it has always confused me. I now believe I have a solid foundation of knowledge to build upon. Thanks
Hey Caleb, thanks for watching! I'm glad the video clicked with you. I'm not using any particular angular plugins for sublime, the auto-complete you saw is just the default behaviour that Sublime Text 2 provides.
Thanks, I've watched a few videos, and this is the most informative I've seen. Under an hour too!
Very cool how Angular allows how models to stay in sync with input elements as well as scopes looking up for parent bindings!
Great Video =)
Keep the keyboard - love it, love this video. Best intro I've found so far (and I've watched a ton).
Hi Brian, the $ is just a convention to indicate that the thing you are using is part of the core angular featureset. You can create your own dependencies and inject them and even prefix them with $ if you want; there is no magic around the $ at all, purely convention. I typically avoid prefixing my services/directives/controllers with the $, as I like the distinction between "my code" and "framework code" that is apparent with $ on all the angular things. :)
Great video. Great Framework.
Really appreciate the simplicity of your presentation.
Hey John, if you check the video description there are a bunch of links at the bottom, the last one "all resources at one url" has links to the command line utility I used to run the static webserver. It's a simple terminal alias you can add to your ~/.profile on Mac/Linux :)
Espresso Soda / Monokai Soda are the themes, and Menlo is the font. You can find the themes in Package Control if you have it installed :)
I think that the "Angular Way" is a little more flexible than just using the built-in directives; but I agree you can do a lot with the built ins. I think there is a fine line between using all the directives you mentioned vs extracting to a higher level abstraction and I wanted to show the power and self-documenting nature of being able to generate your own attribute directives. :)
You're welcome! Glad you enjoyed the video :)
Thank you for making this video. I have been looking into backbone for a while to see if it is something I wanted to use for my projects. After seeing this video and looking John Lindquist's videos I have decided to use AngularJs. I am going to be building a chess application along with a dev blog to update on the progress of the project. I am also going to link back to this video in my first blog post since it was the inspiration. Let me know if there is somewhere else you want me to link also.
Thanks Scott! I'm happy this helped you out :)
10 minutes in and I can't say that a clear explanation as to what Angular JS is or how it replaces or enhances existing frameworks like jQuery. Way too many "intro" videos that literally dive right into to the code up front without first explaining stuff in a more generalized fashion such as how it would be used, types of apps, etc.. Please, if you are ever thinking of making an "intro" video, *don't* if you plan on leaving out the most fundamental issues that developers looking at the technology for the first time need to know.
Hey CowsRule, I'm sorry the cast didn't live up to your expectations. As ***** mentioned you might be better served starting with a different set of tutorials. ***** over at egghead.io does a fantastic job with more topical/focused casts, you should check them out :)
***** Then in the future, leave out the word "Introduction" from your title.
CowsRule Well, it is an introduction to the basic Angular concepts so I think the inclusion of "Introduction" in the title is appropriate; I think what you are looking for is perhaps an introduction to single page apps or client-side MVC :)
***** A better introduction to Angular is:
tutorials.jenkov.com/angularjs/index.html
Or for developers familiar with jQuery:
"Why use Angular instead of jQuery":
stackoverflow.com/questions/18414012/why-use-angularjs-instead-of-jquery
and
"How is Angular Js different from jquery"
stackoverflow.com/questions/13151725/how-is-angular-js-different-from-jquery
CowsRule Awesome! I'm happy to see you found some things that worked for you :)
Thanks for keeping this real! Learned a lot from this video
Nice vid and very instructional! Thanks for making it! Will go deeper now on angular, seems very promising.
Very useful vid, straight forward and clear, Thanks alot David
Awesome! Glad it has helped bring some clarity to Angular for you :)
This is the video I'm looking for
Yes, I often find myself skeptical of "new" technologies; in this case I was pleasantly surprised at how nice the experience of working with Angular is. Thanks for watching :)
I'm working on my next screencast that will showcase a few different testing strategies for Angular JS, stay tuned to my channel it will be coming later this week :)
Thanks for the great tutorial.
Hi Django, did you add the `window.scope = $scope;` line to your controller as seen at 19:56? If you get stuck you may have missed a step or some of the markup in a template somewhere, but you can always check out the repository code on github (linked in the video description as "basic source"). Let me know if this helps :)
Glad it helped you out Benoit :)
Cool, thanks for this great tutorial..!!
Hello,
Thaks for nice and userfull totorial :) But, do you know that many things are not working with new version of angular.js? For example need to use angular-route.js and ngRoute if you whant that your $routeProvider work properly. Something is different with gn-model and adding $scope but this one i can't understand... With new angular.js version, this page event not starting... If you can, please fix thease bugs it would be really wonderfull. And sorry for my terrible english language :)
HI There Thanks for more info which do make sense. I was trying ur directive but in my case i am trying it within ngrepeat but it is not updating my property.
Very nicely explained.
Amazing Intro. Thank you.
Great video, explained very well!
Hi Dave, thank you very much this insightful tutorial. Do you have a link the the skeleton you used in this tutorial? What version of angularjs did you use? I'm using the latest version 1.2.14 and got an error "Error: [$injector:modulerr] Failed to instantiate module app due to:..." on line 6 angular.js. Any suggestion, Id like to finish this tutorial. Thanks again!
Me too.
Great video, David!
Thank you David!
But what about the "XHR finished loading" messages.
would be nice to see how many calls for data my application does.
Hello David, any advice on using angularJS and jQuery Mobile together? have you ever done a project like that?
Nice! Glad this was helpful, keep up the good work :)
Thanks for this video.
david can you pls explain also those css file in this project...how they it works in html files.. tnx.
Sweet, thank you very much, and so quick :)
Great tutorial!
Great tutorial! thanks
cool and very intresting thanks
Thank you,very good video!
Great video!
Please help me out, this "style" of naming convention you use on 30:36, how do you spell it when you said "...you're gonna use comma-case"? I need to know how this convention is called (I know it's common in Microsoft frameworks)
I guess on 30:30 it is spelled "dasherized" based on dash, I suppose?
Hey imbrod, I was referring to "CamelCase" convention en.wikipedia.org/wiki/CamelCase the opposite of which is "snake-case" :)
*****
Thank you!
This tutorial seems fine. But I've spent the last hour trying to figure out why my code wont work 15 minutes in and I can't. I downloaded all files from GitHub and am working along with the tutorial and it won't work. The LogIn route never appears. I"m jumping ship to another Tut for now but would really like to continue along with this one.
Thanks.
Jason Wilson if using version 1.3 of angular you need to download and include angular-route.js, and pass the ngRoute as dependency to your app module, for me it looks like this: var app = angular.module("app",['ngRoute']);
this tut is very good for starting so it would be a pity to pass on it.
+hexxen00 Thank you for posting this. It was driving me insane. I hope Angular2 isn't as unstable with kinds of updates.
awesome!
thank you :)
good video, thanks
Awesome! Thanks :D
You're welcome! I'm glad the content has been useful to you. Good luck on your chess app and let me know how it goes; feel free to link to this video or to blog.davemo.com :)
God this shit is so confusing. I hate watching people lightyears smarter than me...
lol it might sound corny but just stick with it. everything you dont understand look it up and come back frequently. it gets better.
You have to understand and realize that AngularJS is complex/hard even for experienced Developers. This is as good as an intro to AngularJS as one is gonna get. Go easy on him!
nobody is smarter then you, nobody is better then you, they just have learned different things, don't you give up, and don't you surrender!!
Hi I just found out that this tutorial is not up-to-date.. If you are trying to implement this you have to install the angular-route and include it. I just typed "bower install angular-route" in the terminal (on mac) and then just copied the angular-route.min.js into vendor/js. One last thing you also have to type "var app = angular.module("app", ['ngRoute']).config...."
Otherwise this is one the best tutorials of AngularJs I have seen and learned from!
Good Job David! Keep doing stuff like this!
This was a good session, David, could you please let me know how you deployed your app to the http server, i have apache tomcat 8.0.26 but for some reason i just cannot deploy it!. pl advice.
I see alot of comments on how confusing or hard it is to follow. I must say that this was by far the most understandable tutorial for me on A. Thank you for this !
Thanks, I did enjoy and learn a lot watching this tutorial!
I'm new to Angular and ran into some of the same issues as listed below. With version 1.2.14 the routeprovider does not work. You need to add in the ngRoute dependency. Took me an hour looking at this to understand that this is an actual issue with this version and they pulled out routing to a separate lib. Also be sure to work with the non-minified version of Angular so you can get good error messages.
For those looking for help I did this:
var app = angular.module("app", ['ngRoute']).config(function($routeProvider) {
Then just make sure you include the angular-router.js
Thanks!
Thank you for the correction! Finally my code is working now!
Awesome
Found some strange errors occurring using Angular 1.2.9, just a heads up for new people: You may want to intentionally use a version lower than 1.0.9 (So far 1.0.8 seems fine) while following this tutorial, and then later look into how to make the code compatible with the latest version. If you use CDN link, just change the version number in the url to 1.0.8 and your good to go.
20min in and learned a ton, looking forward to the remainder. Highly recommend for those new to Angular.
what's up Derek
Angular my friend, trying to master its ways. Slow rolling, but coming along.
Does angular 1.3.3 do routes the way you did it around @11:00?
I came late.. Well, No exactly, actually the only thing that change is the $routeProvider, you have to download 'angular-route' library and then inject it into the dependencies of your app -> var app = angular.module('nameApp', ['ngRoute']); That's it. :)
Thanks David, learned a lot from this.
I used Node-Webkit to get the code running and everything you showed works.
Except for the hover-bug in Chrome, is also in Webkit, but I cannot switch Developer Tools off to make it function. (Emulate Touch Events?)
Do you have a suggestion how to get this working?
Dude, this is a very nice video, it got me started and I will follow all the screencasts linked here, Nice Job !!, I do appreciate that you take the time to do this kind of posts. You have my respects sir!
AngularJS : Introduction et premier tutoriel
AngularJS, est un Framework JavaScript développé et soutenu par Google et est devenu à la mode ces derniers mois. De plus en plus de développeurs l’utilisent et donc sa communauté a considérablement augmenté. Non seulement ils l’aiment, mais ils ne peuvent pas s’arrêter de le glorifié !
Lire la suite sur : www.cartel-belli.com/angularjs-introduction-et-premier-tutoriel/
Very nice introduction, not to fast and not to slow, it was really good. I'm about to watch your next vid on security, im hoping it will talk about the authentication. I am putting Angular on top of Yii. Do you have any experience with Json Web Tokens JWT? Id like to see how you use them. Cheers
routeThatRequiredAuth = [
'/app/home',
'/app/region/',
];
how can i protect a route with a $routeParams like this: /app/region/1
please #David Mosher help me
This was super helpful in the front-to-back use of angular, as well as the technical explanations of the diff components. Thank you!
David, you cleared up all the "magic" that was causing early frustrations. Thanks so much for taking the time to make this. Really appreciate your approach. You rock!
David, you have a donation jar? So far, your tutorial is leaps and bounds beyond anything else i've seen. Incredibly thorough, simple, and great coverage of the topics.
Thanks David for a well explained and much helpful tut. Just need to know why # is used in the URL localhost:8000/#/login?
The DI part, where you mention how minification mangles names and thus it is good to be explicit w.r.t. naming the dependencies, was very reminiscent of how in Java the compile code retain argument names if compiled in "debug" mode.
Do you know if it's possible to use $scope with PHP? How would that work if you set up a form with Angular to get user info and then send an email with PHP for example?
Coming from finishing a painful BackboneJS project, this tutorial has opened my eyes to the wonders of Angular. Cheers man
Hi Cristobal, when it comes to "lazy loading in angular js" there aren't any capabilities built into the latest release 1.1.5 that would enable you to lazy load controllers. Apparently in the upcoming 2.0 release there will be some lazy loading features built in. As for the problem of large controllers, I try to split my controllers up into smaller services or other injectable collaborators and always use a pre-processor like Grunt to concatenate/minify my scripts to achieve the best performance
I think it comes down to a question of suitability vs capability; either place is definitely capable, but I think it's more suitable to put that sort of logic in a Service (via .factory, for example) because the purpose of the Angular Controller is to connect the DOM with data on the $scope. Any logic in controllers that treads outside of that area basic DOM/Scope connection should be extracted out to a different level, like a Service; at least IMHO :)
It would be subject to the browsers that angularjs supports. If you check out the angularjs documentation this is what they have to say:
"We run our extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari). See Internet Explorer Compatibility for more details in supporting legacy IE browsers."
Hey ... this is the best tutorial i found about how to use the .factory and an easy way for login/logout and i found it by mistake. You should put a more specific name to the video or a description so it will be easier to find if u're looking for things like this.Good Job!
Have been looking into angular for some time now and must admit, it's amazing, you stop messing around with the dom, it's cool and I liked your video too. Very good and thanks for sharing. :)
Great tutorial, i'm working through it at the moment. But it would be great if you got a silent keyboard for your next tutorial, I personally find it really distracting.
Hi elmor34, you're right I didn't prevent anyone from going to the home page, the AuthenticationService was a pretty trivial implementation. I have some other ideas for a screencast where I flesh out a fully operational Authentication method for Angular, but I felt it was beyond the scope of this video :)
I have not used Angular with jQuery Mobile, but I have used Backbone with jQuery Mobile in the past. Things to watch out for: you may want to avoid Angulars $routeProvider _or_ use it but disable the jQuery Mobile route handling. Other gotchas escape me at the moment :)
hey I am totally new to js frameworks...& am learning angular js since a week but this login form doesnt turns out the way it has shown...have you used any speacial css for same
Hi Anthony, glad you are enjoying the videos. In the interest of best helping you, could you post a gist of your code on github and hit me up on twitter with a link to the gist (@dmosher)? UA-cam comments are less than ideal for debugging :)
I would try and watch all of the videos by John Lindquist at his website egghead.io, but if you are just starting out I would also recommend getting a grasp of browser fundamentals by watching my other screencast "So, You want to be a Front-End Engineer"
what did ou do to boot that dev server on port 8000? sorry for the dumb question supernoob here. I cloned the git repo and have this all up but I think it would stick better if I built it alongside this video.
Hi Bharat, I have a followup video with a more advanced look at implementing the AuthenticationService covered in this video in a complete end-to-end screencast in the next couple weeks. Thanks for watching :)
I love AngularJS!
Hey David, I assume you're referring to all the $ signs prefixing variables? Yes, those are angular framework built-in dependencies, but when making your own dependencies you don't have to use $ :)
Thanks! Angular works great with PhoneGap although you may have some trouble with the router if you are using it in conjunction with jQuery Mobile. Also, check out the angular-ui project :)
Hey Jim, I mentioned a little trick where I attached the $scope variable onto the window, window.scope = $scope; which allowed me to use the Chrome Dev Tools console to inspect and play around with things.
Sounds like you'll want to use either ng-view in conjunction with $routeProvider (covered in the video) or ng-include which allows you to include partials elsewhere in your templates.
Excellent tutorial, You explain angular concepts very well. Thanks !!
Very helpful, especially the point to make Authentication stuff as a service,it gives me a hint in my work, thanks!!
Thank you. So much better than the 'introduction' from the official AngularJS channel.
Hey Hafzal, you can get the stylesheets from the Foundation framework from Zurb, if you google "foundation css" you'll find it at the first search result :)
Thanks alot David! As a newcomer to the angularjs world, this was extremely helpful
Its 2015, Angular is at V1.3.15 as of this comment. Is this video still relevant?
Hi krishyy20, I have another screencast coming up in a few weeks that will focus on a real-world implementation of the AuthenticationService, stay tuned!
Just stumble on this (angular) ,all keep saying WTF time to time ,
THis is amazing !!!