It's super simple to set up. We're actually thinking of doing a Firebase version of our tutorial, as there would be no local set up (other than hosting the static files).
Javascript is a harder language then most web development languages when you really get into it (OOP, inheritance, scope, first class functions, callbacks, closures, compile time errors). If you go into it thinking your going to save brain power you may be in for a rude awakening.
The advantage is you can do real time async stuff a lot better then with other frameworks.
Most javascript code is actually synchronous. It is the event loop (xhr requests, timers, timeouts, etc.) that is async. TLDR, some parts of the language are sync, some are async
OOP: This is done with Functions not Classes.
Inheritance: Theres at least 3 different ways of doing this, 2 of them suck again use Functions instead of Classes.
Scope: Variables outside a function are global and theres no block scoping.
First Class Functions: This is not something most people are used to and can become confusing
Calbacks: Callback Hell, you can shoot yourself in the foot and mess up your code if you don't put extra thought keeping things organized and thinking through async/sync
Closures: Theres function scoping but not block scoping, this can be confusing if you're used to block scoping
Compile Time Errors: Theres very few compile time errors. If you are using a Function that requires the "new" keyword and you forget it your code will still run and all sorts of wacky things will happen.
Yes other languages have these features but they are harder in Javascript, thats why Javascript is a harder language.
Look into Meteor.js - try doing that in PHP. That's how so. And you can write Sync code if you want to.
I know all this, but I still don't think it's any harder than other languages. I have been following Meteor since the beginning, but I'm not impressed anymore to be honest. Seeing the video for the first time was quite shocking, but in the end they didn't really deliver. Using it is still a pain.
> try doing that in PHP
Meh, PHP is still the king, and it will stay there for a long time. Languages and platforms with crazy features pop up every day, but that's not enough for actually getting things done. You need a community, mature libraries, and a healthy ecosystem in general.
If you want something challenging try Clojure. It is by far The Best Language (tm) IMO, but you still can't even build a website with it. The only web framework available died and got separated into libraries, and everyone ends up wiring everything the way they can. Some people use Java libraries, some others reimplement everything. It's pretty messy.
I've just kicked off my latest project using the MEAN stack.
The main advantage for using the stack has been a huge time saving in getting the project set up. NodeJS and express is hugely flexible about how you structure your source, which can also be a downfall in the additional mental load of deciding where stuff should go. MEAN does this for you.
The disadvantage has been where I want to do things differently from how MEAN is set up. For example, MEAN uses Bootstrap v2, I wanted Bootstrap v3. It was a slight faff updating it. It would probably be harder if you eg. wanted to use MySQL instead of MongoDB.
There is still a lot that you need to learn before you will get an app fully up and running, but with MEAN you can get cracking on stuff before you know it all. I don't know anything about Grunt yet, but can still use the Grunt file provided to run the server.
To add on to what mfrisbie said: If you want a good 3rd party opinion on the quality of the tutorial, you might want to see what Brad Green (the guy who manages the AngularJS team at Google) has to say about it - https://twitter.com/bradlygreen/status/373134106936090624
I'm not sure if I'm more excited or creeped out. Yesterday, I decided I wanted to learn Angular and I figured making a fantasy football clone would be a fun, interesting way to do it -- something I'm vaguely passionate and vaguely knowledgeable about, something that isn't a Twitter clone, lots of numbers, something I can show to a few friends without having their eyes glaze over.
Then this came out. Super excited for the weekend so I can dive on through. Thanks, Matt -- but stop reading my mind.
(n.b.: I'd be more than willing to pay sticker price if I could get a physical copy instead. I know it's lame, and slightly more effort, but I don't have a monitor setup at the moment so I'd rather leaf through a book than scroll through an alt-tabbed .pdf.)
Ditto for paying for a print copy. Some tech books I'd rather read outside in the sun; it forces me to actively try to internalize more instead of hopping to/from the console every minute.
Agreed with the 'reading my mind part'. Though it is high time for fantasy season so its probably at the front of everyone's mind right now. Anyway, very excited to get into this.
We are giving you free access to the ebook online. If you want to take it offline, we've made a nice PDF version that you can purchase to support our ongoing efforts. If you don't want to support our ongoing efforts to make the tutorial better, you can always 'print to pdf' and take it with you offline.
Safari works better then Chrome. I have a retina display so perhaps thats it. Its strange behavior, first it seems that greyed out images/css is loaded, then when you scroll the non-grey version appears and text appears as well that was not there before. Anyway I think this was probably designed this way but it glitches out weird when scrolling. Not a big deal just kinda distracting, glad its not part of Angular.
Thanks for the detailed info - I'm going to look into this. Our HTML/CSS structure is a little funky in order to make our sidebar drawer work smoothly, so it probably has something to do with that.
Hey all - we'd love to hear any questions, criticism, or ideas you have.
Also, we have a pdf version of the ebook available for $25 on the site, but we'd like to give all of you on HN a 20% discount. You can go to this URL to get the cheaper price - http://gum.co/SUry/awesomehners
Like I said in another comment, the git clone command should be fixed to use https instead of ssh. That way it would be able for users that have no access to the repository (almost anyone) to clane it without any problems.
This looks very interesting, thanks for sharing. I especially like that you decided to go with a fantasy football app - can't say I've seen many tutorials do that ;) And last but not least, I like that you chose the MEAN stack, for no reason other than I am unfamiliar with it and have been meaning to look into it.
Working with a large Angular app, I've found it much nicer to split away from the "Rails"-style convention of grouping by type (controllers, models, etc) and instead grouping by modules. This plays especially well with Angular where you can group everything within a module together and include a single module which ties all the dependencies together.
Curious if others do something similar and group code together by modules or does everyone group by type?
For front-end such as Angular I always group in modules, usually nested modules for larger apps. For back-end systems sometimes type makes more sense, especially when the app grows quite big and uses a layered architecture.
I recently spent days writing AngularJS app and I came to same conclusion that I should have split the app into modules.
Even though the style of grouping together Controllers and Services works well, it still won't be easy to maintain when the size of app grows big.
I'm always excited to structure my projects in a different more effective way - well, it's more of a struggle - anyway, this sounds interesting. Can someone elaborate on the file structure and structure of files and the way they connect?
I'm rolling with a MVP structure that frankly is becoming cumbersome with my current project's size.
What I've done myself and found it pretty scalable is as follows:
appShell/
views/allbaseviewshere
viewmodels/controllers or viewmodels for the core views
services/baseservices
moduels/
account
/views/
/viewmodels/
/services/
order
/views/
/viewmodels/
/services/
/controllers/
static
/css/
/js/
/images/
AppShell contains the app starter page, controllers and util services (showing popups, utility functions etc.)
AppShell/Views contains all the UI Skelton for the app (bootstrap main page, etc)
Every folder inside "modules" contains views, controllers (viewmodels) and services belongs to only that module.
Account folder contains views for user registeration, sign in, change user profile, etc. etc.
This way you can keep building new moduels in their respective folders without touching the frozen code (already built modules).
Each module talk to outside world using "services". No module can touch anything belongs to other modules but with "services".
I do it the way you just mentioned. I create specific modules and have them inject their dependencies. Each modules I create has its one or more models within its domain. I was going to go the repository route (one module per type) but it seemed overkill.
Nice work! I love how all the individual components are one big scrollspy. We (Coursefork) had a call with Eric yesterday to figure out how to make this kind of material "forkable", but something we didn't talk about was this idea of charging for the "source source code". What exactly does that mean?
great tutorial for anyone looking to get into the MEAN stack, easily the best on the net currently and they seem like there planning on adding a lot more to it also over time
looks like a great guide.. i was working through the original "how to learn angularJS" tutorial, but it got dry through some parts because it was too much material at once without too much of the application behind it in the big picture. I think this tutorial will definitely help with that, good looks!
Nice tutorial. One critique is the use of the "ng" prefix for your app's modules, which I believe is discouraged by the angular core developers since it's supposed to denote core angular functionality.
The best place I have found to learn about Angular is http://egghead.io . The videos are really clear and concise.
Many of the more confusing Angular fundamentals that many tutorials like these don't stress egghead.io has short 2 to 3 minute videos explaining in very clear terms.
PS. I know I sound like a shill, but I have nothing do with egghead.io other then I've found them immensely useful.
Looks like a solid walk through of building an angular app.
OT but the fantasy football twist is great. I only just started playing this year so I've been learning a lot. We're playing the uk version but I guess it's much the same. I've found it interesting how much strategy there is and how much data I can analyse.
We have a startup in the construction industry so wanted to use it as a tool for keeping a sort of weekly offline / banter conversation going on with clients. Turns out that I actually enjoy too!
Kind of surprised how in depth the tutorial goes, but only manages to mention the word "test" once and doesn't cover the fantastic testing back end included with the AngularJS seed (https://github.com/angular/angular-seed).
Unless the person learning AngularJS has never done any automated testing before, I can't see any reason why not to be using tests as a tool to further your own learning. I learned Go last year relying heavily on tests, first specifying what I wanted to achieve in a high level test, then learning as I figured out how to make the test pass.
Will you be covering security in any detail? Most people seem to miss this and I'm discouraged to see when I download the MEAN project this is based on it has serious security flaws.
For example, if you view the articles list at /#!/articles and make a note of any article ID, then visit /article/<article_id> it will return the article author's hashed password, salt and email address in addition to the article content. This also works while logged out. Kinda scary if people are using this as a template for their own apps.
Yeah that freaked me out too. I'm not super familiar with mongoose either so at the time I couldn't figure out how to leave them out of serialization always. I could do it for one-off calls but there should be a way to generally whitelist I'd think.
92 comments
[ 4.6 ms ] story [ 108 ms ] threadThat being said, I'm curious if there are other advantages to learn the MEAN stack?
The advantage is you can do real time async stuff a lot better then with other frameworks.
How does any of that make it harder than "most web development languages"?
> The advantage is you can do real time async stuff a lot better then with other frameworks.
How so? AFAIK, the only difference is that in Javascript you can only do async stuff, you don't really have a choice.
Yes other languages have these features but they are harder in Javascript, thats why Javascript is a harder language.
Look into Meteor.js - try doing that in PHP. That's how so. And you can write Sync code if you want to.
> try doing that in PHP
Meh, PHP is still the king, and it will stay there for a long time. Languages and platforms with crazy features pop up every day, but that's not enough for actually getting things done. You need a community, mature libraries, and a healthy ecosystem in general.
If you want something challenging try Clojure. It is by far The Best Language (tm) IMO, but you still can't even build a website with it. The only web framework available died and got separated into libraries, and everyone ends up wiring everything the way they can. Some people use Java libraries, some others reimplement everything. It's pretty messy.
The main advantage for using the stack has been a huge time saving in getting the project set up. NodeJS and express is hugely flexible about how you structure your source, which can also be a downfall in the additional mental load of deciding where stuff should go. MEAN does this for you.
The disadvantage has been where I want to do things differently from how MEAN is set up. For example, MEAN uses Bootstrap v2, I wanted Bootstrap v3. It was a slight faff updating it. It would probably be harder if you eg. wanted to use MySQL instead of MongoDB.
There is still a lot that you need to learn before you will get an app fully up and running, but with MEAN you can get cracking on stuff before you know it all. I don't know anything about Grunt yet, but can still use the Grunt file provided to run the server.
Well worth using in my opinion.
Looking forward to the player draft functionality with socket.io
Then this came out. Super excited for the weekend so I can dive on through. Thanks, Matt -- but stop reading my mind.
(n.b.: I'd be more than willing to pay sticker price if I could get a physical copy instead. I know it's lame, and slightly more effort, but I don't have a monitor setup at the moment so I'd rather leaf through a book than scroll through an alt-tabbed .pdf.)
Maybe http://lulu.com ?
Edit: Print to PDF works, should have realized it was a single page app ;-). Thanks!
Also, we have a pdf version of the ebook available for $25 on the site, but we'd like to give all of you on HN a 20% discount. You can go to this URL to get the cheaper price - http://gum.co/SUry/awesomehners
Thanks for all of your support!
Curious if others do something similar and group code together by modules or does everyone group by type?
Oh between I do group by Type inside of a module.
I've switched to this convention as well - less context switching of files.
I'm rolling with a MVP structure that frankly is becoming cumbersome with my current project's size.
appShell/ views/allbaseviewshere viewmodels/controllers or viewmodels for the core views services/baseservices moduels/ account /views/ /viewmodels/ /services/ order /views/ /viewmodels/ /services/ /controllers/ static /css/ /js/ /images/
AppShell contains the app starter page, controllers and util services (showing popups, utility functions etc.) AppShell/Views contains all the UI Skelton for the app (bootstrap main page, etc)
Every folder inside "modules" contains views, controllers (viewmodels) and services belongs to only that module. Account folder contains views for user registeration, sign in, change user profile, etc. etc.
This way you can keep building new moduels in their respective folders without touching the frozen code (already built modules).
Each module talk to outside world using "services". No module can touch anything belongs to other modules but with "services".
Bugs me to have the order logic spread out in the views, models, controllers, hepers, libs, etc folders.
Many of the more confusing Angular fundamentals that many tutorials like these don't stress egghead.io has short 2 to 3 minute videos explaining in very clear terms.
PS. I know I sound like a shill, but I have nothing do with egghead.io other then I've found them immensely useful.
OT but the fantasy football twist is great. I only just started playing this year so I've been learning a lot. We're playing the uk version but I guess it's much the same. I've found it interesting how much strategy there is and how much data I can analyse.
We have a startup in the construction industry so wanted to use it as a tool for keeping a sort of weekly offline / banter conversation going on with clients. Turns out that I actually enjoy too!
Unless the person learning AngularJS has never done any automated testing before, I can't see any reason why not to be using tests as a tool to further your own learning. I learned Go last year relying heavily on tests, first specifying what I wanted to achieve in a high level test, then learning as I figured out how to make the test pass.
Will you be covering security in any detail? Most people seem to miss this and I'm discouraged to see when I download the MEAN project this is based on it has serious security flaws.
For example, if you view the articles list at /#!/articles and make a note of any article ID, then visit /article/<article_id> it will return the article author's hashed password, salt and email address in addition to the article content. This also works while logged out. Kinda scary if people are using this as a template for their own apps.
- [1] http://www.thinkster.io/pick/sFObNwt4rA/angularjs-built-in-f...