dataObject creation in MEANJS 4.2

Question

I recently load several versions of MEANJS (meanjs.org) to understand the file structure better and view the changes.

In 4.0, articles.client.controller.js to be specific they have: and I'm able to make changes to new Articles there as I appended new fields to the mongoose Schema.

$scope.create = function () {
      // Create new Article object
      var article = new Articles({
        title: this.title,
        content: this.content
      });

In 4.1, it comes like this.

// Create new Article object
      var article = new Articles({
        title: this.title,
        content: this.content
      });

Now with 4.2, I don't see that in articles.client.controller.js,

vm.article = article;

I have my modified Schema version. How to make changes to the creation of a new Articles object? This is a good question for upgrading app from 4.0, 4.1 to 4.2.

Answer 1

It's changed slightly.

Trying to use the resources directly as was done in version 4 may cause problems where the page is ready but not the resource (Article).

To get around this problem angular uses resolves which which use promises to handle the timing issues.

The important thing to know is that the promise will give you some answer at some point in the future - Just, it may not be the answer you'd like!

Either way, it always tells you once it has the answer - or more correctly once it has resolved.

Angular uses the promises to help out with the timing issues mentioned above. The resolves are keyed to a promise and will only load the controller once the resolve(s)... erm... resolve!

This means we will always have articles when we expect.

Promises, resolves - Let me at'em - Let me at'em!!

The resolves option is used in the updated articles.client.routes . Here we see that articleResolve is keyed to getArticle which isn't a promise itself but is instead a function which returns one (which is just a good!)

If we look at the lines below we can see how we create this promise returning function. It's a function which uses Angular's $stateParams (to inspect the state) and fill in the articleId for the requested article. We get the articles using the injected and familiar Articles service.

In your case you want to know how new articles are created so we must travel a little further into the articles service which has recently been updated.

This is almost the same as the Articles service which you are used to using, however the additional lines add an extra method to this service which allow it to create, or if existing to save the article details.

These lines are how we extend a service in angular and the below implementation basically checks the article to see wether it has the ._id property. This is the string representation of the .id property that all saved mongo db documents get.

It uses this information call the appropriate method.

Finally, back where we began

In the controller we see the earlier created promise key articleResolve used as the second injected argument; As if to say "when you have this articles service resolved use it as this second parameter when I'm injecting the arguments".

When we look at the controller definition, we notice that the corresponding second parameter is named article.

Background : Within any controller this actually points to the scope (or $scope). As convention ^† , and to make things in angular look like standard JavaScript where we often say var that = this , we create a variable to reference our scope.

Within the controller we attach this article to the scope so that it is accessible in the views via vm.article.

Fin!

^† Graze at Papa John's style guide when you get chances and slowly evolve your code style to match it. It will help you avoid traps and as a side effect makes lot of the angular code examples/tutorial more understandable, especially where the authors also follow it.