Hi

Thanks! Glad you're enjoying the book so far and making good progress smilie

Can you tell me which code samples in particular don't match? Then I'll be able to give you a better answer!

Thanks
Simon
Hi

The data returned from the service - foundlocations In your code - is a parameter of the callback function in the .then when the promise resolves. The function should be like this:

private getLocations(): void { 
  this.loca8r2DataService 
    .getLocations() 
    .then(function(foundlocations) { 
      this.locations = foundLocations; 
    }); 
} 


Which is equivalent to this using arrow functions:

private getLocations(): void { 
  this.loca8r2DataService 
    .getLocations() 
    .then((foundlocations) => { 
      this.locations = foundLocations; 
    }); 
} 


Hope that helps!
Simon
Hi Juliette

I haven't come across this problem before.

After starting up the app in Heroku, can you check the logs? The Mongoose connection events should output a log saying which database it has connected to, or if it has failed.

You can see the logs in terminal with this command:

heroku logs


Thanks
Simon
Hmmm, that seems strange indeed!

Is everything set up in your schema correctly?
Hi

Yes, that's right. In this case the models aren't created against
mongoose
so can't be accessed that way - when you have separate connections the models can't be held in a shared reference as there's a possibility that you could have collections or schemas of the same name in two different databases.

Hope that helps.

Simon

Hi

Thanks for the suggestion, you're not the first person to struggle with this.

In the final version of the book, there is normally a bit more thought given to exactly where the code listings sit in terms of page breaks. In the MEAP they are just put in where they fit flow in the text.

I'll ask again about the columns for code listings, I think it's a great idea! They're weren't able to do it in the first edition, but who know?!

Thanks
Simon
Whoops!

Thanks for spotting that! Yeah, that was left over from the first edition, but I decided not to keep it.

I'll look for it in Chapter 6 and replace it with the standard
res.status().json()
approach - the code in GitHub will be correct.

Thanks!
Simon
Hi all

Yes, it should be index, not routes. It was a typo on my part. I sometimes change it to "routes" in my projects, but haven't here.

I've made a note of it and will update the chapter soon.

Thanks!
Simon
Hi

Are you still getting the problem?

I presume the error is showing in the browser? Which stage of the book are you at? Is mLab set up correctly, and your app pointing to that instead of localhost?

Thanks
Simon
Hi Justin, glad you figured it out!

Cheers
Simon
Hi

Thank you!

Yes, this book covers all three architectures. Chapter 8 was just released in MEAP a few days ago, covering the second architecture (Angular in Express).

I hope you enjoy it! Angular is very different from AngularJS, but I really like it.

Cheers
Simon
Thanks Klaus, glad you got it sorted smilie

Simon
Hi both

Thanks for stepping in Joerg. You're right, I think that's the most likely cause.

Google are starting to enforce the API key usage which they didn't when I started writing.

I'll get the book updated to cover this before the final version. Thanks for highlighting the issue.

Cheers
Simon
Hi all

Thanks for highlighting this. Bootstrap 4 was only in alpha when I started the book. I'll update the book to use the live version before it is finally released.

Looks like there will be a few things to sort out when I do!

Cheers
Simon
Hi

What browser are you using? IE has a bad habit of caching Angular $HTTP requests.

In the Node,.js code for the API route try putting in a console log or two to see where the data falls over. Does the API route work if you call it directly, either in the browser or PostMan?

Thanks
Simon
Thanks Joerg

I'll check them out. Appreciate the feedback smilie

Simon
Hi

Thanks for spotting that, the production team have put the wrong one in, I'll let them know.

Thanks!
Simon
Hi

Thanks for spotting that, I'll get the production team to update it for the next release.

Thanks!
Simon
Hi

Typescript will only be used for the Angular section, the Node.js code at the start of the book is all JavaScript, using a few ES2015 (ES6) features.

Thanks
Simon
Agree with Jesse, I've just moved my team from Sublime Text over to VisualStudio Code for JavaScript work. It's great as an advanced text editor - it's fast, it looks nice and renders the fonts nicely, has lots of stuff built in and there's loads of extensions available. And it's free smilie
Thanks for your kind words! I'm glad you're enjoying the book, and finding it useful smilie

