Screencast Soup to Bits: Shaping up with Angular.js JavaScript

  • GreggPollack
  • 13151 views
Badge-student

Locked Content

A subscription is required for viewing this video. Enroll now to get full access to all Code School courses and content.

Enroll Now Sign in

Comments

  1. Keuller Magalhaes said

    The Shaping Up With Angular.js course is pretty simple and cool for newbies web developers and a funny way to learn about Angular.js. Congratulations guys.

  2. namchester said

    An Awesome Course. Good job Guys!

  3. evan1234 said

    I enjoyed the course, but why are you guys doing:

    app.controller('StoreController', function(){ this.gems = gems; });

    Instead of with $scope like every other angular tutorial i've seen?

    app.controller('StoreController', function($scope){ $scope.gems = gems; });

  4. youngwerth said

    It would be nice if the books.js file you added to app.js for the array of books was included in the git repository

  5. Martin Foster said

    Woah - what is up with that font? My eeeyeeess!!! ;o) Excellent screencast though and a great complement to the course (which I also did today - yay I totally rule, and stuff or whatever). Awesome stuff!! More please!!!! (Can't wait for the second angularjs course!!).

  6. RJ Palombo said

    I'm with EVAN1234. Simply because every tute I see works with $scope.

  7. Faculty

    Carlos Souza said

    Thanks for the feedback, everyone! As to why we didn't use $scope in this first course, Adam Rensel wrote a very good response which I'll simply link to - http://help.codeschool.com/discussions/shaping-up-with-angularjs/57-out-of-date-for-new-course

  8. Faculty

    Carlos Souza said

    Obrigado, Keuller! :)

  9. Bruno Assis said

    Amazing course and video! Thanks :D

  10. Casey Kingsbury said

    +1 for Full House reference

  11. Stuart Stein said

    I didn't see the template that they're covering in the resources (but I may have missed it somewhere else). This is the right one, yes?

    https://github.com/codeschool/AngularReadinglist

  12. Jayphen said

    Wait, did this video just change? I was halfway through the video that was previously here & now I can't find it.

  13. Faculty

    Gregg Pollack said

    Jayphen: yes, sorry about that. We decided to do an improved video, as the old video ended up in a place we didn't like educationally. You can go with this one, or email me if you want a download link to the old one. Gregg at CodeSchool.

    Stuart: Yes, that's the link for the old video. The github link on the resources page here now points to the new video repo.

  14. Jayphen said

    Thanks Gregg, I figured as much. It's all good — going over it again helps anyway.

    I just cloned the AngularJSSTB repo and it seems to have some bugs. The review form displays open always, the toggle button does nothing & the genre checkboxes aren't displayed in the form.

  15. Jayphen said

    I've just submitted a pull request with fixes for the bugs I found.

  16. Kyle Tyacke said

    Hey Guys (/gal), I just cloned the project from github, ran "npm install", then when I ran" npm start" I was presented with the following error: "Error: Cannot find module 'mkdirp'".

    After some digging around, I found the offending module: "AngularJSSTB/node_modules/http-server/node_modules/portfinder/". I then cloned the angular-seed project and did a few side by side comparisons and found that there is "node_modules" directory under the "/portfinder" directory which contains the module directory "mkdirp". I copied this directory from the angular-seed project into the corresponding directory in the AngularJSSTB project and it resolved the issue.

    I'm not sure why this module was missing (or possibly not installed when running npm install) but I thought it was worth mentioning since I'd assume others will run into this issue as well...

    Thanks for the great tutorial! Would love to see a "best practices" video or something outlining the general structure people are using when configuring somewhat larger projects as well!

  17. Kyle Tyacke said

    One other thing that was a bit confusing: When I cloned the "Github source of what we built" (i.e. the AngularJSSTB project) I expected that it would be the completed project (given the "what we built" name in the link). Instead, it was simply the skeleton of what was created. This would be fine, except the rest of the video essentially walks through a ton of copying and pasting which we can't really do on our (the students) end. If you are going to go with the start to finish style, you might want to provide more content to the users so that they can follow along with creating the app, or at the very least, make the fully complete app available so people can review the code while watching the video... Thanks!

  18. Gregory said

    See some sweet fantasy books in the vid, nice choices!

  19. mogwaipr said

    she's really quick. awesome. Still I like the Ember way :(

  20. Jay Hoots said

    If you're stuck you can also add "mkdirp": "^0.5.0" to your devDepencies inside the package.json file, then re-run 'npm install'. Cheers!

  21. Carlos Azaustre said

    Amazing video! Now I see Angular with new eyes :D. Good job! Greetings from Spain!

  22. viddity said

    I enjoyed the angular course already, but especially the live debugging in this video is really helpful when you're an advanced beginner, like me. thanks, nice work!

  23. Faculty

    Carlos Souza said

    Thanks for the heads up, everyone! I've just pushed a fix that adds mkdirp as an explicit dependency for development mode.

  24. Faculty

    Alyssa Nicoll said

    KYLE TYACKE: Hey, hey. https://github.com/codeschool/AngularJSSTB this is the end version with all the features... is it still not working for you?

  25. Faculty

    Alyssa Nicoll said

    @ STUART STEIN: This is the new reading list's home on github:

    https://github.com/codeschool/AngularJSSTB

    git clone git@github.com:codeschool/AngularJSSTB.git

    ^ for quicksy's

  26. ngprnk said

    hey greg are you impatient or what ? always in hurry

  27. ngprnk said

    hey greg are you impatient or what ? always in hurry

  28. Martin Foster said

    Very nice s2b guys!!
    Oh you refactored the video? Yay to perfectionism!! Hey as @viddity said it's always good to see how others debug (because we are not the Borg) and the thought processes of figuring out what just happened. Imho in s2b you hit just the right blend of educational polish and real-world programming practicality (ie riding the bucking bronco of coding flow towards the nirvana of deliverables). Yay! :o)

  29. mmehditahiri said

    Very nice guys! Can't wait for the next Angular course.

  30. tpd_codemule said

    Hey guys, love the s2b really helped put some perspective on things for me.

    ALYSSA NICOLL what terminal app or cli are you using in the s2b video? It looks awesome and seems like it helps to cut through some of monotonous matrix-like visuals of the terminal.

  31. Faculty

    Alyssa Nicoll said

    TPD_CODEMULE : hey hey! I use http://ohmyz.sh/ ! With the 'fishy' syntax theme. I really love zshell and this made it so much easier to get up and running with it!

  32. rajatisthislostdotcom said

    @ CARLOS SOUZA You link for discussion on the Scope reference didn't work for me. Could you please post it again. I also searched in the KB. Thanks for a great video.

  33. Nicholas Bester said

    Thanks for the great tutorial. Hope the 2nd Shaping up with Angular course gets released sometime soon

  34. David Poindexter said

    Just wanted to say, you don't "have" to be that specific to override boostrap. Only if you're NOT using LESS to preprocess bootstrap and your .less files.

  35. Hans said

    I loved your tutorial. I've developing since November 2013 and only worked with minor jQuery but I understood the course very well and am reworking an interactive mockup of an iphone.

    Also I just got into BatmanJS which uses alot of coffeescript (like you were talking about). You guys have the best (cheesy) videos so you should totally do a tutorial on BatmanJS with this a parody of this video: http://www.youtube.com/watch?v=EtoMN_xi-AM

  36. Matthew Bradley said

    Excellent cast, glad you guys introduced more than what was in the course with scoping.

    Slight design recommendation? That outro for S2B was a bit flashy; I was lucky one of my coworkers with slight epilepsy issues wasn't in the room.

    Otherwise, both entertaining and informative.

  37. Kevin Lozandier said

    Hey, Alyssa Nicoll:

    Being most familiar with the official yeoman generator for AngularjS, what are the reasons you prefer angular-seed instead?

    If you were to put up with the official yeoman generator for angular, what would be the settings you would roll with (and why)?

  38. Faculty

    Alyssa Nicoll said

    @LOZANDIER

    Hey Kevin! I actually don't have much experience using yeoman. It isn't that I suggest to use the seed app OVER generating an Angular app with yeoman, it's just that I usually build my apps from scratch and think the seed has many good practices/conventions already set up for new Angular-ites.

    I would love to hear about how you set up with yeoman and what settings you use to initialize your app. Also, why you like it so much? I am always up for trying/learning new things!

    Alyssa

  39. Martin Pultz said

    Hi, great screen cast!!! funky dance hands I had one question regarding scope. After submitting a fantastic review on my book I wanted to hide the review form. I tried passing scope of readingListCtrl to the reviewForm directive scope: { read: '=', ... } and on the element read="readingListCtrl" so I could access read.showForm = false; in this.addReview, but that doesn't work, read is not defined. What do you have to do to hide the form on submit?

  40. sueder said

    I thought I read that this was building a reading list from the ground up, but trying to follow along then seeing tons of copy and pasting and not being sure what is correct and what was accidentally deleted is pretty confusing.

  41. Jose Sapir said

    I'm with Sueder... it's supposed to be from the gound up, what's up with all the copy pastes?

  42. rkingon said

    I love codeschool, but this video shows a lack of competency. I couldn't even watch it.

  43. Philip Madeley said

    I felt this course was hard to follow and it really was 'soup to bits' that didn't really connect the dots and leave me feeling like I'd learnt anything. It didn't help the current angular-seed is different to the source material. It would have been better had the source code been split into tags > 1.1, 1.2 etc... like the Egghead videos so you could follow along step by step. I was unable to follow along for this course and resorted to just copying mass pieces of code then just watching the videos. A little disappointed because I renewed my subscription for the whole month just to watch this.... i hope that the next Angular course is coming soon! - I hope Codeschool take a page from Lynda.com for when making a project-orientated course.

  44. Faculty

    Gregg Pollack said

    Thanks for all the feedback folks. We will consider redoing this Soup to Bits to make things more clear.

  45. swapnilpradhan said

    I loved the course and STB. Would it be possible for you to publish the gemstore app's code to git at each level (before/after). It would be cherry on the pie.

  46. stylig said

    Awesome course, awesome video, hope to see more soon. Especially because nearly every Angular example is using $scope within controllers and you did not even mention it yet. I can't wait to here about that.

    Btw: I hope you had some sort of lunch at 43:30 and not only a discussion whether it is a good idea to show scopes or not. ~menubar clock 4tw~ ;P

  47. shari_80 said

    I agree with Kevin Lozandier, I'm curious on how you would go with a yeoman angular setup?? The nice thing with the yeoman setup is all the grunt settings that comes with it :)

  48. Elias1986 said

    I see the provided Code for the Final App. I had to redo what you guys tried to start with (which is not the bower seed), I would suggest that you also upload the app.html/review-form.html/index.html that you have started with so We can follow up with you easily.

  49. fseminario said

    is it just me or is the audio muffled in this video?

    I also agree with the comments about the copying and pasting. I couldn't follow along easily. I had to find the assets on your GitHub (unable to use git clone due to permissions) and check the finished code.

    Also angular-seed has been updated to no longer use the same file structure.

  50. Faculty

    Adam Rensel said

    The new file format in angular-seed is a component based file format/architecture that is overkill for this small of an app. The angular team wants people to get used to thinking in components in preparation for Angular 2.0, but it's a long ways off and will most likely change quite a bit in the coming months. We decided to stick to a more conventional javascript app format and focus on the framework instead something that will most likely change a few more times before Angular 2.0 releases

    Components shine when it comes to reusability (jquery ui type stuff/video players/wysiwyg/etc) and splitting parts of a very large app into manageable chunks that different teams/people can sort of take point on. We'll probably have new content in the future after Angular 2.0 releases talking more about components, but for now it just gets in the way of learning how the current version of AngularJS works. Sort of a use the right tool for the right job kind of thing. :)

    If the video sounds sort of muffled, give it a try it HD. As the video quality goes down, it also loses sound quality.

  51. CodeMunki9 said

    Since the angular-seed git repo has a new file structure, I decided to clone the finished git repo of the app from the video.

    But, when I try to hit npm start, it gives me this error:

    Failed at the angular-seed@0.0.0 start script. This is most likely a problem with the angular-seed package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! http-server -a localhost -p 8000

    Can I still work off of this video using the old code, or will I still have problems with the package.json?

  52. CodeMunki9 said

    I was able to fix my earlier problem by adding the mkdirp dependency, but now when I click on 'app', it already comes preconfigured with a reading list view.

    Is there a way where I can start completely from scratch to follow along with the video? Which commit must I pull from from the repo?

  53. mtrier said

    Nice job on the tutorial. It was all very clear.

    I do agree with evan1234 though, I'm not sure why "beginner" tutorials teach you things that no one uses in the "real world". $scope should be used instead of the this stuff. It might seem to simplify things but teaches an incorrect approach.

  54. Mike Sigsworth said

    Actually, "npm" doesn't stand for "Node Package Manager"... According to the hilarious npm FAQ: https://docs.npmjs.com/misc/faq#if-npm-is-an-acronym-why-is-it-never-capitalized- LOL

  55. jhannes said

    I'm a bit dissapointed by this one. I stopped the video at the point where the test folder get's deleted with the comment "we're not going to need this here". Angular apps are so easy to test and I was really hoping to see this app being built with TDD. Just a few simple unit tests would have been cool.

    Overall the video feels like a lot of things are being copied and pasted from a prepared project and simultaneously many things are being deleted as unuseful from the angular-seed application template. This leaves the viewer with quite a bit of confusion. It would be so much easier to understand when those things are writen in the cast, like in the node.js soups to bits video for example.

  56. eric_n_dfw said

    I agree with everything jhannes said - stopped watching as it was just an exercise is watching someone paste random things into their editor.

  57. petes said

    This cast provides SOME insight.....however static data and a hacked together app to make it work for this tutorial is not really useful to me...at all.

  58. Mag Leahy said

    Really good work guys!

  59. Dimoff1 said

    The screencast was quite nice. About the guys complaining about the copy-pasting: Do you really expect her to create all the Bootstrap classes and UI from scratch in that time while looking the same as in the shown demo in the beginning? Besides, if you want to watch CSS/HTML design you should subscribe to a different course than Angular.

  60. abott said

    Just started going through this video. I can imagine it must be very difficult as Angular is very much a moving target. Note the churn in "Best Practices" here:

    https://github.com/angular/angular-seed/commits/master/README.md

  61. mollan said

    Great stuff! Thanks guys

  62. Ronan Connolly said

    That was awesome :) I'm going to go through the video a second time but follow along. Maybe try and add the HTTP get and post to a JSON file stuff. Thanks!

  63. Shulamyt Ajamy said

    Hi guys, what is the best IDE to work with angular / js / html / ect? [I don't have MAC :( ] Thanks!

  64. danieldram said

    Thanks for the tip on that child controller variables are accessible by their parent controllers. I would have never thought!

  65. Sami said

    Awesomeness!

  66. technovoip said

    Trying to follow here. I am supposed to clone from JSSTB at https://github.com/codeschool/AngularJSSTB ??? I did that with the git command that was provided and got : $ git clone git@github.com:codeschool/AngularJSSTB.git Cloning into 'AngularJSSTB'... Warning: Permanently added the RSA host key for IP address '192.30.252.130' to t he list of known hosts. Permission denied (publickey). fatal: Could not read from remote repository.

    Please make sure you have the correct access rights and the repository exists.

    Avi@TECHNOJOY ~/dev

    This clearly doesn't work. How am I to start this tutorial and make starting code seed and the STB video "sync up" ?

  67. Edvins Antonovs said

    @technovoip First of all you need to create a SSH for you computer and add it to your GitHub account.

    https://help.github.com/articles/generating-ssh-keys/ (At the top, select your OS)

  68. Faculty

    Stefan Nychka said

    Or, you can use https, git clone https://github.com/codeschool/AngularJSSTB.git

  69. Ugur Mutlu said

    This course is not published on iTunes. Would you mind publishing this one too?

  70. nuomnicron said

    This is an absolutely TERRIBLE tutorial! There are WAY too many things where they are just clicking and dragging and doing things and poof it works, which sucks when it doesn't! Also really annoying is the project they are starting with is not the same project in github. this video needs some serious work! I have been left frusterated and lost multiple times, which should not happen in a tutorial. Perhaps for those who know more of what they are doing they are fine, but those of us who know little beyond the intro video there is way too much they are glossing over. Thumbs down

  71. jaara said

    I have two questions.

    1st) is about child controller accessible from the parent controller. I just tried out and it's not working. At least with two following ng-controller="xxx as xxx". Docs are saying the ng-controller creates a new scope, so there's no way this could work. Could you point somewhere to the docs?

    2nd) At the end you are accessing a variable without referring to the $scope (you're doing books.push(...). How is that working?

  72. rastamusprime said

    Great course, but I can't get through the soup to bits first 15 minutes. There is so many things going on (i.e, delete this, copy over this style, rename a file, change this to that) that you guys lost me. I'm a total noob when it comes to web development. It would be great if the repository already included all this "clean up" stuff, or if the project was started completely from scratch with an explanation of what does what.

  73. danielmacho72 said

    Really useful tutorial.

    I especially like the fact you are not following an screenplay 100% but Gregg and Alyssa are discussing and correcting sometime each other ... just like in real programming life! :)

    Great job, congrats!

    Great job.

  74. chris93007 said

    how can i use the angular-seed used in this video?

  75. Joseph An said

    By the way the angular-seed repo has been changed. If you want the same file structure in this episode of soup to bits here's how: First clone the repo in the video here. $ git clone git@github.com:codeschool/AngularJSSTB.git Then you need to rollback the commits until the second commit (the first only has a README.md). $ git reset --hard 6243d76 Now you should be ready to follow the video! $ npm install $ npm start

  76. Joseph An said

    By the way the angular-seed repo has been changed. If you want the same file structure in this episode of soup to bits here's how:

    First clone the repo in the video here.

    $ git clone git@github.com:codeschool/AngularJSSTB.git

    Then you need to rollback the commits until the second commit (the first only has a README.md).

    $ git reset --hard 6243d76 Now you should be ready to follow the video!

    $ npm install

    $ npm start

  77. spy 007 said

    Pls remove node_modules from the project.

  78. markphillips said

    The readingList app boiler plate code is created in the soup-to-bits Angularjs video. I am not speaking of the Angular Seed. I do not see where this boiler plate can be downloaded and the video does not hold in place long enough to eye it and type it quickly. This is very disappointing

  79. markphillips said

    This is horrible

  80. Dzhavat Ushev said

    Cool. I didn't have any problems following the video. Even though some parts, especially the Angular-Seen, have changes since it was posted, I managed to figure it out. Now I have a well functioning “app”. Like it a lot. Thanks :)

  81. Phương Lê said

    Great!!! Thanks Alyssa Nicoll, I learned angularjs very interested.

  82. francisngo said

    I have the latest version of node.js and npm installed but when i get to 'npm start', I get: "Failed at the angular-seed@0.0.0 prestart script 'npm install'". Also getting a number of issues.

  83. francisngo said

    I am also getting this issue when i type npm test or npm install: path.js:424 var path = (i >= 0) ? arguments[i] : process.cwd(); ^

    Error: ENOENT: no such file or directory, uv_cwd at Error (native) at Object.posix.resolve (path.js:424:50) at Function.Module._resolveLookupPaths (module.js:250:17) at Function.Module._resolveFilename (module.js:317:31) at Function.Module._load (module.js:277:25) at Module.require (module.js:354:17) at require (internal/module.js:12:17) at /usr/local/lib/node_modules/npm/bin/npm-cli.js:26:13 at Object. (/usr/local/lib/node_modules/npm/bin/npm-cli.js:76:3) at Module._compile (module.js:398:26)

  84. francisngo said

    I cloned the angular-seed into my webDev folder and typed npm install in the terminal and got this error:

    npm ERR! Darwin 14.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" npm ERR! node v5.3.0 npm ERR! npm v3.3.12 npm ERR! path /Users/SICNARF/.npm/_locks/staging-a56c94c5ee855962.lock npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall open

    npm ERR! Error: EACCES: permission denied, open '/Users/SICNARF/.npm/_locks/staging-a56c94c5ee855962.lock' npm ERR! at Error (native) npm ERR! { [Error: EACCES: permission denied, open '/Users/SICNARF/.npm/_locks/staging-a56c94c5ee855962.lock'] npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'open', npm ERR! path: '/Users/SICNARF/.npm/_locks/staging-a56c94c5ee855962.lock' } npm ERR! npm ERR! Please try running this command again as root/Administrator.

    npm ERR! Please include the following file with any support request: npm ERR! /Users/SICNARF/webDev/angular-seed/npm-debug.log

  85. francisngo said

    this video although seems very fun didnt seem to teach me anything. there was a lot of copying and pasting code and switching between pages that didn't help mold the concept of angular for me. i feel like we might as well just take the final project git and call it a day since its already there and everything was copied and pasted.

About This Screencast

After playing the Shaping Up With Angular.js course, you can watch this in-depth screencast hosted by Gregg Pollack and Alyssa Nicoll to learn the practical steps of building an Angular.js app from scratch.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now