MEAN js adding a CRUD module

it's continuation of previous post.

Lets try to add  a new CRUD module to the app. First create a new module using the yo generator.


We will create a new module to add a company name and it's location.

yo meanjs:crud-module company

It will ask some questions. Need to specify angular folders. Select all those. Next it will ask about menu. whether it need to be added or not. type 'Y' so it will create those links.

So the module is loaded. If you check the app folder you will find some new files in the app. Currently it had option to add the name only. We will add location also. Lets edit that. Navigate to model app/models/ and open company.server.model.js . This file consist the model of the module 'company'. This will define the mongoose schema . Lets add properties for this schema.

var mongoose = require('mongoose'),
 Schema = mongoose.Schema;

var CompanySchema = new Schema({
 name: {
  type: String,
  default: '',
  required: 'Please fill Company name',
  trim: true
 },
 location: {
  type: String,
  default: '',
  required: 'Please fill location',
  trim: true
 },
 created: {
  type: Date,
  default: Date.now
 },
 user: {
  type: Schema.ObjectId,
  ref: 'User'
 }
});

mongoose.model('Company', CompanySchema);

In the above code we added a new property called location which is of String type. Next we will edit the angular controller for the module company. Open  public/module/companies/controllers/companies.client.controller.js

$scope.create = function() {
   // Create new Company object
   var company = new Companies ({
    name: this.name,
    location: this.location
   });

   // Redirect after save
   company.$save(function(response) {
    $location.path('companies/' + response._id);

    // Clear form fields
    $scope.name = '';
    $scope.location = '';
   }, function(errorResponse) {
    $scope.error = errorResponse.data.message;
   });
  };

Lets change the create function . we will create angular data binding by adding the location property. Lets change the views so we can add edit and delete it.

In public/module/companies/views/create-company.client.view.html

<section data-ng-controller="CompaniesController">
    <div class="page-header">
        <h1>New Company</h1>
    </div>
    <div class="col-md-12">
        <form class="form-horizontal" data-ng-submit="create()" novalidate>
            <fieldset>
                <div class="form-group">
                    <label class="control-label" for="name">Name</label>
                    <div class="controls">
                        <input type="text" data-ng-model="name" id="name" class="form-control" placeholder="Name" required>
                    </div>
      <label class="control-label" for="location">Location</label>
                    <div class="controls">
                        <input type="text" data-ng-model="location" id="location" class="form-control" placeholder="Location" required>
                    </div>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-default">
                </div>
      <div data-ng-show="error" class="text-danger">
   <strong data-ng-bind="error"></strong>
      </div>
            </fieldset>
        </form>
    </div>
</section>

Make the changes in other views also. While changing other views make sure that the ng-model is set as 'company.location'.