I tried your handy little script in my Safari and Chrome and both worked fine for me (see attached screenshots).

A quick search and it seems as though you're not alone, and that Safari's geolocation implementation is a bit buggy smilie
Great stuff, thank you both!

Simon
I'm using Safari 9 on OSX (Yosemite) and it works.

Check the privacy tab in settings, particularly the "Website use of location settings" option.

(see attached screenshots)
Hi

To test it you'd need to temporarily disable the other route.

It's generally a good Idea to have this level of error trapping; if you were to change the routes so there was no overlap you'd want to make sure that your API would respond appropriately.

Simon
It can add a small amount of latency, and there are instances where I haven't done it that way, such as building a streaming server.

But as an architectural best practice it's a much better idea to separate the concerns, for the reasons covered in Chapter 2.

Way back in the day I didn't do it that way at all, and everything was closely coupled. I can tell you with 100% certainty which code bases are the easiest to maintain.
I'm a Screenflow man myself.
Hmmm, something doesn't look quite right.

How did you get the data into the database? If you create the location and review records by using the API then they will be assigned IDs by Mongoose.
What's the exact error you get? Screenshots of your terminal would be even better
Good resources, thanks!

There's also this Introduction to Jade templating video course on Udemy (by a friend of mine).
Sorry, this was a bit of a hokey-cokey chapter. It was in, out, in, out and then we shook it all about! And now it's finally in! I guess you now have the latest version of the PDF.

Thanks
The whiteboard images are being replaced by electronic versions in the final version, so there shouldn't be any contrast issues.

Thanks
Hi

I don't know, Jade is about as easy as it gets in my opinion. A decent text editor or IDE will be able to catch problems with indentation and mixed spaces/tabs. It's the best template engine for Express, which is why we cover it in the book. It would be nice to discuss the other options, but there's not enough space to cover all of them in a meaningful level of detail.

The approach of refactoring from Express to Angular - as noted in the book - is not what you'd do in real life.

It is done here to show how in the MEAN stack you can house the application code on either the server or the browser, depending on your need (as covered in Chapter 2). Building two different applications from scratch would have made the book significantly longer.

Thanks
What error do you get?

Have you installed Node & npm?
Hi

That's strange, I'll check it out. I haven't seen it happen on my browsers, but will try to replicate it.
Hi

The need for scaling up the API and application servers comes when you start getting more traffic, and need to serve more and more people.

Node.js is very efficient, so you don't need to scale up the servers as soon as you might with other more traditional server languages. But even so, you couldn't run an enterprise scale app on an Amazon EC2 micro-instance; you'd need a cluster of servers to manage the demand and throughput.

You're right that an API is a collection of URLs to interact with the data, but as you go through the book, you'll see that there's more going on behind the scenes in the API - there can be quite a lot of processing.

Hope that helps.

Simon
Hi

Yeah, the instructions for installing Express are in the Appendix.

For the source code, there are two repos.

The main one for Express 4 is here: https://github.com/simonholmes/getting-MEAN

The code for Express 3 (older versions of the MEAP) is here: https://github.com/simonholmes/getting-MEAN-express3

Thanks
Simon
You're right. Updated. Thanks Mark.
Hopefully you've noticed by now that the code is updated on GitHub - sorry for the time mismatch the MEAP release caught me off-guard.
Thank you smilie

The next release will based on Express 4 which should tie everything together.
Thanks for pointing it out, you're right. Angular prevents a form from being submitted if the action is blank or missing.

It's relatively easy to address, by passing the current URL via the controller

var renderReviewForm = function (req, res, locDetail) {
  res.render('location-review-form', {
    title: 'Review ' + locDetail.name + ' on Loc8r',
    pageHeader: { title: 'Review ' + locDetail.name },
    user: {
      displayName: "Simon Holmes"
    },
    error: req.query.err,
    url: req.originalUrl
  });
};


And then outputting the URL in action of the form in Jade.

form#addReview.form-horizontal(action="#{url}", method="post", role="form")

Thanks very much, taking the time to give positive feedback is always greatly appreciated!

I'm taking the book through the final review and pre-production processes at the moment.

