Resources
Comments
-
Jamie Barton said
-
LEGOMaster2 said
https://github.com/codeschool/StayingSharpWithAngularSTB
-
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.
-
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.
-
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
-
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.
-
Alyssa Nicoll said
Thanks Todd! You rock!
-
Alyssa Nicoll said
Did you ever get it working, hesaigo999ca?
-
zoolle said
There is any way to store data in a SQLite database?
Thanks
-
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.
-
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
-
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.
-
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?
-
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.
-
Tyler Haas said
okay adam I put it on github under haasDev/notewrangler
-
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
thennpm start
in your console, and visitlocalhost: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. :)
-
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?
-
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
andmethod
. 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. -
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.
-
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.
-
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.
-
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!
-
Sirch Leumas said
I am unable to download the video from iTunes is the feed still up?
-
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.
-
Jan Ferko said
Never mind, I forgot to return gravatar url from GravatarProvider. Of course, it was something stupid like this. :)
-
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
-
Student #1436700 said
Or perhaps just a branch for what that would look like on GitHub? Thanks
-
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
-
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.
-
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.
-
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.
-
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.
-
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.
-
Dustin Falgout said
Perhaps using Bower would be a helpful step in managing the dependencies of this app?
-
Francisco Ochoa said
When I configured $scope.note = Note.get({id: $routeParams.id});,the console showed error 500 .
-
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. :) -
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.
-
Faculty
Adam Rensel said
Hi kiraikenx, I'm a little confused by the question, could you maybe give me an example? :)
-
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.
-
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. :)
-
Alexei Roschak said
Ah okay, I see now. Thank you for the response!
-
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...
-
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?
-
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.
-
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.
-
Ben Ward said
Ah, not sure what I did, but deleted it and redone and now it works!
-
-
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!
-
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. :)
-
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.
-
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. -
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.
-
-
Javier Piedragil said
Before I executed the npm start, I ran the npm install step. Should I repeat this?
Thanks
-
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. -
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.
-
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.
-
Javier Piedragil said
Thank you
-
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.
-
michaeldunbar said
Really enjoyed this as a follow up to the course, thank you. One thing, hash sign = # and pound sign = £ :-)
-
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
-
jonastads said
oh, this is what I was missing. I was lost in the course, like : what "note" application??
-
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
-
hsenki said
SOLVED-- INSTALLED body-parse module and then lodash and its running
-
-
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.
-
Faculty
Adam Rensel said
Hi Hasan, I'll need a bit more information in order to help you out. What did the error say? :)
-
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.
-
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. :)
-
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
-
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.
-
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?
-
Arun Iyer said
i cant hear any voice
-
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.
-
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. :)
-
Gonzalo Diaz Ailan said
You guys are awesome! =D
-
-
bissa said
which plugin you are using to highlight folder,files changed as its highlighting green.
-
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. -
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.
-
-
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.
-
johnryan1982 said
Thanks Adam, Alyssa - a very useful demo
-
Andres Jr Iii TORRALBA said
I love the coding convention of Adam. I will follow that! :)
-
Délita Makanda said
nice tutorial for beginners thanks :)
-
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!!
-
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?
-
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. :)
-
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 :)
-
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
andaction
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 callpreventDefault()
but removing those attributes seems cleaner in my mind. :) -
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...
-
Faculty
Adam Rensel said
Hi Thomas, I actually haven't tried deploying this on Heroku, what errors are you seeing?
-
csdias said
I loved it!
-
Camilo Riviere said
This video is excellent! Great job. Huge improvement compared to the project after the first Angular course.
-
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,
-
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
-
avipoo said
does the starting branch no longer exist ? :(
-
Faculty
Adam Rensel said
Hi Avi, it's still there. :) Here you go: https://github.com/codeschool/WatchUsBuild-NoteTakingAppWithAngularJS/tree/starting
-
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!
-
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!
-
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?
-
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. :)
-
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).
-
-
koberlander115 said
Thank you!
-
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
Where is the repo URL?