angular-windows
Angular-windows is a simple angular module which enables users to easily create custom windows on a web page. The advantage of this module is that it doesn't use JQuery and it is easy to integrate into Angular application.
Installation
Bower
bower install angular-windows --save
Manual
Copy content of 'dist' directory into your project.
Usage
Import module into your application:
var app = angular.module('MyApp', ['ngWindow']);Define markup of your window inside of HTML page. It is best to define window template directly inside of the body element. Window template is defined by 'ng-window' directive, which must have a unique ID.
<body>
... Your HTML ...
<ng-window id="myWindow">
... Content of the window ...
</ng-window>
</body>This will only define a window template, but it won't create a window. To create new window you must inject 'ngWindowService' service into your controller.
app.controller('MyCtrl', function ($scope, ngWindowService) {
...
});ngWindowService functions
ngWindowService.open(windowId, currentScope, data, options)
It will create a new window and render it on an HTML page.
windowId - Id of ng-window tag, which holds window template
currentScope - $scope object of the current controller
data - Data which can be accessed from created window. This is useful when data from window need to be passed to the controller. All properties of this object can be used directly inside of the window. For example, if res variable is defined in the scope of the controller like this:
$scope.res = 0;and if this parameter is passed as:
{
f: function () { $scope.res += parseInt(this.i) },
i: 10
}then f and i can be used inside of window HTML, for example like this:
<ng-window id="myWindow">
<input type="text" ng-model="i"></input>
<button ng-click="f()">Button</button>
</ng-window>Now, whenever the button is clicked then it will invoke the f function and increment res variable from the controller's scope by value of i. Also, there is one built-in function "close", which will close the window when invoked.
options - This object contains parameters of the new window. Possible parameters and values:
- x, y - Initial position of new window in pixels. If omitted, then the window will be centered on screen.
- width, height - Width and height of new window.
- title - Window title.
- xbutton - Boolean, whether window should contain x button.
- position - fixed or absolute. Fixed window will not be scrolled with page content.
- movable - Whether window should be movable or not.
The function will return the window handle object which is used to close the window later.
(For more information see demo)
ngWindowService.close(windowHandle)
It will close window whose handle is passed.
Design
Window design can be changed by modifying CSS classes:
- .ng-window-frame - defines style of frame
- .ng-window-header - defines style of the header
- .ng-window-header-title - defines style of area of header where title is shown
- .ng-window-header-controls - defines style of area where close button is
- .ng-window-x-button - defines style of close button
- .ng-window-x-picture - defines image of close button (here the path of the image must be set)
Demo
To run demo first install dependencies:
$ npm install
$ bower installAnd then open 'demo/index.html' page in your browser.
