Updated MEAN Contact Manager

I wrote a fewarticlespreviously about a Contact Manager that I've put together using the MEAN stack. It has been an interesting project but unfortunately the previous version was broken as I used an rc version of AngularJS as well as an older version of Angular-UI. I got a few e-mails from you guys about how the project does not work and following the instructions on GitHub just wouldn't work. Unfortunately these claims were all correct and I had to spend this last weekend fixing the various issues and I have also made sure that it works with the latest version of AngularJS and Angular-UI (at least at the time of the writing of this article).

In light of the above, I give you the latest version of the MEAN Contact Manager - the source code is available on GitHub along with the installation instructions.

There are a few change compared with the other version - changes that mostly relate to how Angular-UI uses the Bootstrap modals now.

Once we have included all the necessary pre-requisite scripts that Angular-UI needs to use, we can declare a template inside our HTML file

<script src="/components/angular/angular.js"></script>
<script src="/components/angular-route/angular-route.js"></script>
<script src="/components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

<p>some html here...</p>
<script type="text/ng-template" id="uniqueID" />
    <div modal="myModal">
      <div class="modal-header">
          <h3>Modal header</h3>
      </div>
      <div class="modal-body">
        <p>My modal body - with a message:  </p>
      </div>
      <div class="modal-footer">
          <button class="btn btn-warning cancel" ng-click="close()">Close</button>
      </div>
    </div>
  </script>
  <p>some more html...</p>

Once the template is defined inside the AngularJS controller we can do the following:

function MyController($scope, $modal) {
  $scope.view = function () {
    var modalInstance = $modal.open({
      templateUrl: 'uniqueID',
      controller: myModalController,
    });
  };
}

var myModalController = function ($scope, $modalInstance) {
  $scope.message = 'This message will appear in the modal';

  $scope.close = function () {
    $modalInstance.dismiss('cancel');
  };
};

Finally, all we need to do is to assign the ng-click directive to a button/link and add the view() function to it. If we have done this correctly, the content of $scope.message should appear in our HTML.

The other change incorporated in this app is the fact that I am now using an AngularJS Factory for the CRUD operations. This means that making the call to our REST API backend via $http is now centralised - that is - the calls are made inside the factory function and not on an "as needed" basis. This means that the code is much cleaner and if ever we need to update the update function, it needs to be done at one single place only.

And finally I'd also like to invite you to a MEAN meetup event - if you're based in/around London, do come along.