### Install npm Dependencies

Source: https://github.com/likeastore/ngdialog/blob/master/example/README.md

Install npm dependencies from the root folder before starting the server demo.

```bash
$ ngDialog_folder: npm install
```

--------------------------------

### Start Server Demo

Source: https://github.com/likeastore/ngdialog/blob/master/example/README.md

Navigate to the examples folder and start the Node.js server to check usage of external templates.

```bash
$ cd example
$ node server.js
>> IP: 172.29.63.33
>> Strata web server version 0.20.1
>> Listening on 0.0.0.0:1982, CTRL+C to stop
```

--------------------------------

### Running ngDialog Tests

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Steps to clone the repository, install dependencies, and run tests for ngDialog.

```bash
git clone git@github.com:likeastore/ngDialog.git
cd ngDialog
npm i
npm run test
```

--------------------------------

### Install ngDialog with npm

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Use this command to install ngDialog using the npm package manager.

```bash
npm install ng-dialog
```

--------------------------------

### Install ngDialog with Bower

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Use this command to install ngDialog using the Bower package manager.

```bash
bower install ng-dialog
```

--------------------------------

### Confirm Dialog Template Example

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

An HTML template for a confirm dialog, showing 'Cancel' and 'Confirm' buttons. The 'Confirm' button uses ng-click to call the confirm() method.

```html
<div class="dialog-contents">
    Some message
    <button ng-click="closeThisDialog()">Cancel</button>
    <button ng-click="confirm()">Confirm</button>
</div>
```

--------------------------------

### ngDialog Template with Data and Controls

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

An example of an ngDialog template. It displays passed data, allows closing the dialog with a button, and demonstrates how to use ngDialog's directive attributes for opening other dialogs.

```html
<div class="ngdialog-message">
 <h3>ngDialog template</h3>
 <p ng-show="theme">Test content for <code>{{theme}}</code></p>
 <p ng-show="ngDialogId">Dialog Id: <code>{{ngDialogId}}</code></p>
 <p class="data-passed-through" ng-show="ngDialogData.foo">Data passed through: <code>{{ngDialogData.foo}}</code></p>
 <p ng-show="dialogModel.message">Scope passed through: <code>{{dialogModel.message}}</code></p>
 <p>Close this dialog: <button class="inline close-this-dialog" ng-click="closeThisDialog()">Close</button></p>
 </div>
<div class="ngdialog-buttons">
 <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-dialog="secondDialogId" ng-dialog-class="ngdialog-theme-default" ng-dialog-controller="SecondModalCtrl" ng-dialog-close-previous>Close and open</button>
 <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="openSecond()">Open next</button>
</div>
```

--------------------------------

### ngDialog Template Example

Source: https://github.com/likeastore/ngdialog/blob/master/tests/build-systems/browserify/index.html

This HTML snippet represents a typical template used by ngDialog, including dynamic content and a close button.

```html
<div class="ngdialog-message"> 
  <h3>ngDialog template</h3> 
  <p ng-show="ngDialogId">Dialog Id: <code>{{ngDialogId}}</code></p> 
  <p>Close this dialog: <button class="inline close-this-dialog" ng-click="closeThisDialog()">Close</button></p> 
</div>
```

--------------------------------

### Open a Dialog in AngularJS Controller

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

This example shows how to inject the ngDialog service into an AngularJS controller and use it to open a modal dialog with a specified template and theme.

```javascript
var app = angular.module('exampleApp', ['ngDialog']);

app.controller('MainCtrl', function ($scope, ngDialog) {
    $scope.clickToOpen = function () {
        ngDialog.open({ template: 'popupTmpl.html', className: 'ngdialog-theme-default' });
    };
});
```

--------------------------------

### External Template Content

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Example of an external HTML template that can be used with ngDialog, displaying content from the parent scope.

```html
<script type="text/ng-template" id="externalTemplate.html">
<p>External scope: <code>{{value}}</code></p>
</script>
```

--------------------------------

### Open a Dialog from a Service

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog using `ngDialog.open` from a service. It includes an example of checking if the dialog is open after a delay.

```javascript
$scope.open = function() {
var new_dialog = ngDialog.open({
id: 'fromAService',
template: 'firstDialogId',
controller: 'InsideCtrl',
data: { foo: 'from a service' }
});
// example on checking whether created `new_dialog` is open
$timeout(function() {
console.log(ngDialog.isOpen(new_dialog.id));
}, 2000)
};
```

--------------------------------

### .open(options)

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a dialog window, creating a new dialog instance on each call. It accepts an options object as the only argument to configure the dialog.

```APIDOC
## .open(options)

### Description
Method allows to open dialog window, creates new dialog instance on each call. It accepts ``options`` object as the only argument.

### Parameters
#### Options:
- **template** (String) - Dialog template can be loaded through ``path`` to external html template or ``<script>`` tag with ``text/ng-template``.
- **plain** (Boolean) - If ``true`` allows to use plain string as template, default ``false``.
- **controller** (String | Array | Object) - Controller that will be used for the dialog window if necessary. The controller can be specified either by referring it by name or directly inline.
- **controllerAs** (String) - Optionally specify `controllerAs` parameter for your controller. Then inside your template it will be possible to refer this controller by the value specified by `controllerAs`.
- **resolve** (Object.<String, Function>) - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, ngDialog will wait for them all to be resolved or one to be rejected before the controller is instantiated.
- **scope** (Object) - Scope object that will be passed to the dialog. If you use a controller with separate ``$scope`` service this object will be passed to the ``$scope.$parent`` param.

### Request Example
```javascript
ngDialog.open({
    template: 'templateId'
});
```

```javascript
ngDialog.open({
    template: '<p>my template</p>',
    plain: true
});
```

```javascript
ngDialog.open({
    template: 'externalTemplate.html',
    controller: 'SomeController'
});
```

```javascript
ngDialog.open({
    controller: function Ctrl(dep) {/*...*/},
    resolve: {
        dep: function depFactory() {
            return 'dep value';
        }
    }
});
```

```javascript
$scope.value = true;