After that I'll write the posts. I'll announce them here and on Twitter @simonholmes
I expect it will be a couple of weeks to give those following Express 3 time to download and see the final code.
I'm afraid it was decided to remove this chapter in favour on concentrating in greater depth how to build Angular SPAs.

I do however plan to write a follow-up blog post (or two) covering this topic.
Hi all

The code is still up there on GitHub all the way through to chapter 10. Each chapter has it's own branch - you just need to change branches to see it and get it.

To avoid confusion I've updated the readme on the master branch to include the names of all branches.
You can use Angular in Jade - as we do in Chapters 8 and 9 - but not Jade in Angular. The Angular view templates are served to the browser as static HTML files, onto which Angular binds.

So you could serve these HTML views using Express and Jade, but you end up with a horrible mix of technologies, as well as needing to add routes and controllers for each template. It's a mess. It's not good for keeping things clean and separate.

In theory you should be able to pick up and move the Angular SPA - or any of the components - and drop them somewhere else. This could be a different Express app, and Apache server or even a CDN server static resources.

Hi

In Chapter 9 we switched from compiling Jade templates using Express to delivering HTML views directly to the browser using Angular.

Hope this helps.

Simon

Hi guys

Yeah, you get a few Express 3 related warnings when starting up this version of the code. This is the final version of the MEAP to be based on Express 3, to enable everyone who's been following along so far to complete the journey.

The next version will contain all of the updates to Express 4. It shouldn't be too long in coming.

Hi

Yes, it's currently all in GitHub.
Hi all

The Mongoose schema shouldn't been updated to include an id or _id field (unless you're using a bespoke ID system). Dropacid had it right.

When creating a new sub-doc through Mongoose, Mongoose will automatically add it. When adding a new sub-doc through the Mongo shell you need to specify the id as _id.

I'll update the snippet in the drafts - thanks for spotting and fixing Dropacid!

Thanks
Simon
Hi

Thank you!

Yeah, Heroku should set a dyno automatically, but I've had instances where it hasn't, so I added that extra instruction just in case. Better safe than sorry smilie

Thanks
Simon
Hi

Thank you, glad you're enjoying the book. If in doubt always copy rather than cut!

Thanks
Simon
I'm happy for anyone who wants to do this to join in. I'd love to see the idea evolve. I don't have much time to contribute myself but would very much like to be kept up to date with any progress.
The Express 4 version is coming. Probably not in the next release, which will most likely give chapters 9 and 10 for those who have been following through with Express 3.

In the Github project there's a branch that contains a default Express 3.4 install as a starting point if you want to get going.
https://github.com/simonholmes/getting-MEAN/tree/chapter-03-blank

At this stage though, it's probably worth waiting for the Express 4 version.
Hi Jörn

Thanks for your message. As you say, it's down to the JavaScript engine being used. Node is fine, and various others will be fine too, but it's not guaranteed. I suspect that most browsers are catching up with Node in handling this well, but others <cough>IE</cough> especially older versions will be lagging behind. So if you're going to pick a best practice you should really edge towards the one that is most effective in most places, avoiding different conventions for server-side JS and client-side JS.

The JS Appendix is not exclusively JS-for-Node of course, it is JS in general.
I'm going through the process of updating the book to be based on Express 4 and don't need the session support, so need to worry about it.
Thanks for the note.

I've set up a repo on GitHub with the CSS files in:
https://github.com/simonholmes/amelia
Hi Mark

Good to know, thanks. It shouldn't cause any real issues as that particular signal there is for nodemon which you should only use in development. It may cause your database to maintain unnecessary open connections, but again this isn't really an issue in a development environment as your system is most likely going to be able to handle the relatively small amount you'll have.

If your Mongo service restarts - or your computer - then any outstanding connections will automatically be closed.
Hi thanks for the note.

The listing is actually correct as it is using the module getter syntax to register the controller with the module.

Near the start of Section 8.2.1 we create the module using the setter syntax.
angular.module('loc8rApp', []);


Then we create the controller function, before finally registering the controller with the module. So you end up with something like this.

angular.module('loc8rApp', []); // set the module

