Gần đây một số bạn có sử dụng hoặc xem demo bộ source MEAN Stack  và AzQuestion của mình và inbox hỏi mình cách hiển thị những thông báo kiểu này

Một dạng hiển thị flash message

Đây chỉ là một chức năng nhỏ nhưng nó giúp đem lại trải nghiệm người dùng tốt hơn khi mà các thông báo hiện lên không quá khó chịu. Trong ứng dụng này mình sử dụng angular-flash. Mình thấy nó dùng khá tốt, kết hợp với 1 chút css là tạo được khung thông báo thế này.

Nếu bạn không biết flash message là gì thì có thể hiểu cơ bản Flash message là thông báo hiển thị khi chuyển trang, ví dụ khi bạn thêm một bài viết mới và redirect về trang chủ thì kèm theo 1 thông báo cho biết thêm bài viết thành công.

Ứng dụng demo Flash Message:


http://sangnguyenplus.github.io/angular-flash-message-demo

demo-angular-flash-message

Để sử dụng thư viện Flash Message trong ứng dụng AngularJS.

  • Thêm thư viện này vào dependencies trong bower.json nếu bạn sử dụng bower để quản lý thư viện hoặc tải thư viện này từ đường dẫn https://github.com/wmluke/angular-flash và nhúng tập tin js vào ứng dụng.
  • Thêm 2 module của thư viện này vào app module. Ví dụ:

var app = angular.module('appDemo', [
    'angular-flash.service',
    'angular-flash.flash-alert-directive'
]);

  • Cấu hình tên các class css cho từng loại thông báo. Ví dụ:

app.config(['flashProvider', function (flashProvider) {

   flashProvider.errorClassnames.push('alert-danger');
   flashProvider.warnClassnames.push('alert-warning');
   flashProvider.infoClassnames.push('alert-info');
   flashProvider.successClassnames.push('alert-success');

}]);

  • Sử dụng trong controller:

app.controller('SuccessController', 
['$scope', '$http', 'flash', function($scope, $http, flash) {
   flash.success = 'Hiển thị thông báo thành công. Thông báo này sẽ tự mất sao vài giây!';
}]);

  • Hiển thị ngoài view.

<!-- Hiển thị thông báo thành công-->


<div flash-alert="success" active-class="in alert-flash" class="fade ">
     <button type="button" class="close" ng-click="hide()">&times;</button>
     <strong class="alert-heading">Thông báo!</strong>
     <span class="alert-message" ng-bind="flash.message"></span>
 </div>



  • Có thể thêm 1 chút css bên dưới để hiển thị thông báo đẹp mắt hơn.

.alert-flash {
   position:fixed;
   z-index:999999;
   right:12px;
   bottom:12px;
   display:block; 
   width:300px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px 3px 3px 3px;
   border-radius:3px 3px 3px 3px;
   background-position:15px center;
   background-repeat:no-repeat;
   -moz-box-shadow:0 0 12px #999;
   -webkit-box-shadow:0 0 12px #999;
   box-shadow:0 0 12px #999;
   color:#fff;
   opacity:1;
   -ms-filter:alpha(opacity=100); 
   filter:alpha(opacity=100);
   margin:0 0 6px;
   padding:15px 15px 15px 50px;
}

.alert-flash:hover {
   -moz-box-shadow:0 0 12px #000;
   -webkit-box-shadow:0 0 12px #000;
   box-shadow:0 0 12px #000;
   opacity:1;
   -ms-filter:alpha(opacity=100);
   filter:alpha(opacity=100);
   cursor:pointer;
}

.alert-flash * {
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   display:block;
}

.alert-flash .close {
   position:relative;
   right:-.3em;
   top:-.3em;
   float:right;
   font-size:15px;
   font-weight:700;
   color:#fff;
   -webkit-text-shadow:0 1px 0 #fff;
   text-shadow:0 1px 0 #fff;
   opacity:.8;
   -ms-filter:alpha(opacity=80);
   filter:alpha(opacity=80);
   outline:none!important;
}

.alert-flash.alert-danger {
   background:#bd362f url(../images/alert-danger.png) no-repeat 15px center!important;
}

.alert-flash.alert-success {
   background:#51a351 url(../images/alert-success.png) no-repeat 15px center!important;
}

.alert-flash.alert-info {
   background:#2f96b4 url(../images/alert-info.png) no-repeat 15px center!important;
}

.alert-flash.alert-warning {
   background:#f89406 url(../images/alert-warning.png) no-repeat 15px center!important;
}

Hình ảnh sử dụng trong đoạn CSS trên bạn có thể tải tại đây.


https://sangplus.com/wp-content/uploads/2016/01/flash-message-images.rar

Vậy là xong, chắc đến đây bạn đã có thể hiểu được cách hiển thị thông báo flash message đẹp mắt như trong demo của mình.

Nếu bạn vẫn chưa hiểu hoặc do cách hướng dẫn của mình hơi phức tạp so với bạn thì có thể xem full source demo trong bài viết này tại địa chỉ: https://github.com/sangnguyenplus/angular-flash-message-demo

Chúc các bạn thành công!

Mình là 1 developer mới vào nghề, chưa có nhiều kinh nghiệm với lập trình web nhưng luôn muốn chia sẻ những hiểu biết của mình với các lập trình viên khác. Khá là gà và lười viết blog, chỉ ham code và chuyên Laravel.