ngDialog.open({
    template: 'externalTemplate.html',
    className: 'ngdialog-theme-plain',
    scope: $scope
});
```
```

--------------------------------

### Configure UI-Router States and ngDialog

Source: https://github.com/likeastore/ngdialog/blob/master/example/browser-back-button/ui-router-1.0.0-rc.1.html

Sets up UI-Router states for 'home' and 'about', including a resolve for data. It also configures ngDialog to open a confirmation dialog with specific options like `closeByNavigation: true`.

```javascript
window.angular || document.write('<script src="../../bower_components/angular/angular.min.js">\x3C/script>')
angular.module('backButtonDemo', ['ngDialog', 'ui.router'])
.config(function($urlMatcherFactoryProvider, $stateProvider){
  $urlMatcherFactoryProvider.strictMode(false);
  $stateProvider.state('home', {
    url: '',
    templateUrl: 'home.html'
  })
  .state('about', {
    url: '/about',
    templateUrl: 'about.html',
    controller: 'mainController',
    resolve: {
      'RESOLVE_DATA' : function($q) {
        var defer = $q.defer();
        setTimeout(function() {
          defer.resolve('the data for this page resolves after 1ms');
        }, 1);
        return defer.promise;
      }
    }
  });
})
.run(function($rootScope) {
  $rootScope.$on('$locationChangeSuccess', function(){
    console.log('$locationChangeSuccess event fired');
  });
  $rootScope.$on('$stateChangeSuccess', function(){
    console.log('$stateChangeSuccess event fired');
  });
})
.controller('mainController', function($scope, RESOLVE_DATA, ngDialog, $state){
  $scope.text = RESOLVE_DATA;
  ngDialog.openConfirm({
    template: 'resolveDialog',
    className: 'ngdialog-theme-default',
    scope: $scope,
    closeByDocument: false,
    closeByEscape: false,
    showClose: false,
    closeByNavigation: true
  }).then(function(value) {
    return value;
  }, function(reason) {
    $state.go('home');
    return reason;
  });
});
```

--------------------------------

### Opening a Dialog with Controller and Resolve Dependencies

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a dialog, specifying a controller and a resolve object. The resolve object defines dependencies that will be injected into the controller after their promises are resolved.

```javascript
ngDialog.open({
    controller: function Ctrl(dep) {/*...*/},
    resolve: {
        dep: function depFactory() {
            return 'dep value';
        }
    }
});
```

--------------------------------

### Include ngDialog Files in Project

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Include these CSS and JavaScript files in your HTML to set up ngDialog with the default theme.

```html
<link rel="stylesheet" href="lib/ng-dialog/css/ngDialog.min.css">
<link rel="stylesheet" href="lib/ng-dialog/css/ngDialog-theme-default.min.css">
<script src="lib/ng-dialog/js/ngDialog.min.js"></script>
```

--------------------------------

### ngDialog.open() options

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Configuration options for opening a new dialog using the ngDialog.open() method.

```APIDOC
## ngDialog.open(options)

### Description
Opens a new dialog window with specified options.

### Parameters
#### Request Body
- **template** (String) - Required - The template to use for the dialog content.
- **data** (String | Object | Array) - Optional - Serializable data to be stored in the controller's dialog scope ($scope.ngDialogData).
- **className** (String) - Optional - CSS class to style the dialog. Overrides default classes.
- **appendClassName** (String) - Optional - CSS class to append to the dialog, in addition to any defaults.
- **disableAnimation** (Boolean) - Optional - If true, disables dialog animations. Defaults to false.
- **overlay** (Boolean) - Optional - If false, hides the overlay behind the modal. Defaults to true.
- **showClose** (Boolean) - Optional - If false, hides the close button. Defaults to true.
- **closeByEscape** (Boolean) - Optional - If true, allows closing the modal by pressing the Esc key. Defaults to true.
- **closeByNavigation** (Boolean) - Optional - If true, allows closing the modal on state change. Defaults to false.
- **closeByDocument** (Boolean) - Optional - If true, allows closing the modal by clicking on the overlay background. Defaults to true.
- **appendTo** (String) - Optional - Selector string for the element to append the dialog instance to. Defaults to 'body'.
- **cache** (Boolean) - Optional - If false, disables template caching. Defaults to true.
- **name** (String | Number) - Optional - A name for the dialog instance, useful for identification.
- **onOpenCallback** (String | Function) - Optional - A callback function or its name to be executed after the dialog is opened.

### Request Example
```javascript
ngDialog.open({
    template: 'templateId',
    className: 'ngdialog-theme-default',
    data: { message: 'Hello!' },
    closeByEscape: false
});
```
```

--------------------------------

