Updated MEAN Contact Manager

I wrote a few articles previously about a Contact Manager built with the MEAN stack. Fun project, but the previous version was broken. I’d used an rc version of AngularJS and an older version of Angular-UI. Several of you emailed me saying the project wouldn’t run even after following the GitHub instructions. Those reports were all correct. I spent last weekend fixing the issues and making sure everything works with the latest AngularJS and Angular-UI (at least at the time of writing).

So here’s the latest version of the MEAN Contact Manager. The source code is on GitHub along with the installation instructions.

A few things changed compared with the older version, mostly around how Angular-UI handles Bootstrap modals now.

Once you’ve included all the prerequisite scripts that Angular-UI needs, you can declare a template inside your 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: {{ 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>

With the template defined, you can wire it up inside the AngularJS controller:

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');
  };
};

Then assign the ng-click directive to a button or link and point it at the view() function. If everything’s wired up correctly, $scope.message shows up in the HTML.

The other change: I’ve moved the CRUD operations into an AngularJS Factory. All $http calls to the REST API backend now live in one place instead of scattered around on an “as needed” basis. Cleaner code, and if you ever need to update the update function (say that three times fast), you only touch one spot.

And if you’re based in or around London, come along to our MEAN meetup event.