// define the controller function
var locationListCtrl = function ($scope) {
  // controller code in here
};

angular
  .module('loc8rApp') // get the module
  .controller('locationListCtrl', locationListCtrl); // register the controller

As Mark says, there's been a major update in Express since the chapter was written. I'm about to go back through and update the instructions and source code to use Express 4 instead of Express 3.
Thanks, I'm about to go through and update Express to version 4, so I'll update this at the same time.
Hi

What does your default app.js code look like? Using Express 3.4.8 is should look likis:

https://github.com/simonholmes/getting-MEAN/blob/chapter-03-blank/app.js
Wow, nice work! That's how to debug!
Thanks guys!
Thanks Mark, I'll check it out.
Good point on the error trapping, I'll take a look at it.

In JavaScript if you test for req.params.locationid first and req.params doesn't exist you'll get an error, saying that you can't reference a property of undefined. (We're not testing here for req because we know it exists, you couldn't get to that function without passing through a req object.)

In an if condition JavaScript works from left to right, and if one of the conditions is false will not bother looking at any of the following conditions. So in this case if you check for req.params first and it doesn't exist JavaScript will fail the if condition right there and not look at the req.params.locationid and throw an error.
Mark's got it right - you'll create that controller file soon after so that everything works again. Your API and server app will need different controllers, as they do different things.
Exactly right. The distance won't be saved in the database as it will be different for everybody, calculated on the fly based on the user's location (as soon as we've added in geolocation support).
Hi all

As mentioned before I'll update the book to the latest version of Express when all of the chapters are finished. It's the standard approach - if you go back and update the book every time a version of one of the technologies is updated you'd never get it to print!

If you want to follow as it is now, I've got a blank Express 3.4.8 structure here:
https://github.com/simonholmes/getting-MEAN/tree/chapter-03-blank

If you want to do it in Express 4 before the update to the book is out, have a crack at it! It will help deepen your understanding of Express. The main differences in Express 4 are the routing, and that many of the options and bundled middleware must now be included manually in the package.json file.
Thanks Mark, I'll look into it. It has been quite a while since I used Node on Windows! You used to have to do this, perhaps not anymore.
Thanks for the heads up Mark, I'll check it out.
Chapter 7 should be out to MEAP pretty soon, it is written, revised and with Manning right now.

Chapter 8 shouldn't be too far behind either, as the first draft is also written and with Manning for first review.
I believe Chapter 8 is going to the MEAP co-ordinators this week, so it should be out with you guys pretty soon.
At the risk of giving spoilers, we'll be installing the request module - https://github.com/mikeal/request - and using it to make HTTP requests from the app_server controllers to the app_api routes.
Yes you're right, it was a typo which is now fixed and will be in the next release.

Good spot, thanks!
Hi John

Glad you're enjoying the book so far!

The book isn't using Bower as we decided to keep it to the core technologies, there are four to learn in the book without adding others. I would have liked to include Bower and Gulp for example but it would have made the book far too long.

It will be mentioned in a "things to look at next" section, but we're not going to cover it in any detail.

Cheers
Hi Robin

It should indeed be [lng, lat].
If you console.log the values out, are they coming out with the correct values?

If you're in Munich I think they should be something like
Latitude: 48.1374300
Longitude: 11.5754900
Yep, a typo, thanks for spotting it guys. It's now fixed ready for the next MEAP release.
Hi Michael

I haven't tried this on windows, but you can try this command instead:
heroku config:get MONGOLAB_URI
No worries Edward, we've all done it! Glad you're enjoying the book smilie
It's a Mongoose method rather than a Mongo method
http://mongoosejs.com/docs/api.html#model_Model.findById

And being JavaScript it is case sensitive, change findByID to findById and that should help.
We'll be looking at managing user authentication in Chapter 10
Hi, you didn't miss anything, I did! In Chapter 5, towards the end of section 5.4.2 where we push reviews into MongoDB using the Mongo shell we should have pushed an additional path

id: ObjectId(),

I'll make sure it is in for future releases.
Thanks Patrick, I'll check it out.
A couple more chapters to go until the Angular part - first it's APIs. Chapter 6 has just been released!
Thanks all, I'll get it updated for the next release of the MEAP.
Hi Misa

Thanks for battling through and getting things working - I'll check the issues out.

Cheers
Simon
Thanks for the feedback, I'll go through the bits and pieces as I update the manuscript.

To answer your question:
In the .jade files, rather than using...
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
...why not simply use...
script(src='//ajax.googleapis.com/ajax/libs/jquery/latest/jquery.min.js')


It's not a good idea to specify the latest version of jQuery as you may well have plugins or Bootstrap components that are dependent on a specific version. jQuery updates are not alway fully backwards compatible. Typically you don't know there's a dependency or a problem until it's too late. It's just like how you shouldn't use wildcards in your package.json for a Node application.
Hi Alex

Chapter 6 is coming next, and shouldn't be too far away!

This version has a replacement Chapter 2. Chapter 2 used to be the JavaScript chapter but this is now Appendix D. The new Chapter 2 covers some bigger picture themes and discusses various approaches to MEAN Stack architecture, some practices, guidelines and ideas on how to put them together.

It provides a better lead-in to Chapter 3 than the previous one. Whilst it's an interesting chapter I'm afraid it doesn't give you any more code to get stuck into smilie

Thanks
Simon
Have you viewed the application in the browser? You need to do so to start the application and create the initial connection.

If you run the heroku logs command again you should then see a load of stuff like this (Mongoose connection is line two here):

2014-05-21T05:11:44.019923+00:00 heroku[web.1]: State changed from starting to up
2014-05-21T05:11:44.089532+00:00 app[web.1]: Mongoose connected to mongodb://heroku_app20110907:4rqhlidfdqq6vgdi06c15jrlpf@ds033669.mongolab.com:33669/heroku_app20110907
2014-05-21T05:11:41.748632+00:00 heroku[web.1]: Starting process with command `node app.js`
2014-05-21T05:11:48.905699+00:00 heroku[router]: at=info method=GET path=/ host=getting-mean-loc8r.herokuapp.com request_id=b9004ddf-b505-41a6-9f94-860f477c6e65 fwd="109.149.17.144" dyno=web.1 connect=1ms service=3688ms status=200 bytes=3792
2014-05-21T05:11:48.898337+00:00 app[web.1]: GET / 200 3683ms - 3.41kb
2014-05-21T05:11:49.345740+00:00 heroku[router]: at=info method=GET path=/bootstrap/css/amelia.bootstrap.css host=getting-mean-loc8r.herokuapp.com request_id=1b06e5e3-0011-4f39-90ff-2fa77dec4d34 fwd="109.149.17.144" dyno=web.1 connect=1ms service=65ms status=200 bytes=127442
2014-05-21T05:11:49.460450+00:00 heroku[router]: at=info method=GET path=/bootstrap/js/bootstrap.min.js host=getting-mean-loc8r.herokuapp.com request_id=6785690d-e00b-46b8-bf80-3b41b4b47cce fwd="109.149.17.144" dyno=web.1 connect=1ms service=86ms status=200 bytes=28038
2014-05-21T05:11:49.484074+00:00 heroku[router]: at=info method=GET path=/stylesheets/style.css host=getting-mean-loc8r.herokuapp.com request_id=69b0b40d-b02e-42a3-93b0-01a95abc6ce8 fwd="109.149.17.144" dyno=web.1 connect=3ms service=112ms status=200 bytes=508
2014-05-21T05:11:49.351313+00:00 app[web.1]: GET /bootstrap/css/amelia.bootstrap.css 200 60ms - 124.17kb
2014-05-21T05:11:49.508804+00:00 app[web.1]: GET /stylesheets/style.css 200 111ms - 221b
2014-05-21T05:11:49.483755+00:00 app[web.1]: GET /bootstrap/js/bootstrap.min.js 200 98ms - 27.1kb
2014-05-21T05:11:49.990310+00:00 heroku[router]: at=info method=GET path=/bootstrap/fonts/glyphicons-halflings-regular.woff host=getting-mean-loc8r.herokuapp.com request_id=f9b2e540-5f92-4afe-b559-591dc49cc561 fwd="109.149.17.144" dyno=web.1 connect=1ms service=45ms status=200 bytes=23581
2014-05-21T05:11:49.988295+00:00 app[web.1]: GET /bootstrap/fonts/glyphicons-halflings-regular.woff 200 33ms - 22.75kb
2014-05-21T05:11:50.567460+00:00 heroku[router]: at=info method=GET path=/favicon.ico host=getting-mean-loc8r.herokuapp.com request_id=eab43653-7e5f-4242-ba63-9624665488aa fwd="109.149.17.144" dyno=web.1 connect=1ms service=16ms status=200 bytes=1634
Hi



The bulk of the book will be using a single collection of documents with nested subdocuments, rather than multiple collections. This is a fairly common approach with MongoDB, although I do understand that it is not always the case.



My previous book Mongoose for Application Development does look at using two separate collections, as well as nested subdocuments. It doesn't cover Angular at all, but it does show how you can use Mongoose population in place of traditional SQL JOINS.



Hope that helps.



Simon
Hi Patrick

I can't see your image I'm afraid as it's not publicly accessible.

However, the whiteboard drawings are just for the MEAP. When the book is finished the drawings will be recreated electronically by the production department, so there shouldn't be any issues.

Thanks
Simon
Hi Jeff

It's coming from the 'action' in the <form> itself. When you submit the form the 'action' is the URL that will handle it. It's not designed to do anything at all at the moment smilie

Later in the book we'll update this so it will actually do something, rather than simply redirect to the Location page.
Hi Jeroen

I've created a new branch on GitHub with a clean Express 3.4.8 install.
https://github.com/simonholmes/getting-MEAN/tree/chapter-03-blank

Note that it doesn't include the node_modules folder, so it just what you would get after running $ express --sessions

Hope that helps!
Simon
--session is not supported in Express 4.x, pretty much everything has moved to middleware that has to be defined as a dependency and installed using npm. When I update the book to from Express 3 to Express 4 I'll cover this stuff.
Hi Roger

Good point. Heroku already had my credit card info so I didn't notice.

I think you can just sign up for a free account at https://www.mongolab.com and get the database URI from there. I'll try it later and see.

Thanks
Simon
You can indeed set up an account directly on MongoLab and do it that way.

I've added a sidebar covering this in Chapter 5, which will be included in the next release.

This will paste horribly in here, but this is what it says, and should get you going on your way.

----------------------------------

Setting up MongoLab manually
You don’t have to use the Heroku add-on system if you don’t want to. What you really want to do is to set up a MongoDB database in the cloud and get a connection string for it.

You can follow through the MongoLab documentation to guide you through this: http://docs.mongolab.com/

In short, the steps are:
1. Sign up for a free account
2. Create a new database (select Single Node, Sandbox for the free tier)
3. Add a user
4. Get the Database URI (connection string)

The connection string will look something like this:
mongodb://dbuser:dbpassword@ds059957.mongolab.com:59957/loc8r-dev
All of the parts will be different for you of course, and you’ll have to swap out the username and password with what you specified in step 3.

Once you have your full connection string you should save it as part of your Heroku config. With a terminal prompt in the root folder of your application you can do this with the following command:
$ heroku config:set MONGOLAB_URI=your_db_uri

Replace your_db_uri with your full connection string, including the mongodb:// protocol. The quick and easy way automatically creates the MONGOLAB_URI setting in your Heroku config. These manual steps bring us to the same point as the quick way, and you can now jump back to the main text in the ‘Breaking the URI down into its components’ section.
Hi Roger

Thanks, I'll get it added before the next update.

Cheers
Simon
Hi Bob

Building up simple headers and footers can be as simple as this:
<div class="header">

</div>

<div class="footer">

</div>

The trick really is down to the CSS. Here the world is your oyster, but sadly diving into CSS is beyond the scope of the book. In fact, I'm using Bootstrap to avoid getting bogged down in setting up a load of CSS!
Good point, thanks. It should be "show collections" instead of "show dbs".

It makes sense that you can't "show dbs" as you are connecting directly to a database, not a server.
Hi JK

The potential list is huge as Express can work with most template engines and CSS pre-processors. The ones mentioned are the ones that you can set up using the single Express terminal command.

Cheers