### Opening a Dialog with a Default Theme

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Apply a default theme to the dialog by specifying the `className` option. Ensure the corresponding CSS file is included.

```javascript
ngDialog.open({
    template: 'templateId',
    className: 'ngdialog-theme-default'
});
```

--------------------------------

### Open Dialog with ControllerAs Syntax

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog using the 'controllerAs' syntax, where the controller is specified by name and aliased.

```javascript
$scope.openControllerAsController = function () {
  $rootScope.theme = 'ngdialog-theme-plain';
  ngDialog.open({
    template: 'controllerAsDialog',
    controller: 'InsideCtrlAs',
    controllerAs: 'ctrl',
    className: 'ngdialog-theme-plain'
  });
};
```

--------------------------------

### ngDialog Template with ControllerAs Syntax

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

A simple ngDialog template demonstrating the use of controllerAs syntax. It displays a value from the controller.

```html
<div class="ngdialog-message">
 <h3>ngDialog template</h3>
 <p>This template uses controllerAs syntax</p>
 <p>Value from controller {{ctrl.value}}</p>
 </div>
<div class="ngdialog-buttons">
 <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog()">Close</button>
</div>
```

--------------------------------

### Opening a Dialog with a Controller by Name

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a dialog and associates it with a controller defined elsewhere by its name.

```javascript
ngDialog.open({
    template: 'externalTemplate.html',
    controller: 'SomeController'
});
```

--------------------------------

### ngDialog Confirm Modal with Promise and Input

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Demonstrates opening a confirm modal using .openConfirm(). The returned promise resolves with the confirmed value or rejects if closed otherwise. It includes an input field to pass a value to the confirmation.

```html
<h3><a href="" ng-click="closeSecond()">Close all by click here!</a></h3>
<div class="ngdialog-message">
 <h3>ngDialog modal example</h3>
 <p>The <code>.openConfirm()</code> function returns a promise that is resolved when confirmed and rejected when otherwise closed. Modal dialogs by default do not close when clicked outside the dialog or when hitting escape. This can ofcourse be overridden when opening the dialog.</p>
 <p>Confirm can take a value. Enter one here for example and see the console output: <input ng-model="confirmValue" /></p>
</div>
<div class="ngdialog-buttons">
 <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(confirmValue)">Confirm</button>
 <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('button')">Cancel</button>
</div>
```

--------------------------------

### Main Controller with ngDialog Confirmation

Source: https://github.com/likeastore/ngdialog/blob/master/example/browser-back-button/index.html

The main controller fetches resolved data and opens a confirmation dialog using ngDialog. It configures the dialog to close by navigation and handles the dialog's promise, navigating back to 'home' if the dialog is dismissed.

```javascript
.controller('mainController', function($scope, RESOLVE_DATA, ngDialog, $state){
  $scope.text = RESOLVE_DATA;
  ngDialog.openConfirm({
    template: 'resolveDialog',
    className: 'ngdialog-theme-default',
    scope: $scope,
    closeByDocument: false,
    closeByEscape: false,
    showClose: false,
    closeByNavigation: true
  }).then(function(value) {
    return value;
  }, function(reason) {
    $state.go('home');
    return reason;
  });
});
```

--------------------------------

### Registering Templates with $templateCache

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Demonstrates how to manually put a template into Angular's $templateCache, allowing it to be used by ngDialog.

```javascript
angular.module('dialog.templates').run(['$templateCache', function($templateCache) {
    $templateCache.put('templateId', 'template content');
}]);
```

--------------------------------

### Pre-close callback with confirmation

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Use a preCloseCallback with a window.confirm to prompt the user before closing the dialog.

```javascript
ngDialog.open({
    preCloseCallback: function(value) {
        if (confirm('Are you sure you want to close without saving your changes?')) {
            return true;
        }
        return false;
    }
});
```

--------------------------------

### ngDialogProvider.setDefaults(options)

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Sets default configuration options for all dialogs opened with ngDialog.

```APIDOC
## ngDialogProvider.setDefaults(options)

### Description
Sets default options that will be applied to all dialogs opened via ngDialog.

### Parameters
#### Request Body
- **options** (Object) - An object containing default configuration options. These can include any of the options available for `ngDialog.open()`, such as `template`, `className`, `closeByEscape`, etc.

### Request Example
```javascript
ngDialogProvider.setDefaults({
    className: 'ngdialog-theme-default',
    closeByEscape: true
});
```
```

--------------------------------

### Opening a Dialog with a Plain String Template

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a dialog using a simple HTML string as the template content. Requires the 'plain' option to be set to true.

```javascript
ngDialog.open({
    template: '<p>my template</p>',
    plain: true
});
```

--------------------------------

### ngDialog.open()

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a new dialog window. It returns an object containing properties and methods to interact with the opened dialog.

