MEAN.JS: How to create of 1 model that requires another

Notice: I am new to MEAN and every single part of what makes MEAN up.

In reference to the default configuration of MEANJS and the example module Articles. I have created another model called Program.

I know how to add other fields or properties to a model to be able to create and edit accordingly, but I haven't a clue when that new property is a reference to another model.

Without getting into the details of what a Program is, I want to modify the existing create and edit pages for Articles to require the user to specify, from a dropdown, which Program it belongs to.

I have already updated the Articles schema

var ArticleSchema = new Schema({
  created: {
    type: Date,
    default: Date.now
  },
  title: {
    type: String,
    default: '',
    trim: true,
    required: 'Title cannot be blank'
  },
  content: {
    type: String,
    default: '',
    trim: true
  },
  user: {
    type: Schema.ObjectId,
    ref: 'User'
  },
  program: {
    type: Schema.ObjectId,
    ref: 'Program',
    required: 'Program cannot be blank'
  }
});

Solution

These are the steps you need to follow:

Make sure there's a list function in your Program server side controller (program.server.controller.js)

 TheProgram = mongoose.model('Program')

 ...
 /**
  * List of programs
  */
 exports.list = function (req, res) {
     console.log('ProgramController.server.list');
     TheProgram.find().exec(function (err, events) {
         if (err) {
             return res.status(400).send({
                 message: errorHandler.getErrorMessage(err)
             });
         } else {
             res.json(programs);
         }
     });
 };

Create the proper policy(programs.server.policy.js, omitted here) and routes for program on the server side (program.server.routes.js)

 module.exports = function (app) {
     // program collection routes
     app.route('/api/programs').all(programPolicy.isAllowed)
         .get(programs.list);

Create the client side angular Event service (programs.client.service.js omitted here) that should be injected in the controller and create the controller (programs.client.controller.js) that gets the program list from server side:
```
     // Find a list of Programs
     $scope.find = function () {
         $log.info('executing ProgramController.$scope.find');
         self.programs = Programs.query();
     };
```

Then load the program list on the page:

 <select ng-options="program in programs" ng-model="selectedProgram"></select>

I have omitted some required code but this should provide a good start.