Bookmark

Screencast Build a Note-taking App With AngularJS JavaScript

  • Adam Rensel
  • 14287 views
Enroll Now

Comments

  1. Jamie Barton said

    Where is the repo URL?

  2. LEGOMaster2 said

    https://github.com/codeschool/StayingSharpWithAngularSTB

  3. Todd said

    Thanks guys, this was great! As an intermediate Angular developer it was great to follow along with other developers building an app from scratch. A great learning tool. Kudos.

  4. Robert Urbański said

    I can't figure it out why that video app refresh video and start it again when i maximize window and minimize after awhile. I can't back to point where I was, before it buffer video into that point.

  5. hesaigo999ca said

    I tried downloading this on my machine and it is popping an error when i try to unzip the files... it says the path file names are too long.... is there a way you can package this differently, maybe not having such long names?

    Just a thought... thanks

  6. Faculty

    Adam Rensel said

    Hi hesaigo999ca, The path names aren't anything out of the normal when it comes to length. I'm guessing you're on windows? Windows has a 256 character limit to the total characters of a path when unzipping files, this includes all the folders/directories down to the location of where you are unzipping the files. If you unzip the files from a location closer to your drive root, you shouldn't have any issues.

  7. Alyssa Nicoll said

    Thanks Todd! You rock!

  8. Alyssa Nicoll said

    Did you ever get it working, hesaigo999ca?

  9. zoolle said

    There is any way to store data in a SQLite database?

    Thanks

  10. Faculty

    Adam Rensel said

    Hi zoolle, Check out Sequelize: http://docs.sequelizejs.com/en/latest/, I've used that once or twice in the past for projects and it seems to work well. It supports a couple different databases, including SQLite.

  11. zoolle said

    Hi Adam, I try to load this project without Node.JS so my folder looks like this: index.html, javascript, server, styles, templates. But when I load the index file its showing me the html content but not categories and data from arrays. The errors I receive are GET http://localhost:8888/categories 404 (Not Found) and Error: [$resource:badcfg] Error in resource configuration for action query. Expected response to contain an array but got an object. Somehow it needs to connect to the files from "server" folder. Is there any way to do this?

    Thanks

  12. Faculty

    Adam Rensel said

    Sadly, you will need to run the server using NodeJS. :( It still uses express to serve assets and provide the basic rest api for the Angular Resources to hook into.

  13. Tyler Haas said

    when I try to hit the save button on the edit page it gives me a new page that just has a error saying cannot PUT to /index.html. Any ideas what may be causing this?

  14. Faculty

    Adam Rensel said

    Hi Thass, was this from the repo posted above or was it something you were building as you followed along? If it's something you're building as you follow, throw it up on github some place and I can glance at it quick, it sounds like the note resource url is incorrect or something.

  15. Tyler Haas said

    okay adam I put it on github under haasDev/notewrangler

  16. Faculty

    Adam Rensel said

    Ah hah! I think I know what's going on. You don't have any of the server side files, so the ajax calls within ngResource will fail. What you can do, is clone down the repo at: https://github.com/codeschool/StayingSharpWithAngularSTB, and use the "starting" branch. This gives you the project where I started at in the video, and takes care of all the server side stuff for you. It does require nodeJS or IOJS in order to run, so get one of those installed and do npm install then npm start in your console, and visit localhost:8000 in your browser.

    You should be able to copy the javascript from your repo into this one and be off running. At a glance, your current code looks correct. So you should be good to go. :)

  17. Tyler Haas said

    arent the server side files under the server folders? I cloned the starting branch when I began so I should already have those files shouldn't I?

  18. Faculty

    Adam Rensel said

    Sorry about that. I must have had tunnel vision this morning when I looked. I cloned down your project to take a look. The issue is that your form on the notes edit page has an action and method. When you add an input with a type of submit, it triggers the form to submit in a traditional way (non angular/ajax). You could catch the submit event on the form and do a preventDefault, but in this case you can simply just remove the action and method from the form and let ngResource make the put request from within angular, triggered by the ng-click on the submit button.

  19. Thad Gillespie said

    I get the following error when I do git clone https://github.com/codeschool/StayingSharpWithAngularSTB.git:

    fatal: cannot create directory at 'node_modules/bower/node_modules/insight/node_modules/inquirer/node_modules/cli-color/node_modules /memoizee/node_modules/es6-weak-map/node_modules/es6-iterator/node_modules/es6-symbol': Filename too long

    I suspect this is the same problem hesaigo999ca was dealing with. It looks like whoever built the npm concatenated several sub-dirs of node_modules instead of making each one separately.

  20. Faculty

    Adam Rensel said

    Unfortunately, npm always creates subdirectories for each module. NPM is different then other package managers in that each module has separate nested dependencies so that individual dependencies don't need to be the same version.

    If you're running msysgit, setting the git config core.longpaths true option should fix this issue (make sure you've updated).

    Barring that, I've shrinkwraped this app which removes the node_modules folder and replaces it with a big dependency manifest.

  21. Ronan Connolly said

    Amazing STB's guys! :) The video player on your site sucks though :( Always freezing, when refresh doesn't remember where you are. I have 240mb fibre, so speed is no issue. Always have video player issues on all the courses.

  22. jluribe said

    I had some problems to see online, so I downloaded the video. Great tutorial, it was fun, smart and too fast coding, Amazing!

  23. Sirch Leumas said

    I am unable to download the video from iTunes is the feed still up?

  24. Jan Ferko said

    Hi Alison and Adam,

    this was great STB episode. I've already knew little bit of Angular.js, but I haven't build anything bigger than simple tutorial with it. So I learnt how to structure project and what pitfalls i should be worried about. Just one simple question... I was following along in my fork of the project and everything is working well, except gravatar directive. For some reason, angular doesn't expand 'user.email', but instead renders following image tag: "". Any suggestion is welcomed as I can't figure this one out.

  25. Jan Ferko said

    Never mind, I forgot to return gravatar url from GravatarProvider. Of course, it was something stupid like this. :)

  26. Student #1436700 said

    Hi- It would be awesome of you could post a short video, maybe through CodeTv, where you went over using a database such as Mongoose or Redis for this particular app! Thanks

  27. Student #1436700 said

    Or perhaps just a branch for what that would look like on GitHub? Thanks

  28. elia said

    Hello When I load my app I get the following error message: Error: [$compile:tpload] Failed to load template: /views/directives/nav-item.html

    I have the exact same library rank as you so I can't be that. Please answer if you've seen this problem before

  29. Faculty

    Adam Rensel said

    Hi guys and gals, Sorry for taking so long to respond, I've been out of the office for awhile.

    Jake25 - We have a mongo course coming up at some point in the future (The content is currently being worked on). I'm not sure what the demo app is going to be, but I'm almost positive it will be a node app, so keep an eye out for that.

    eliafornari - Was this an app you created from following along with the video? If you have it up on github some where I'd be happy to take a glance at it. There are settings within express for static files that define where the root directory is, perhaps those are off a bit or something.

  30. Matija Marohnić said

    An hour into this screencast. A lot of the times the target audience of this screencast seems to be novices, which makes it very tedious for the rest of us. IMO this is not very realistic because it tackles some advanced concepts which people new to web design would have a hard time understanding. There's a lot of time spent on explaining and tripping over elementary non-Angular stuff like Bootstrap, Atom, Node etc. and some more important Angular stuff are skipped. For example injection, Adam just briefly mentioned that we'll have some minification difficulties and I really wanted to know why and is it solvable, because as a beginner this bit me at one point, so I'm not mangling anymore.

    Sorry for criticizing, I like that we're learning how to build an app from start to finish and this screencast is overall very valuable, I just think that it could be way shorter and more concise.

  31. Faculty

    Adam Rensel said

    Hi Matija, I appreciate the feedback. These videos are always tough to figure out how much of one thing to put in and how much to gloss over. I tended to leave much of the server side stuff out, since it really depends on what you're using. The minification with injection is a really good example, we'd have to get into the entire toolchain used to compile/minify the code. For example if we got into it with node, we'd have to explain NodeJS/Express basics, Grunt, etc, which starts to get the length out of control.

    As for the non-angular stuff, we like to sort of wing these videos. I think it's valuable to show that even seasoned devs have issues and need to google things at one point or another. There seems to be a misconception with people new to programming that most programmers (even seasoned devs) can get everything right from the top of their head at all times.

    We do assume that people watching this video have already taken the matching course, this saves a ton of time explaining normal AngularJS concepts and allows us to get through the entire app.

    That being said, I'm more then happy to answer any questions in the comments. :) It would be cool if we had a captive audience to ask questions throughout the video, that's sort of what Alyssa was trying to do, but we probably missed a few.

  32. Matija Marohnić said

    Concerning minification, maybe you wouldn't have to get into the whole toolchain, it's safe to assume that most people use UglifyJS, so the issue seems to come down to "why does everything else work compressed while this doesn't?", which seems agnostic of the build setup.

    But as a beginner maybe I'm wrong and it is tricky enough that it deserves its own blog post or screencast.

  33. Faculty

    Adam Rensel said

    Yep, it's hard to think about it like that when keeping it accessible to everyone at varying skill levels. :) The most current case of this I can think of is that we really want to do a React course, but since React uses ES6 (2015) we need a course on that first.

  34. Dustin Falgout said

    Perhaps using Bower would be a helpful step in managing the dependencies of this app?

  35. Francisco Ochoa said

    When I configured $scope.note = Note.get({id: $routeParams.id});,the console showed error 500 .

  36. Faculty

    Adam Rensel said

    Hi Francisco, the 500 error indicates a server issue. This could be something like a note not existing with the id given in the url. It's hard to say without the know what the error says. :)

  37. Alexei Roschak said

    Something that irked me from the beginning of watching this is putting the scripts before the closing tag. What was the reason for this? The standard is to put them before the closing tag instead.

  38. Faculty

    Adam Rensel said

    Hi kiraikenx, I'm a little confused by the question, could you maybe give me an example? :)

  39. Alexei Roschak said

    Hey Adam, I'm referring to the video. You're placing all of your script tags inside the html closing tags instead of the body closing tags. I was wondering why because I've always known it to be a standard to place before the closing body tag. Sorry for the confusion. I had initially wrote out the closing tags thinking it would output the html-entity equivalents, but it removed them entirely, lol.

  40. Faculty

    Adam Rensel said

    No problem! I get it now. It really doesn't matter if you put them in the body or html tags. Putting them near the bottom after the majority of your html is the really important bit. I put them at the very end in the html tags only because that's about as far as you can go with them (I think technically it will still work if you put them outside the html tags). There is nothing wrong with bumping them up another level to the body though. :)

  41. Alexei Roschak said

    Ah okay, I see now. Thank you for the response!

  42. Joshua Towns said

    Does anyone know how I can get a clone of this github repo working in Cloud9 IDE? I'm totally lost and would like to tinker with this on a server other than my laptop. That way I don't have to change everything once I want to go to production. I know I will have to do something with the default ports...

  43. Lucas Stinis said

    Great podcast! One question though. In the "Staying sharp with Angular.js" course, Alyssa uses a named function when defining a Provider or any other type of service (i.e. .provider("gravatar", function gravatarProvider() { ... } ). The AngularJS documentation seems to also use this convention, moreover, when calling the .config() method on the module to set the imageSize setting for the provider, the named function was passed instead of the provider name... I guess this is has to do with the fact that in this case it's encapsulated inside its own module? Or was the approach Alyssa used more of a best practice than a requirement?

  44. Faculty

    Adam Rensel said

    Hi Lucus, the convention of using the named function in that way is just a best practice. It's especially nice when you get errors in the console and you get the named function instead of a generic anonymous function.

    Only providers are accessible within the .config function. Check out the angular source for the $injector: https://github.com/angular/angular.js/blob/5abf593e6b3535cc836c99db4018a4e2fc2dbc3b/src/auto/injector.js#L674 and you'll see that whenever a provider is created (remember, factories and services are really just providers) Angular creates a "name + providerSuffix" object and stores it for reference internally. This is the provider you interact with in the config as opposed to the named function.

  45. Ben Ward said

    I'm up to the part using the first service, putting it in the assets/javascript/services/notes.js file, but when I finish and include the notes.js in my index file I get an error in Safari: Error: [$injector:unpr] Unknown provider: NoteProvider <- Note <- NotesIndexController . I've checked several times and I can't see where any path or file location is wrong.

  46. Ben Ward said

    Ah, not sure what I did, but deleted it and redone and now it works!

  47. Faculty

    Adam Rensel said

    Glad you figured it out! :D

  48. Nicolas Andrew Polhamus said

    Awesome video guys, I am running into a problem however. I am currently at the point where we are adding functionality to the edit note button on the show.html page. Whenever I click on the edit button, it takes me to the edit.html page. However, none of the markup that I have written is there. The html should be exactly the same as to what is in the video. Thanks for the video and the help!

  49. Faculty

    Adam Rensel said

    Hi Nicolas, do you have the code somewhere? I need a bit more to go off to help you I think. :)

  50. Stephanie Q said

    Hey, I downloaded the starting branch of this project off of Git Hub and kinda used it as a boilerplate for a project of my own. I got rid of the models and routes as I didn't need them and made a pretty good website.

    My site uses nodemailer powered contact forms. Anyway, to cut to the chase, when I enable HTML5 mode in Angular and Express it breaks my contact forms. You can see all the code here: http://stackoverflow.com/questions/32664279/how-to-enable-html5-mode-in-express-without-breaking-nodemailer Any ideas? Maybe since you guys were the ones to set up the general config, you could maybe help me with this :D

    Sorry I'm such and Express noob.

  51. Faculty

    Adam Rensel said

    Hi Stephanie, It looks like you figured out your issue, but I might be able to shed some light on to how it works :) . Single page apps that use the hashbang (that part at the end after #) always request the page before the hash, which in your case was index.html. When you turn on html5 mode in angular, it stops using hashes and tries to use full url links. Some people will make the server routes mirror the client routes if they want to load data into the html pages. The other way is to just serve all requests the same page (which was the solution proposed to you in the stackoverflow), the only issue that comes with this is that your entire single page app needs to always use ajax calls and not depend on bootstrapped data.

    With the /* solution, keep in mind that its going to catch all route requests, so make sure it comes last in your route stack. This way if you have a route you want to handle differently it gets caught before that /* matcher.

  52. Javier Piedragil said

    Hi, I'm having trouble with the npm start after I cloned the repo from https://github.com/codeschool/StayingSharpWithAngularSTB. The npm start command reports this error: Cannot find module 'express'. Any help will be appreciated.

  53. Faculty

    Adam Rensel said

    Hi Jp, Try doing a npm install first and see if that helps. :)

  54. Javier Piedragil said

    Before I executed the npm start, I ran the npm install step. Should I repeat this?

    Thanks

  55. Faculty

    Adam Rensel said

    It's hard to say without knowing more about your computer. I've heard of people having issues with their NodeJS path variable on a windows machine which can cause similar issues. Sometimes just removing the node_modules folder and running npm install again fixes it.

    I would first try the removing/reinstalling the node_modules (make sure you're in the project directory when running npm install). If that doesn't work, I would take a second look at your NodeJS installation and make sure all the path variables are setup correctly.

  56. Javier Piedragil said

    Hi, one of the problems was that my computer didn't have Python installed, I fixed this and the npm install continued a little bit further and stopped because the sqlite's version (3.X) is incompatible with the installed nodejs (4.1.1), so I guess I will not be able to run the application.

  57. Faculty

    Adam Rensel said

    Odd, the app doesn't use sqlite for anything, you can view the required modules in the shrink-wrap file: https://github.com/codeschool/StayingSharpWithAngularSTB/blob/master/npm-shrinkwrap.json

    I installed 4.1.1 and had to delete the node modules directory and run npm install again to get it working on that version. I'm trying to think of what could cause the npm install to modules that aren't included in the current app, I'm guessing its still a path issue.

    If you're still having issues you might try heading over to our support section, we're a bit better equipped there to handle issues like this then in comments. :) I'll let them know to ping me if they see you and they don't know the answer.

  58. Javier Piedragil said

    Thank you

  59. onurcaglayan said

    Great video. It absolutely worth it to watch it all. That was very funny and informative. As a experienced pro, I really enjoyed it.

  60. michaeldunbar said

    Really enjoyed this as a follow up to the course, thank you. One thing, hash sign = # and pound sign = £ :-)

  61. Faculty

    Adam Rensel said

    Good call Michael, we forgot about that. In the US on a phone its called a pound sign, we should have kept it strictly.... programming related I guess :D

  62. jonastads said

    oh, this is what I was missing. I was lost in the course, like : what "note" application??

  63. hsenki said

    Hi Adam, Im getting this error when I run the "npm start" command, do you have any idea what is wrong? Thanks http://imgur.com/COfQRI1 View post on imgur.com

  64. hsenki said

    SOLVED-- INSTALLED body-parse module and then lodash and its running

  65. Faculty

    Adam Rensel said

    Glad you got it solved! :)

  66. hasan çelik said

    Hi, I'm having trouble with NoteWrangler project.. Everytime I am getting error, when try "npm install" process.. I tried different version of node.js but not work...Other project is working properly.

  67. Faculty

    Adam Rensel said

    Hi Hasan, I'll need a bit more information in order to help you out. What did the error say? :)

  68. hasan çelik said

    I am getting this error when I try to run "npm install" command in the Node.js Command Prompt... http://screencast.com/t/zsdpIW9S you can see the details about the error as the link below https://gist.github.com/cortix/b1043c7cc6eb078df873 I've tried different version of node.js but not work.. But StayingSharpWithAngularSTB is working properly.

  69. Faculty

    Adam Rensel said

    It looks like you need to install Python and make sure it's setup in your path. Node-Gyp, which is the part of NodeJS responsible for compiling native modules -- requires python.

    StayingSharpWithAngularSTB might work properly if non of the modules are native modules that need compiling. :)

  70. hasan çelik said

    Hi Adam, I've tried a lot of things but not success...As I understand, I am not alone with this issue :))) https://www.codeschool.com/discuss/t/unable-to-install-the-demo-code-in-github/22956/5

    According to the errors that I received, I tried these commands but again not success..

    npm install -g node-gyp npm install express npm install passport-local

  71. Faculty

    Stefan Nychka said

    Hey! Doesn't look, Hasan, like you used --global, which may be part of the issue. Especially check out https://www.codeschool.com/discuss/t/unable-to-install-the-demo-code-in-github/22956/6

    Note this is namely for windows. On a Mac, it works for me as per the instructions at the github repo's readme.

  72. Faculty

    Stefan Nychka said

    Ignore the global comment, as I just noticed the -g

    But, definitely check out the link I sent you, and, did you install Python like Adam said?

  73. Arun Iyer said

    i cant hear any voice

  74. roadeohouston said

    I cannot use cryptoJS library with the new CDN: When i try to use MD5 function it gives the following error: md5.js:9 Uncaught ReferenceError: CryptoJS is not defined(anonymous function) @ md5.js:9(anonymous function) @ md5.js:254

    Please advice.

  75. Faculty

    Adam Rensel said

    Hi there, It looks like google took down the cdn/link. I replaced it with an alternative and it should work now. :)

  76. Gonzalo Diaz Ailan said

    You guys are awesome! =D

  77. Faculty

    Adam Rensel said

    Thanks Gonzalo

  78. bissa said

    which plugin you are using to highlight folder,files changed as its highlighting green.

  79. Faculty

    Adam Rensel said

    Hi Bissa, I use the Atom editor, it has a plugin that does that by default. I believe its the git-diff one from the atom team.

  80. Tuantm said

    The great video about angularJS from scratch. I created Back-end by Express & Front-end by AngularJS. I spent 2 days to do everything in 2 hours of this video. Thank you so muchhhh.

  81. Faculty

    Adam Rensel said

    Hi Tuantm,

    Good work :) I'm glad it was helpful!

  82. ttalhouk said

    Great demo. It put a nice bow on the courses. Paused and tried to implement the next feature and then watch how the tutorial did it. Sometimes right sometimes wrong but learned a lot especially when I would get errors I was able to figure out why and fix it! Thanks for the course.

  83. johnryan1982 said

    Thanks Adam, Alyssa - a very useful demo

  84. Andres Jr Iii TORRALBA said

    I love the coding convention of Adam. I will follow that! :)

  85. Délita Makanda said

    nice tutorial for beginners thanks :)

  86. Wasif Zaman said

    Hey Adam. I'm receiving a Cannot POST /index.html error :( I saw the post up to by thaas. I was using NodeJS 6.5.0 before so I uninstalled it and am running 4.5.0 now. My code is here: https://github.com/drinkingChai/angular-project-3

    Thank you!!

  87. Wasif Zaman said

    Hey Adam, just troubleshooted a little bit more and found that it happens whether or not I use a button or input. I got around it using an tag so the PUT is working. That's probably not the right way to Submit a form though. This at around 1:00 in the video and I am building it as I go along but I looked at the final notesEditController.js and the edit.html template and using the ng-disabled attribute, it works. I'm not familiar with express nor node, so I don't really know what this means :( maybe it's a timeout error?

  88. Faculty

    Adam Rensel said

    Hi Wasif, I see the repo but I'm not sure which part you're talking about. How about this, add me (renz45) as a read only collaborator to the repo, and make a comment in the commit you're talking about and ping me with @renz45 and I'll check it out. :)

  89. Wasif Zaman said

    Awesome! I made a comment on edit.html on this commit: https://github.com/drinkingChai/angular-project-3/commit/aaa6f0a158444d93095f0ad1e315186fa84dd4a4 After adding ng-disabled, it's working exactly as expected but before that, I had the error. Thank you :)

  90. Faculty

    Adam Rensel said

    I think I figured it out, I commented on the file, but I'll add it here too in case anyone else runs into the same issue. Your form element had the method and action attributes still, which was making it act like a normal form. Since we're using javascript to make an ajax call directly, you can leave those off, which prevents the form from working.

    Conversely, you can pass the event into the saveNote method and call preventDefault() but removing those attributes seems cleaner in my mind. :)

  91. Thomas Clark said

    Hey Adam, Loved the tutorial. Huge help. I wanted host this on Heroku. What's the proper config? When I try to push Heroku Master, I get mystifying error logs. Any suggestions...

  92. Faculty

    Adam Rensel said

    Hi Thomas, I actually haven't tried deploying this on Heroku, what errors are you seeing?

  93. csdias said

    I loved it!

  94. Camilo Riviere said

    This video is excellent! Great job. Huge improvement compared to the project after the first Angular course.

  95. Zhen Xu said

    I have got to say that Adam did a great job. I was a little buzzed after finishing Alyssa's course, because there are so many contents there and there is not clear logic about all the knowledge. This project clears out a lot more. By seeing all the detailed code and how they are organized, I can now build that app myself. Maybe it's because of the time limitation, there definitely some points which Adam can explain more about. Hope you can do more project videos and of course, if you can give us more advanced courses.

    Thanks,

  96. jonnyirving said

    If anyone coding along has trouble with the MD5 CND link this is because google have stopped hosting it, the link below can now be used instead. I took this from the git repo master branch.

    @Faculty, it might be worth adding a note over this part of the video to highlight this change. Otherwise great content!

    Thanks,

    Jonny

  97. avipoo said

    does the starting branch no longer exist ? :(

  98. Faculty

    Adam Rensel said

    Hi Avi, it's still there. :) Here you go: https://github.com/codeschool/WatchUsBuild-NoteTakingAppWithAngularJS/tree/starting

  99. Jeremy Vogel said

    Angular is finally making sense after going through the Angular path and watching this video. I am looking forward to creating this Note-Taking App. Thanks Codeschool!

  100. Jeremy Vogel said

    I got excited at the end when the avatars loaded after watching and building this app. One of the longer "Watch us Build" screencasts, but totally worth it. Nice job Adam and Alyssa!

  101. koberlander115 said

    Great job, guys!

    Had a question. When I load the page, I have Note Wrangler, Notes, and Users all in the nav bar. I can't seem to load anything else (like add a new note). Here's a link with a screenshot: http://imgur.com/a/XtWuE. Can you help?

  102. Faculty

    Adam Rensel said

    Hi koberlander, if you open up the dev console (or possibly the node console in your terminal) are there any errors? Also, if you have the repo somewhere public, I could take a quick look. :)

  103. koberlander115 said

    Thanks, @Adam Rensel. I can start node fine through terminal. Could it be a problem with my routes? Here's my github: https://github.com/koberlander. The project is My Concerts List (just changed the name from Note Wrangler).

  104. Faculty

    Adam Rensel said

    I'll post an issue on your repo with my findings :)

  105. koberlander115 said

    Thank you!

  106. QueenBB said

    Hello, Please help me, how Can I setup the angularJS structure project on my local machine step by step?

About This Screencast

Bring together Angular, Bootstrap, and Node as you learn to build your first Angular app. Watch us build NoteWrangler, the app we started in Staying Sharp with Angular.js that helps you create and categorize notes.

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

Enroll Now