```APIDOC
## ngDialog.open()

### Description
Opens a new dialog window. It returns an object containing properties and methods to interact with the opened dialog.

### Method
(Implicitly POST or similar, as it opens a new UI element)

### Endpoint
(Not applicable, this is an SDK method)

### Parameters
#### Options (passed as an object to the open method)
- **template** (string) - Required - The template to use for the dialog.
- **controller** (string or function) - Optional - Controller for the dialog.
- **className** (string) - Optional - CSS class to apply to the dialog.
- **scope** (object) - Optional - A scope to inherit from.
- **closeByEscape** (boolean) - Optional - Whether to close the dialog by pressing Escape.
- **closeByDocument** (boolean) - Optional - Whether to close the dialog by clicking the document.
- **showClose** (boolean) - Optional - Whether to show the close button.
- **plain** (boolean) - Optional - Whether to render the template as plain HTML.
- **data** (any) - Optional - Data to pass to the dialog's scope.

### Returns:
An object with the following properties:
- **id** (String) - The ID of the dialog's DOM element.
- **close** (Function) - A function to close the dialog, optionally accepting a value.
- **closePromise** (Promise) - A promise that resolves when the dialog is closed, with properties: `id`, `value`, `$dialog`, `remainingDialogs`.

### Request Example
```javascript
var dialog = ngDialog.open({
    template: 'templateId',
    scope: myScope,
    className: 'ngdialog-theme-default',
    closeByEscape: true,
    closeByDocument: true
});

dialog.closePromise.then(function (data) {
    console.log('Dialog closed with data:', data);
});
```
```

--------------------------------

### Open Confirm Dialog with Nested Confirm

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Demonstrates opening a confirm dialog that, upon closing, presents another confirm dialog. The outer dialog's resolution depends on the inner dialog's outcome.

```javascript
$scope.openConfirmWithPreCloseCallbackInlinedWithNestedConfirm = function () {
  ngDialog.openConfirm({
    template: 'dialogWithNestedConfirmDialogId',
    className: 'ngdialog-theme-default',
    preCloseCallback: function(value) {
      var nestedConfirmDialog = ngDialog.openConfirm({
        template: '<p>Are you sure you want to close the parent dialog?</p>' +
          '<div class="ngdialog-buttons">' +
          '<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">No' +
          '<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(1)">Yes' +
          '</button></div>',
        plain: true,
        className: 'ngdialog-theme-default'
      });
      return nestedConfirmDialog;
    },
    scope: $scope
  })
  .then(function(value){
    console.log('resolved:' + value);
  }, function(value){
    console.log('rejected:' + value);
  });
};
```

--------------------------------

### Open a Default Dialog

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog with a default theme applied using the `ngdialog-theme-default` class.

```javascript
$scope.openDefault = function () {
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-default'
});
};
```

--------------------------------

### Open Dialog with Inline Pre-Close Callback

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog with a pre-close callback function defined inline. The callback prompts the user for confirmation before closing.

```javascript
$scope.openDefaultWithPreCloseCallbackInlined = function () {
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-default',
preCloseCallback: function(value) {
if (confirm('Close it? (Value = ' + value + ')')) {
return true;
}
return false;
}
});
};
```

--------------------------------

### Opening a Dialog with an Inline Controller

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a dialog and defines its controller logic inline using an array notation, allowing for dependency injection.

```javascript
ngDialog.open({
    template: 'externalTemplate.html',
    controller: ['$scope', 'otherService', function($scope, otherService) {
        // controller logic
    }]
});
```

--------------------------------

### ngDialog.openConfirm()

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a dialog that requires explicit confirmation or cancellation. Returns a promise that resolves or rejects based on user action.

```APIDOC
## ngDialog.openConfirm(options)

### Description
Opens a dialog that, by default, does not close when the escape key is pressed or when clicking outside the dialog window. It returns a promise that is either resolved or rejected based on how the dialog is closed.

### Method
(Implicitly POST or similar, as it opens a new UI element)

### Endpoint
(Not applicable, this is an SDK method)

### Parameters
#### options (object)
- **template** (string) - Required - The template for the dialog.
- **controller** (string or function) - Optional - Controller for the dialog.
- **scope** (object) - Optional - A scope to inherit from.
- **confirm** (Function) - A function injected into the dialog's scope to resolve the promise.
- **closeThisDialog** (Function) - A function injected into the dialog's scope to reject the promise.
- Other options are the same as for ``.open()``.

### Returns:
An Angular promise object.
- **Resolved**: If `scope.confirm()` is called, the promise resolves with the value passed to `confirm()`.
- **Rejected**: If `scope.closeThisDialog()` is called, the promise is rejected with the value passed to `closeThisDialog()`.

### Request Example
```html
<div class="dialog-contents">
    Some message
    <button ng-click="closeThisDialog()">Cancel</button>
    <button ng-click="confirm()">Confirm</button>
</div>
```

```javascript
ngDialog.openConfirm({
    template: 'confirmTemplate.html',
    className: 'ngdialog-theme-default'
}).then(function (value) {
    console.log('Confirmed with:', value);
}, function (reason) {
    console.log('Cancelled with:', reason);
});
```
```

--------------------------------

### Main Controller for ngDialog Demo

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

The main controller for the ngDialog demo application. It injects ngDialog, $rootScope, and $timeout services to manage dialog instances and their states.

```javascript
app.controller('MainCtrl', function ($scope, $rootScope, ngDialog, $timeout) {
 $rootScope.jsonData = '{"foo": "bar"}';
 $rootScope.theme = 'ngdialog-theme-default';
 $scope.directivePreCloseCallback = function (value) {
 if(confirm('Close it? MainCtrl.Directive.')) {
 return true;
 }
 return false;
 };
});
```

--------------------------------

### Open Dialog with External Template (No Cache)

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog using an external HTML template, ensuring the template is not cached. A scope variable is passed to the dialog.

