We will continue to chain our directive to the same module in the message-flash.js file as follows:

.directive('messageFlash', [function() {
  return {
    controller: function($scope, flashMessageService, $timeout) {
      $scope.$on('NEW_MESSAGE', function() {
        $scope.message = flashMessageService.getMessage();
        $scope.isVisible = true;
        return $timeout(function() {
          $scope.isVisible = false;
          return $scope.message = '';
        }, 2500);
      })
    },
    template: '<p ng-if="isVisible" class="alert alert-info">{{message}}</p>'
    }
  }
]);

The directive code is quite interesting. We first listen for the broadcast event, and on its trigger, we populate $scope.message by calling the getMessage function of flashMessageService.

It is usually a good usability practice to hide the flash message after a few seconds of being visible; hence, we will add a timeout function that will automatically hide the message in 2500 milliseconds.

The last piece of code of the directive is the template code that uses the ng-if directive to toggle the display. We also use Bootstrap’s alert CSS classes for some visual elegance.

Now, let’s add this directive to our main index.html file, as highlighted in the following code:

<div message-flash> </div>
  <div  class="container" ng-view></div>

Setting a flash message

Let’s revisit our AdminLoginCtrl function and set a flash message in case the login fails.

We add it to our controller.js file, as highlighted.

  .controller('AdminLoginCtrl', ['$scope', '$location', '$cookies', 'AuthService', 'flashMessageService',function($scope, $location, $cookies, AuthService, flashMessageService) {
          $scope.credentials = {
            username: '',
            password: ''
          };
          $scope.login = function(credentials) {

            AuthService.login(credentials).then(
              function(res, err) {
                $cookies.loggedInUser = res.data;
                $location.path('/admin/pages');

              },
              function(err) {
                flashMessageService.setMessage(err.data);

                console.log(err);

            });
          };
    }
  ])

Let’s test our login page with an invalid username and password, and we should be able to see our flash message.

Creating our Add-Edit page controller

Now that we have our global messaging system in place, let’s continue with building the rest of the admin sections

We’ll start to create our controller for adding and editing pages.

Create a new controller function in the angcms/public/controllers.js file as follows:

.controller('AddEditPageCtrl', ['$scope', '$log', 'pagesFactory', '$routeParams', '$location', 'flashMessageService', function($scope, $log, pagesFactory, $routeParams, $location, flashMessageService) {
        $scope.pageContent = {};
        $scope.pageContent._id = $routeParams.id;
        $scope.heading = "Add a New Page";

        if ($scope.pageContent._id !== 0) {
          $scope.heading = "Update Page";
          pagesFactory.getAdminPageContent($scope.pageContent._id).then(
              function(response) {
                $scope.pageContent = response.data;
                $log.info($scope.pageContent);
              },
              function(err) {
                $log.error(err);
              });
        }

        $scope.savePage = function() {
          pagesFactory.savePage($scope.pageContent).then(
            function() {
              flashMessageService.setMessage("Page Saved Successfully");
              $location.path('/admin/pages');
            },
            function() {
              $log.error('error saving data');
            }
          );
        };
    }
])

We start by defining our AddEditPageCtrl controller and injecting the necessary dependencies. Besides $scope and $log, we need to inject $routeparams to get the route parameters, the $location module to redirect, flashMessageService to set notifications, and pagesFactory service.

Next, we check to see if the page ID being passed is 0; this corresponds to an insert or the long MongoDB-generated ID, which means we’ll be doing an update.

In case if it’s the MongoDB-generated ID, we then need to fetch the data of the page and populate the edit template. For this, we make a call to the getPageContent factory function, and using promises, we populate our pageContent scope with the returned data.

The next part is writing the savePage function, which will save the contents of the form by posting it to the savePage factory function. When the promise returns with a success, we redirect the user back to the listing page.