Dialogs

Dialogs are a component of Angular Material.

This repository gives you a layer of abstraction on top of Angular Material's dialog service.
The custom DialogService allows you to easily open an alert and a confirm using pre-defined defaults that you can modify in angular/services/dialog.service.js.

DialogService example

(function() {
	"use strict";

	angular.module('app.controllers').controller('LandingController', LandingController);
  
  function LandingController(DialogService) {

    var vm = this;
    
		vm.confirmMessage = '';
    vm.sampleAlert = sampleAlert;
    vm.sampleConfirm = sampleConfim;

		var sampleAlert = function() {
			DialogService.alert('This is an alert title', 'You can specify some description text in here.');
		};

		var sampleConfirm = function() {
			DialogService.confirm('This is a confirm title', 'Are you sure you want to do delete this file?').then(function() {
					vm.confirmMessage = 'Success callback';
				}, function() {
					vm.confirmMessage = 'Cancel callback';
				}
			);
		};

	});

})();

Custom Dialogs

Another useful feature is the ability to easily call custom dialogs using a folder by feature approach.

Let's start by generating a custom dialog:

Bash

php artisan ng:dialog login

This will create a login folder in angular/dialogs with a sample controller and template.
You can then open this dialog easily using the following sample code:

Custom Dialog

(function() {
	"use strict";

	angular.module('app.controllers').controller('LoginController', LoginController);
  
  function LoginController(DialogService) {

    var vm = this;
    
    vm.customDialog = customDialog;
    
		var customDialog = function() {
			DialogService.fromTemplate('login');
		};
    
	});

})();

👍

This example works out of the box.
Elixir, live-reload, DialogService & Artisan generators all work in harmony to achieve this.