```javascript
$scope.openTemplateNoCache = function () {
  $scope.value = true;
  ngDialog.open({
    template: 'externalTemplate.html',
    className: 'ngdialog-theme-plain',
    scope: $scope,
    cache: false
  });
};
```

--------------------------------

### Open Dialog with JavaScript Specific Height

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog and sets its height to 400 pixels directly via JavaScript configuration.

```javascript
$scope.openWithJSSpecificHeight = function () {
  ngDialog.open({
    template: '<h2>This modal is using a custom height (400px)! See the inline style</h2>',
    className: 'ngdialog-theme-default',
    height: 400,
    plain: true
  });
};
```

--------------------------------

### Open Dialog and Handle Close Promise

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a dialog and logs a message when it is dismissed. The closePromise resolves with data about the closed dialog.

```javascript
var dialog = ngDialog.open({
    template: 'templateId'
});

dialog.closePromise.then(function (data) {
    console.log(data.id + ' has been dismissed.');
});
```

--------------------------------

### Set dialog height in pixels

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Set the dialog's height using a number, which will be appended with 'px'.

```javascript
ngDialog.open({
    template: 'template.html',
    height: 400
});
```

--------------------------------

### Set dialog width in pixels

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Set the dialog's width using a number, which will be appended with 'px'.

```javascript
ngDialog.open({
    template: 'template.html',
    width: 400
});
```

--------------------------------

### ngDialog.setDefaults()

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Sets default configuration options for all dialogs opened via ngDialog.

```APIDOC
## ngDialog.setDefaults(options)

### Description
Allows setting default configuration options that will be applied to all dialogs unless overridden in the `open()` method.

### Method
Configuration method, typically used within an Angular module's `.config()` block.

### Endpoint
(Not applicable, this is an SDK configuration method)

### Parameters
#### options (object)
- **className** (string) - Default CSS class for dialogs.
- **plain** (boolean) - Whether to render templates as plain HTML.
- **showClose** (boolean) - Whether to display the close button by default.
- **closeByDocument** (boolean) - Whether to close dialogs by clicking outside them by default.
- **closeByEscape** (boolean) - Whether to close dialogs by pressing the Escape key by default.

### Request Example
```javascript
var app = angular.module('myApp', ['ngDialog']);
app.config(['ngDialogProvider', function (ngDialogProvider) {
    ngDialogProvider.setDefaults({
        className: 'ngdialog-theme-default',
        plain: true,
        showClose: true,
        closeByDocument: true,
        closeByEscape: true
    });
}]);
```
```

--------------------------------

### AngularJS Module Configuration and Routing

Source: https://github.com/likeastore/ngdialog/blob/master/example/browser-back-button/index.html

Configures the AngularJS module with ngDialog and ui-router, defining states for 'home' and 'about' pages. The 'about' state includes a resolve function to simulate data loading.

```javascript
window.angular || document.write('<script src="../../bower_components/angular/angular.min.js">\x3C/script>')
angular.module('backButtonDemo', ['ngDialog', 'ui.router'])
.config(function($urlMatcherFactoryProvider, $stateProvider){
  $urlMatcherFactoryProvider.strictMode(false);
  $stateProvider.state('home', {
    url: '',
    templateUrl: 'home.html'
  })
  .state('about', {
    url: '/about',
    templateUrl: 'about.html',
    controller: 'mainController',
    resolve: {
      'RESOLVE_DATA' : function($q) {
        var defer = $q.defer();
        setTimeout(function() {
          defer.resolve('the data for this page resolves after 1ms');
        }, 1);
        return defer.promise;
      }
    }
  });
})
```

--------------------------------

### Open Plain Dialog

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a simple dialog with a 'ngdialog-theme-plain' class. The dialog is not closed by clicking the document.

```javascript
$scope.openPlain = function () {
  $rootScope.theme = 'ngdialog-theme-plain';
  ngDialog.open({
    template: 'firstDialogId',
    controller: 'InsideCtrl',
    className: 'ngdialog-theme-plain',
    closeByDocument: false
  });
};
```

--------------------------------

### Open Dialog with External Template

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog using an external HTML template file. A scope variable is passed to the dialog.

```javascript
$scope.openTemplate = function () {
  $scope.value = true;
  ngDialog.open({
    template: 'externalTemplate.html',
    className: 'ngdialog-theme-plain',
    scope: $scope
  });
};
```

--------------------------------

### Setting Default Dialog Theme

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Configure default dialog options, including the theme, using `ngDialogProvider.setDefaults()`. This sets a base class for all dialogs.

```javascript
ngDialogProvider.setDefaults({
    className: 'ngdialog-theme-default'
});
```

--------------------------------

### Open Dialog with JavaScript Specific Width

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog and sets its width to 650 pixels directly via JavaScript configuration.

```javascript
$scope.openWithJSSpecificWidth = function () {
  ngDialog.open({
    template: '<h2>Notice that style inline set specific width!</h2>',
    className: 'ngdialog-theme-default',
    width: 650,
    plain: true
  });
};
```

--------------------------------

### Open Dialog with Inline Controller

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog using an inline controller function. The controller manages a counter and cleans up a timeout on destroy.

```javascript
$scope.openInlineController = function () {
  $rootScope.theme = 'ngdialog-theme-plain';
  ngDialog.open({
    template: 'withInlineController',
    controller: ['$scope', '$timeout', function ($scope, $timeout) {
      var counter = 0;
      var timeout;
      function count() {
        $scope.exampleExternalData = 'Counter ' + (counter++);
        timeout = $timeout(count, 450);
      }
      count();
      $scope.$on('$destroy', function () {
        $timeout.cancel(timeout);
      });
    }],
    className: 'ngdialog-theme-plain'
  });
};
```

