{"_id":"57ffd85f755a2e1700c2bb31","project":"567083021dabd80d00b122ae","version":{"_id":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","__v":1,"createdAt":"2016-10-13T18:54:23.018Z","releaseDate":"2016-10-13T18:54:23.018Z","categories":["57ffd85f755a2e1700c2bb06","57ffd85f755a2e1700c2bb07","57ffd85f755a2e1700c2bb08","57ffd85f755a2e1700c2bb09","57ffd85f755a2e1700c2bb0a","57ffd85f755a2e1700c2bb0b","57ffd85f755a2e1700c2bb0c","57ffd85f755a2e1700c2bb0d"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"3.4.0","version":"3.4"},"user":"567082433a32d20d00c45cab","category":{"_id":"57ffd85f755a2e1700c2bb0d","__v":0,"version":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-18T23:14:25.130Z","from_sync":false,"order":7,"slug":"extras","title":"Extras"},"parentDoc":null,"__v":0,"updates":["5704122459c5190e000ab681"],"next":{"pages":[],"description":""},"createdAt":"2015-12-18T23:26:57.118Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/AozZ7FIQ0WpClvBs37D2_Screen_Shot_2015-04-17_at_7.27.28_PM_c91f105bb90219228b155fda15b4f1ff9ce58f35_410x202.png\",\n        \"Screen_Shot_2015-04-17_at_7.27.28_PM_c91f105bb90219228b155fda15b4f1ff9ce58f35_410x202.png\",\n        \"410\",\n        \"202\",\n        \"#3d6467\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n[Dialogs](https://material.angularjs.org/latest/demo/dialog) are a component of Angular Material.\n\nThis repository gives you a layer of abstraction on top of Angular Material's dialog service.\nThe 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`.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"export class LandingController() {\\n\\tconstructor(DialogService){\\n    \\t'ngInject';\\n    \\n    \\tthis.DialogService = DialogService;\\n    \\tthis.confirmMessage = '';\\n  \\t}\\n\\n\\tsampleAlert(){\\n\\t\\tthis.DialogService.alert('This is an alert title', 'You can specify some description text in here.');\\n\\t}\\n\\n\\t sampleConfirm(){\\n\\t\\tthis.DialogService.confirm('This is a confirm title', 'Are you sure you want to do delete this file?').then(() => {\\n\\t\\t\\t\\tthis.confirmMessage = 'Success callback';\\n\\t\\t\\t}, () => {\\n\\t\\t\\t\\tthis.confirmMessage = 'Cancel callback';\\n\\t\\t\\t}\\n\\t\\t);\\n\\t}\\n\\n}\",\n      \"language\": \"javascript\",\n      \"name\": \"DialogService example\"\n    }\n  ]\n}\n[/block]\n# Custom Dialogs\n\nAnother useful feature is the ability to easily call custom dialogs using a folder by feature approach.\n\nLet's start by generating a custom dialog:\n\n```bash\nphp artisan ng:dialog login\n```\n\nThis will create a login folder in `angular/dialogs` with a sample controller and template.\nYou can then open this dialog easily using the following sample code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"(function() {\\n\\t\\\"use strict\\\";\\n\\n\\tangular.module('app.controllers').controller('LoginController', LoginController);\\n  \\n  function LoginController(DialogService) {\\n\\n    var vm = this;\\n    \\n    vm.customDialog = customDialog;\\n    \\n\\t\\tvar customDialog = function() {\\n\\t\\t\\tDialogService.fromTemplate('login');\\n\\t\\t};\\n    \\n\\t});\\n\\n})();\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"Custom Dialog\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"success\",\n  \"body\": \"This example works out of the box.\\nElixir, live-reload, DialogService & Artisan generators all work in harmony to achieve this.\"\n}\n[/block]","excerpt":"","slug":"dialogs","type":"basic","title":"Dialogs"}

Get Started

Tutorial

Angular Generators

Progressive Web App

REST API

JWT Auth

Testing

Extras

Dialogs

[block:image] { "images": [ { "image": [ "https://files.readme.io/AozZ7FIQ0WpClvBs37D2_Screen_Shot_2015-04-17_at_7.27.28_PM_c91f105bb90219228b155fda15b4f1ff9ce58f35_410x202.png", "Screen_Shot_2015-04-17_at_7.27.28_PM_c91f105bb90219228b155fda15b4f1ff9ce58f35_410x202.png", "410", "202", "#3d6467", "" ] } ] } [/block] [Dialogs](https://material.angularjs.org/latest/demo/dialog) 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`. [block:code] { "codes": [ { "code": "export class LandingController() {\n\tconstructor(DialogService){\n \t'ngInject';\n \n \tthis.DialogService = DialogService;\n \tthis.confirmMessage = '';\n \t}\n\n\tsampleAlert(){\n\t\tthis.DialogService.alert('This is an alert title', 'You can specify some description text in here.');\n\t}\n\n\t sampleConfirm(){\n\t\tthis.DialogService.confirm('This is a confirm title', 'Are you sure you want to do delete this file?').then(() => {\n\t\t\t\tthis.confirmMessage = 'Success callback';\n\t\t\t}, () => {\n\t\t\t\tthis.confirmMessage = 'Cancel callback';\n\t\t\t}\n\t\t);\n\t}\n\n}", "language": "javascript", "name": "DialogService example" } ] } [/block] # 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: [block:code] { "codes": [ { "code": "(function() {\n\t\"use strict\";\n\n\tangular.module('app.controllers').controller('LoginController', LoginController);\n \n function LoginController(DialogService) {\n\n var vm = this;\n \n vm.customDialog = customDialog;\n \n\t\tvar customDialog = function() {\n\t\t\tDialogService.fromTemplate('login');\n\t\t};\n \n\t});\n\n})();\n", "language": "javascript", "name": "Custom Dialog" } ] } [/block] [block:callout] { "type": "success", "body": "This example works out of the box.\nElixir, live-reload, DialogService & Artisan generators all work in harmony to achieve this." } [/block]