Angular Core Dependency: ~1.2.0
Module License: MIT
Added by: Sam Deering
This project is an application skeleton/demo for a typical usage of windowsPopup AngularJS Module .
To download the latest stable Development Environment (v0.0.5) click here
#####New in v0.0.6 :
wnp-right-click, those can be used to control which mouse click will open the Popup and Modal windows. (To open a separate browser window by the
wnp-popupdirective, the default is normal left mouse click. Add
wnp-dbl-clickto open it by double click. To open a Modal window by the
wnp-popdirective, the default is the mouse right click. The default can overwritten by the added new attributes, those are :
wnp-right-click. Note: Because of the popup blockers on most browsers, new browser window can not be opened by the right mouse click.)
#####New in v0.0.5 :
wnp-popdirective (add a "Modal usega Help" modal window).
#####New in v0.0.4 :
wnp-popupdirective. Those are
wnp-on-close. Now it is possible to add two callback functions, the function specified in
wnp-on-openwill be called when your window is opened, and the function in
wnp-on-closewill be called when your window is closed. Usage : ...
wnp-on-open="yourOnOpenFnc(wnpName)" ... wnp-on-close="yourOnCloseFnc(wnpName)". Note : you need to use
wnpNameso the Window name will be passed in to your callback. The spelling is important for
wnpNamebut the function name can be your choise.
wnp-pop. Sometimes you do not want to open a new browser window, just a simple Modal window would do. The
wnp-popdirective is similar to
wnp-popup, but it opens a Modal window not a new browser window. The good thing is that you can use the same html partial, whatever is in the url attribute will be used. The
wnp-popis using a new attribute, that is
wnp-pop-name, to use pre-defined Modal windows. The main difference is that the
wnp-popdirective open the Modal window by the right mouse click. This way, this new directive could also be used to open a context menu for you application. ( TODO: After this we will add a directive to open a drop down menu by right click, we plan to call it
wnp-pop-down.) So you will have the option to have a simple drop down or you you can have a Modal window for more complex context menu, depending of your needs.
#####New in v0.0.3 :
wnp-title) to the Child window, or if that is not specified pass the text of the link the user clicked.
#####New in v0.0.2 :
autoUpdate. This value can be specified in the default level, and the Pre-defined window level, or can be passed as an attribute
wnp-popupdirective. If the
true(that was always true in v0.0.1), parent window will be automatically updated as data is typed on the Child. If that value is
false, the parent won't be automatically updated. A new directive was created (
wnp-update-parent), which must be placed to a buttom or link, which clicked, the parent window is updated at that time.
angular-routeto the Demo application for the popup windows loading. Now
windowsPopup.htmlis used as template, and based on the #/value on the URL, different partial HTMLs can be loaded inside
To get you started you can simply clone the windowsPopup-dev repository and install the dependencies:
You need git to clone the angular-seed repository. You can get git from http://git-scm.com/.
We also use a number of node.js tools to initialize and test angular-seed. You must have node.js and its package manager (npm) installed. You can get them from http://nodejs.org/.
Clone the windowsPopup-dev repository using [git][git]:
git clone https://github.com/ervinn/windowsPopup-dev cd windowsPopup-dev
We have two kinds of dependencies in this project: tools and angular framework code. The tools help us manage and test the application.
npm, the [node package manager][npm].
bower, a [client-side code package manager][bower].
We have preconfigured
npm to automatically run
bower so we can simply do:
Behind the scenes this will also call
bower install. You should find that you have two new
folders in your project.
node_modules- contains the npm packages for the tools we need
app/bower_components- contains the angular framework files
We have preconfigured the project with a simple development web server. The simplest way to start this server is:
Now browse to the app at
This DEMO app comes preconfigured with unit tests. These are written in [Jasmine][jasmine], which we run with the [Karma Test Runner][karma]. We provide a Karma configuration file to run them.
The easiest way to run the unit tests is to use the supplied npm script:
This script will start the Karma test runner to execute the unit tests. Moreover, Karma will sit and watch the source and test files for changes and then re-run the tests whenever any of them change. This is the recommended strategy; if your unit tests are being run every time you save a file then you receive instant feedback on any changes that break the expected code functionality.
You can also ask Karma to do a single run of the tests and then exit. This is useful if you want to check that a particular version of the code is operating as expected. The project contains a predefined script to do this:
npm run test-single-run
This DEMO app comes with end-to-end tests, again written in [Jasmine][jasmine]. These tests are run with the Protractor End-to-End test runner. It uses native events and has special features for Angular applications.
Protractor simulates interaction with our web app and verifies that the application responds correctly. Therefore, our web server needs to be serving up the application, so that Protractor can interact with it.
In addition, since Protractor is built upon WebDriver we need to install this. The angular-seed project comes with a predefined script to do this:
npm run update-webdriver
This will download and install the latest version of the stand-alone WebDriver tool.
Once you have ensured that the development web server hosting our application is up and running and WebDriver is updated, you can run the end-to-end tests using the supplied npm script:
npm run protractor
This script will execute the end-to-end tests against the application being hosted on the development server.
Module stats last updated: 2015-06-04 23:18:55