--------------------------------

### AngularJS Module and Controller for ngDialog Padding

Source: https://github.com/likeastore/ngdialog/blob/master/example/paddingTest.html

Sets up an AngularJS module and controller to manage ngDialog instances and respond to padding changes. It configures ngDialog defaults and listens for the 'ngDialog.setPadding' event to update a fixed header's padding.

```javascript
window.angular || document.write('<script src="../bower_components/angular/angular.min.js">\x3C/script>')

var app = angular.module('testPadding', ['ngDialog']);

app.config(['ngDialogProvider', function (ngDialogProvider) {
  ngDialogProvider.setDefaults({
    className: 'ngdialog-theme-default',
  });
}]);

app.controller('MainCtrl', function ($scope, $rootScope, ngDialog, $timeout) {
  $scope.open = function () {
    ngDialog.open({
      template: 'firstDialogId'
    });
  };

  $rootScope.$on('ngDialog.setPadding', function (event, padding) {
    angular.element( document.querySelector('.paddingHeader') ).css('padding-right', padding + 'px');
  });
});
```

--------------------------------

### Opening a Dialog with a Template ID

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a dialog window using a template defined in a script tag, referenced by its ID.

```javascript
ngDialog.open({ template: 'templateId' });
```

--------------------------------

### Open Confirm Dialog with Pre-Close Callback on Scope

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a confirmation dialog using `ngDialog.openConfirm` and specifies a pre-close callback function defined on the scope. The promise handles resolution and rejection.

```javascript
$scope.openConfirmWithPreCloseCallbackOnScope = function () {
ngDialog.openConfirm({
template: 'modalDialogId',
className: 'ngdialog-theme-default',
preCloseCallback: 'preCloseCallbackOnScope',
scope: $scope
}).then(function (value) {
console.log('Modal promise resolved. Value: ', value);
}, function (reason) {
console.log('Modal promise rejected. Reason: ', reason);
});
};
```

--------------------------------

### Set dialog height in percentage

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Set the dialog's height using a string representing a percentage.

```javascript
ngDialog.open({
    template: 'template.html',
    height: '40%'
});
```

--------------------------------

### Pre-close callback with nested dialog

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Use a preCloseCallback that opens a nested confirm dialog. The promise from the nested dialog is returned to control the parent dialog's closure.

```javascript
ngDialog.open({
    preCloseCallback: function(value) {
        var nestedConfirmDialog = ngDialog.openConfirm({
            template:'\
                <p>Are you sure you want to close the parent dialog?</p>\
                <div class="ngdialog-buttons">\
                    <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">No</button>\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm(1)">Yes</button>\
                </div>',
            plain: true
        });

        // NOTE: return the promise from openConfirm
        return nestedConfirmDialog;
    }
});
```

--------------------------------

### Open Confirm Dialog

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a confirmation dialog using `ngDialog.openConfirm`. This method returns a promise that resolves with the dialog's value or rejects if closed without a value.

```javascript
$scope.openConfirm = function () {
ngDialog.openConfirm({
template: 'modalDialogId',
className: 'ngdialog-theme-default'
}).then(function (value) {
console.log('Modal promise resolved. Value: ', value);
}, function (reason) {
console.log('Modal promise rejected. Reason: ', reason);
});
};
```

--------------------------------

### Set dialog width in percentage

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Set the dialog's width using a string representing a percentage.

```javascript
ngDialog.open({
    template: 'template.html',
    width: '40%'
});
```

--------------------------------

### Open a Default Dialog Without Animation

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog with the default theme but disables the opening animation using `disableAnimation: true`.

```javascript
$scope.openDefaultWithoutAnimation = function () {
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-default',
disableAnimation: true
});
};
```

--------------------------------

### InsideCtrl: Open Second Dialog

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Controller for a dialog that provides a function to open another dialog. This second dialog has a close button and a controller to handle closing.

```javascript
app.controller('InsideCtrl', function ($scope, ngDialog) {
  $scope.dialogModel = { message : 'message from passed scope' };
  $scope.openSecond = function () {
    ngDialog.open({
      template: '<h3><a href="" ng-click="closeSecond()">Close all by click here!</a></h3>',
      plain: true,
      closeByEscape: false,
      controller: 'SecondModalCtrl'
    });
  };
});
```

--------------------------------

### InsideCtrlAs Controller

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

A simple controller using the 'controllerAs' syntax, exposing a 'value' property.

```javascript
app.controller('InsideCtrlAs', function () {
  this.value = 'value from controller';
});
```

--------------------------------

### Include ngDialog via CDN

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Use these URLs to include the ngDialog CSS and JavaScript files from cdnjs. Ensure you are using the correct version.

```html
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog.min.css
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-default.min.css
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/css/ngDialog-theme-plain.min.css
//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.4.0/js/ngDialog.min.js
```

--------------------------------

### Open Timed Dialog

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog that automatically closes after 2 seconds. It's configured not to close by document click or escape key.

```javascript
$scope.openTimed = function () {
  var dialog = ngDialog.open({
    template: '<p>Just passing through!</p>',
    plain: true,
    closeByDocument: false,
    closeByEscape: false
  });
  setTimeout(function () {
    dialog.close();
  }, 2000);
};
```

--------------------------------

### Opening a Dialog with a Custom Scope

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Opens a dialog and passes a custom scope object to it. This scope will be available as the parent scope for the dialog's internal scope.

```javascript
$scope.value = true;

ngDialog.open({
    template: 'externalTemplate.html',
    className: 'ngdialog-theme-plain',
    scope: $scope
});
```

--------------------------------

### Open Plain Dialog with Custom Width

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog with a 'ngdialog-theme-plain custom-width' class, allowing for custom width styling. The dialog is not closed by clicking the document.

```javascript
$scope.openPlainCustomWidth = function () {
  $rootScope.theme = 'ngdialog-theme-plain custom-width';
  ngDialog.open({
    template: 'firstDialogId',
    controller: 'InsideCtrl',
    className: 'ngdialog-theme-plain custom-width',
    closeByDocument: false
  });
};
```

--------------------------------

### Set Default ngDialog Options

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Configure default settings for all ngDialog instances using the setDefaults method. This is useful for applying consistent styling and behavior across your application's modals.

```javascript
app.config(['ngDialogProvider', function (ngDialogProvider) {
 ngDialogProvider.setDefaults({
 className: 'ngdialog-theme-default',
 plain: false,
 showClose: true,
 closeByDocument: true,
 closeByEscape: true,
 appendTo: false,
 preCloseCallback: function () {
 console.log('default pre-close callback');
 }
 });
}]);
```

--------------------------------

### Include Angular.js if not present

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

A conditional script include for Angular.js. This ensures Angular is available before the rest of the application code runs.

```javascript
window.angular || document.write('<script src="../bower_components/angular/angular.min.js">\x3C/script>')
var app = angular.module('exampleDialog', ['ngDialog']);
```

--------------------------------

### Open Notify Dialog

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog with a close button and custom content. It logs a message to the console when closed, indicating if it was closed by the button.

```javascript
$scope.openNotify = function () {
  var dialog = ngDialog.open({
    template: '<p>You can do whatever you want when I close, however that happens.</p>' +
      '<div class="ngdialog-buttons"><button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog(1)">Close Me</button></div>',
    plain: true
  });
  dialog.closePromise.then(function (data) {
    console.log('ngDialog closed' + (data.value === 1 ? ' using the button' : '') + ' and notified by promise: ' + data.id);
  });
};
```

--------------------------------

### ngDialog.isOpen(id)

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Checks if a dialog with the specified ID is currently open.

```APIDOC
## ngDialog.isOpen(id)

### Description
Checks if a dialog with the given ID is currently open on the page.

### Method
Utility method.

### Endpoint
(Not applicable, this is an SDK method)

### Parameters
#### id (String)
- **id** - The ID of the dialog to check.

### Returns:
- **Boolean** - `true` if the dialog is open, `false` otherwise.
```

--------------------------------

### ngDialog.getOpenDialogs()

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Retrieves an array containing the IDs of all currently open dialogs.

```APIDOC
## ngDialog.getOpenDialogs()

### Description
Returns an array containing the IDs of all dialogs that are currently open.

### Method
Utility method.

### Endpoint
(Not applicable, this is an SDK method)

### Returns:
- **Array** - An array of strings, where each string is the ID of an open dialog.
```

--------------------------------

### Open Dialog Without Overlay

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Opens a dialog with its overlay disabled, meaning the background will not be dimmed.

```javascript
$scope.openWithoutOverlay = function () {
  ngDialog.open({
    template: '<h2>Notice that there is no overlay!</h2>',
    className: 'ngdialog-theme-default',
    plain: true,
    overlay: false
  });
};
```

--------------------------------

### ngDialog Template for Confirm Modal

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

A template for a confirmation dialog. It includes 'Cancel' and 'Save' buttons, allowing the user to confirm or cancel an action. The 'Save' button can pass a value back to the calling scope.

```html
<div class="ngdialog-message">
 <h3>ngDialog template</h3>
 <p>Dialog containing work in which a user has to perform a task (e.g. editing data).</p>
 <p>'Save' would save the task's actions, while 'Cancel' would cause the task's actions to be lost.</p>
 <p>...other controls here...</p>
 </div>
<div class="ngdialog-buttons">
 <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog('Cancel')">Cancel</button>
 <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="confirm('Save')">Save</button>
</div>
```

--------------------------------

### Using ngDialog Directive to Open Modals

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

This HTML snippet demonstrates how to use the ngDialog directive as an attribute on a button to open a modal dialog. It shows how to specify the template, theme, controller, and close previous dialogs.

```html
<button type="button"
    ng-dialog="templateId.html"
    ng-dialog-class="ngdialog-theme-flat"
    ng-dialog-controller="ModalCtrl"
    ng-dialog-close-previous>
    Open modal text
</button>
```

--------------------------------

### AngularJS Run Block for Location and State Change Events

Source: https://github.com/likeastore/ngdialog/blob/master/example/browser-back-button/index.html

Listens for '$locationChangeSuccess' and '$stateChangeSuccess' events on the root scope. These events are logged to the console when the application's location or state changes.

```javascript
$rootScope.$on('$locationChangeSuccess', function(){
  console.log('$locationChangeSuccess event fired');
});
$rootScope.$on('$stateChangeSuccess', function(){
  console.log('$stateChangeSuccess event fired');
});
```

--------------------------------

### Using a Script Tag as a Template

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Defines an HTML template within a script tag with type 'text/ng-template' and an ID, which can then be referenced by ngDialog.

```html
<script type="text/ng-template" id="templateId">
    <h1>Template heading</h1>
    <p>Content goes here</p>
</script>
```

--------------------------------

### CSS for Fixed Header and Dialog

Source: https://github.com/likeastore/ngdialog/blob/master/example/paddingTest.html

Defines styles for a fixed header and the ngDialog theme. The fixed header is positioned to the top-right and has its width set.

```css
body { height: 4000px; } 
.paddingHeader { position: fixed; right: 0; top: 0; width: 100px; text-align: right; }
```

--------------------------------

### Configure ngDialog to Open One Dialog Per Name

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Use this configuration in your Angular module's config block to prevent multiple dialogs with the same name from opening simultaneously. Ensure a 'name' is provided when opening dialogs.

```javascript
var app = angular.module('exampleApp', ['ngDialog']);

app.config(function (ngDialogProvider) {
    ngDialogProvider.setOpenOnePerName(true);
});
```

--------------------------------

### ngDialog Event Listeners

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

Listens for various ngDialog events like 'opened', 'closed', 'closing', 'templateLoading', and 'templateLoaded', logging information about the dialog or template to the console.

```javascript
$rootScope.$on('ngDialog.opened', function (e, $dialog) {
  console.log('ngDialog opened: ' + $dialog.attr('id'));
});
$rootScope.$on('ngDialog.closed', function (e, $dialog) {
  console.log('ngDialog closed: ' + $dialog.attr('id'));
});
$rootScope.$on('ngDialog.closing', function (e, $dialog) {
  console.log('ngDialog closing: ' + $dialog.attr('id'));
});
$rootScope.$on('ngDialog.templateLoading', function (e, template) {
  console.log('ngDialog template is loading: ' + template);
});
$rootScope.$on('ngDialog.templateLoaded', function (e, template) {
  console.log('ngDialog template loaded: ' + template);
});
```

--------------------------------

### ngDialogProvider.setForceHtmlReload(boolean)

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Configures whether to reload dialog HTML on location changes.

```APIDOC
## ngDialogProvider.setForceHtmlReload(boolean)

### Description
Configures the module to add an additional listener on every `$locationChangeSuccess` event. This forces an update of the dialog's HTML, which can be useful in rare cases dependent on DOM changes.

### Method
Configuration method, used via the provider instance in an Angular module's `.config()` block.

### Endpoint
(Not applicable, this is an SDK configuration method)

### Parameters
#### boolean (Boolean)
- **value** - `true` to enable forced HTML reload on location change, `false` to disable (default).

### Request Example
```javascript
var app = angular.module('exampleApp', ['ngDialog']);

app.config(function (ngDialogProvider) {
    ngDialogProvider.setForceHtmlReload(true);
});
```
```

--------------------------------

### scope.closeThisDialog(value)

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Closes the current dialog. Any value passed to this function will be attached to the object which resolves on the close promise for this dialog. For dialogs opened with the openConfirm() method, the value is used as the reject reason.

```APIDOC
## scope.closeThisDialog(value)

### Description
Closes the current dialog and optionally passes a value.

### Parameters
#### Path Parameters
- **value** (String | Object | Array) - Optional - The value to be attached to the resolved promise.

### Usage Example
```html
<div class="dialog-contents">
    <input type="text"/>
    <input type="button" value="OK" ng-click="checkInput() && closeThisDialog('Some value')"/>
</div>
```
```

--------------------------------

### ngDialog Template with External Data

Source: https://github.com/likeastore/ngdialog/blob/master/example/index.html

This template displays data fetched from an external source. It includes a close button to dismiss the dialog.

```html
<div class="ngdialog-message">
 <h3>ngDialog template</h3>
 <p ng-show="theme">Test content for <code>{{theme}}</code></p>
 <p ng-show="exampleExternalData">Example data from external service: <code>{{exampleExternalData}}</code></p>
 </div>
<div class="ngdialog-buttons">
 <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog()">Close</button>
</div>
```

--------------------------------

### Listen for ngDialog Opened Event

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Register a listener on the root scope to detect when a dialog has been opened. The event provides the dialog element as an argument.

```javascript
$rootScope.$on('ngDialog.opened', function (e, $dialog) {
    console.log('ngDialog opened: ' + $dialog.attr('id'));
});
```

--------------------------------

### ngDialogProvider.setForceBodyReload(boolean)

Source: https://github.com/likeastore/ngdialog/blob/master/README.md

Configures whether to reload dialog body on location changes.

```APIDOC
## ngDialogProvider.setForceBodyReload(boolean)

### Description
Configures the module to add an additional listener on every `$locationChangeSuccess` event. This forces an update of the dialog's body content, which can be useful in rare cases dependent on DOM changes.

### Method
Configuration method, used via the provider instance in an Angular module's `.config()` block.

### Endpoint
(Not applicable, this is an SDK configuration method)

### Parameters
#### boolean (Boolean)
- **value** - `true` to enable forced body reload on location change, `false` to disable (default).

### Request Example
```javascript
var app = angular.module('exampleApp', ['ngDialog']);

app.config(function (ngDialogProvider) {
    ngDialogProvider.setForceBodyReload(true);
});
```
```