-# [ngBoilerplate](http://joshdmiller.github.com/ng-boilerplate) [](https://travis-ci.org/joshdmiller/ng-boilerplate)
-
-An opinionated kickstarter for [AngularJS](http://angularjs.org) projects.
-
-***
-
-## Quick Start
-
-Install Node.js and then:
-
-```sh
-$ git clone git://github.com/joshdmiller/ng-boilerplate
-$ cd ng-boilerplate
-$ sudo npm -g install grunt-cli karma bower
-$ npm install
-$ bower install
-$ grunt watch
-```
-
-Finally, open `file:///path/to/ng-boilerplate/build/index.html` in your browser.
-
-Happy hacking!
-
-## Purpose
-
-`ngBoilerplate` is designed to make life easy by providing a basic framework
-with which to kickstart AngularJS projects. It contains a best-practice
-directory structure to ensure code reusability and maximum scalability.
-ngBoilerplate also comes prepackaged with the most popular design frameworks
-around: [Twitter Bootstrap](http://getbootstrap.com),
-[Angular UI](http://angular-ui.github.io),
-[Angular Bootstrap](http://angular-ui.github.io/bootstrap),
-[Font Awesome](http://fortawesome.github.com/Font-Awesome), and
-[LESS](http://lesscss.org). Lastly, it contains a sophisticated
-[Grunt](http://gruntjs.org)-based build system to ensure maximum productivity.
-All you have to do is clone it and start coding!
-
-## Philosophy
-
-The principal goal of `ngBoilerplate` is to set projects up for long-term
-success. So `ngBoilerplate` tries to follow best practices everywhere it can.
-These are:
-
-- Properly orchestrated modules to encourage drag-and-drop component re-use.
-- Tests exist alongside the component they are testing with no separate `test`
- directory required; the build process should be sophisticated enough to handle
- this.
-- Speaking of which, the build system should work automagically, without
- involvement from the developer. It should do what needs to be done, while
- staying out of the way. Components should end up tested, linted, compiled,
- and minified, ready for use in a production environment.
-- Integration with popular tools like Bower, Karma, and LESS.
-- *Encourages* test-driven development. It's the only way to code.
-- A directory structure that is cogent, meaningful to new team members, and
- supporting of the above points.
-- Well-documented, to show new developers *why* things are set up the way they
- are.
-- It should be responsive to evidence. Community feedback is therefore crucial
- to the success of `ngBoilerplate`.
-
-But `ngBoilerplate` is not an example of an AngularJS app: this is a
-kickstarter. If you're looking for an example of what a complete, non-trivial
-AngularJS app that does something real looks like, complete with a REST backend
-and authentication and authorization, then take a look at
-[`angular-app`](http://github.com/angular-app/angular-app), which does just
-that - and does it well.
-
-## Learn
-
-### Overall Directory Structure
-
-At a high level, the structure looks roughly like this:
-
-```
-ng-boilerplate/
- |- grunt-tasks/
- |- karma/
- |- src/
- | |- app/
- | | |- <app logic>
- | |- assets/
- | | |- <static files>
- | |- common/
- | | |- <reusable code>
- | |- less/
- | | |- main.less
- |- vendor/
- | |- angular-bootstrap/
- | |- bootstrap/
- | |- placeholders/
- |- .bowerrc
- |- bower.json
- |- build.config.js
- |- Gruntfile.js
- |- module.prefix
- |- module.suffix
- |- package.json
-```
-
-What follows is a brief description of each entry, but most directories contain
-their own `README.md` file with additional documentation, so browse around to
-learn more.
-
-- `karma/` - test configuration.
-- `src/` - our application sources. [Read more »](src/README.md)
-- `vendor/` - third-party libraries. [Bower](http://bower.io) will install
- packages here. Anything added to this directory will need to be manually added
- to `build.config.js` and `karma/karma-unit.js` to be picked up by the build
- system.
-- `.bowerrc` - the Bower configuration file. This tells Bower to install
- components into the `vendor/` directory.
-- `bower.json` - this is our project configuration for Bower and it contains the
- list of Bower dependencies we need.
-- `build.config.js` - our customizable build settings; see "The Build System"
- below.
-- `Gruntfile.js` - our build script; see "The Build System" below.
-- `module.prefix` and `module.suffix` - our compiled application script is
- wrapped in these, which by default are used to place the application inside a
- self-executing anonymous function to ensure no clashes with other libraries.
-- `package.json` - metadata about the app, used by NPM and our build script. Our
- NPM dependencies are listed here.
-
-### Detailed Installation
-
-This section provides a little more detailed understanding of what goes into
-getting `ngBoilerplate` up and running. Though `ngBoilerplate` is really simple
-to use, it might help to have an understanding of the tools involved here, like
-Node.js and Grunt and Bower. If you're completely new to highly organized,
-modern JavaScript development, take a few short minutes to read [this overview
-of the tools](tools.md) before continuing with this section.
-
-Okay, ready to go? Here it is:
-
-`ngBoilerplate` uses [Grunt](http://gruntjs.org) as its build system, so
-[Node.js](http://nodejs.org) is required. Also, Grunt by default no longer comes
-with a command-line utility and Karma and Bower must end up in your global path
-for the build system to find it, so they must be installed independently. Once
-you have Node.js installed, you can simply use `npm` to make it all happen:
-
-```sh
-$ npm -g install grunt-cli karma bower
-```
-
-If you're on Linux (like I am) then throw `sudo` in front of that command. If
-you're on Windows, then you're on your own.
-
-Next, you can either clone this repository using Git, download it as a zip file
-from GitHub, or merge the branch into your existing repository. Assuming you're
-starting from scratch, simply clone this repository using git:
-
-```sh
-$ git clone git://github.com/joshdmiller/ng-boilerplate my-project-name
-$ cd my-project-name
-```
-
-And then install the remaining build dependencies locally:
-
-```sh
-$ npm install
-```
-
-This will read the `dependencies` (empty by default) and the `devDependencies`
-(which contains our build requirements) from `package.json` and install
-everything needed into a folder called `node_modules/`.
-
-There are many Bower packages used by `ngBoilerplate`, like Twitter Bootstrap
-and Angular UI, which are listed in `bower.js`. To install them into the
-`vendor/` directory, simply run:
-
-```sh
-$ bower install
-```
-
-In the future, should you want to add a new Bower package to your app, run the
-`install` command:
-
-```sh
-$ bower install packagename --save-dev
-```
-
-The `--save-dev` flag tells Bower to add the package at its current version to
-our project's `bower.js` file so should another developer download our
-application (or we download it from a different computer), we can simply run the
-`bower install` command as above and all our dependencies will be installed for
-us. Neat!
-
-Technically, `ngBoilerplate` is now ready to go.
-
-However, prior to hacking on your application, you will want to modify the
-`package.json` file to contain your project's information. Do not remove any
-items from the `devDependencies` array as all are needed for the build process
-to work.
-
-To ensure your setup works, launch grunt:
-
-```sh
-$ grunt watch
-```
-
-The built files are placed in the `build/` directory by default. Open the
-`build/index.html` file in your browser and check it out! Because everything is
-compiled, no XHR requests are needed to retrieve templates, so until this needs
-to communicate with your backend there is no need to run it from a web server.
-
-`watch` is actually an alias of the `grunt-contrib-watch` that will first run a
-partial build before watching for file changes. With this setup, any file that
-changes will trigger only those build tasks necessary to bring the app up to
-date. For example, when a template file changes, the templates are recompiled
-and concatenated, but when a test/spec file changes, only the tests are run.
-This allows the watch command to complete in a fraction of the time it would
-ordinarily take.
-
-In addition, if you're running a Live Reload plugin in your browser (see below),
-you won't even have to refresh to see the changes! When the `watch` task detects
-a file change, it will reload the page for you. Sweet.
-
-When you're ready to push your app into production, just run the `compile`
-command:
-
-```sh
-$ grunt compile
-```
-
-This will concatenate and minify your sources and place them by default into the
-`bin/` directory. There will only be three files: `index.html`,
-`your-app-name.js`, and `your-app-name.css`. All of the vendor dependencies like
-Bootstrap styles and AngularJS itself have been added to them for super-easy
-deploying. If you use any assets (`src/assets/`) then they will be copied to
-`bin/` as is.
-
-Lastly, a complete build is always available by simply running the default
-task, which runs `build` and then `compile`:
-
-```sh
-$ grunt
-```
-
-### The Build System
-
-The best way to learn about the build system is by familiarizing yourself with
-Grunt and then reading through the heavily documented build script,
-`Gruntfile.js`. But you don't need to do that to be very productive with
-`ngBoilerplate`. What follows in this section is a quick introduction to the
-tasks provided and should be plenty to get you started.
-
-The driver of the process is the `delta` multi-task, which watches for file
-changes using `grunt-contrib-watch` and executes one of nine tasks when a file
-changes:
-
-* `delta:gruntfile` - When `Gruntfile.js` changes, this task runs the linter
- (`jshint`) on that one file and reloads the configuration.
-* `delta:assets` - When any file within `src/assets/` changes, all asset files
- are copied to `build/assets/`.
-* `delta:html` - When `src/index.html` changes, it is compiled as a Grunt
- template, so script names, etc., are dynamically replaced with the correct
- values configured dynamically by Grunt.
-* `delta:less` - When any `*.less` file within `src/` changes, the
- `src/less/main.less` file is linted and copied into
- `build/assets/ng-boilerplate.css`.
-* `delta:jssrc` - When any JavaScript file within `src/` that does not end in
- `.spec.js` changes, all JavaScript sources are linted, all unit tests are run,
- and the all source files are re-copied to `build/src`.
-* `delta:coffeesrc` - When any `*.coffee` file in `src/` that doesn't match
- `*.spec.coffee` changes, the Coffee scripts are compiled independently into
- `build/src` in a structure mirroring where they were in `src/` so it's easy to
- locate problems. For example, the file
- `src/common/titleService/titleService.coffee` is compiled to
- `build/src/common/titleService/titleService.js`.
-* `delta:tpls` - When any `*.tpl.html` file within `src/` changes, all templates
- are put into strings in a JavaScript file (technically two, one for
- `src/common/` and another for `src/app/`) that will add the template to
- AngularJS's
- [`$templateCache`](http://docs.angularjs.org/api/ng.$templateCache) so
- template files are part of the initial JavaScript payload and do not require
- any future XHR. The template cache files are `build/template-app.js` and
- `build/template-common.js`.
-* `delta:jsunit` - When any `*.spec.js` file in `src/` changes, the test files
- are linted and the unit tests are executed.
-* `delta:coffeeunit` - When any `*.spec.coffee` file in `src/` changes, the test
- files are linted, compiled their tests executed.
-
-As covered in the previous section, `grunt watch` will execute a full build
-up-front and then run any of the aforementioned `delta:*` tasks as needed to
-ensure the fastest possible build. So whenever you're working on your project,
-start with:
-
-```sh
-$ grunt watch
-```
-
-And everything will be done automatically!
-
-### Build vs. Compile
-
-To make the build even faster, tasks are placed into two categories: build and
-compile. The build tasks (like those we've been discussing) are the minimal
-tasks required to run your app during development.
-
-Compile tasks, however, get your app ready for production. The compile tasks
-include concatenation, minification, compression, etc. These tasks take a little
-bit longer to run and are not at all necessary for development so are not called
-automatically during build or watch.
-
-To initiate a full compile, you simply run the default task:
-
-```sh
-$ grunt
-```
-
-This will perform a build and then a compile. The compiled site - ready for
-uploading to the server! - is located in `bin/`, taking a cue from
-traditional software development. To test that your full site works as
-expected, open the `bin/index.html` file in your browser. Voila!
-
-### Live Reload!
-
-`ngBoilerplate` also includes [Live Reload](http://livereload.com/), so you no
-longer have to refresh your page after making changes! You need a Live Reload
-browser plugin for this:
-
-- Chrome - [Chrome Webstore](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
-- Firefox - [Download from Live Reload](http://download.livereload.com/2.0.8/LiveReload-2.0.8.xpi)
-- Safari - [Download from Live Reload](http://download.livereload.com/2.0.9/LiveReload-2.0.9.safariextz)
-- Internet Explorer - Surely you jest.
-
-Note that if you're using the Chrome version with `file://` URLs (as is the
-default with `ngBoilerplate`) you need to tell Live Reload to allow it. Go to
-`Menu -> Tools -> Extensions` and check the "Allow access to file URLs" box next
-to the Live Reload plugin.
-
-When you load your page, click the Live Reload icon in your toolbar and
-everything should work magically. w00t!
-
-If you'd prefer to not install a browser extension, then you must add the
-following to the end of the `body` tag in `index.html`:
-
-```html
-<script src="http://localhost:35729/livereload.js"></script>
-```
-
-Boom!
-
-## Roadmap
-
-This is a project that is not broad in scope, so there's not really much of a
-wish list here. But I would like to see a couple of things:
-
-I'd like it to be a little simpler. I want this to be a universal starting
-point. If someone is starting a new AngularJS project, she should be able to
-clone, merge, or download its source and immediately start doing what she needs
-without renaming a bunch of files and methods or deleting spare parts. What I
-have works for a first release, but I just think there is a little too much here
-right now.
-
-I'd also like to see a simple generator. Nothing like Yeoman, as there already
-is one of those, but just something that allows the user to say "I want
-Bootstrap but not Font Awesome and my app is called 'coolApp'. Gimme." Perhaps a
-custom download builder like UI Bootstrap has. Like that. Then again, perhaps
-some Yeoman generators wouldn't be out of line. I don't know. What do you think?
-
-Naturally, I am open to all manner of ideas and suggestions. See the
-"Contributing" section below.
-
-### To Do
-
-See the [issues list](http://github.com/joshdmiller/ng-boilerplate/issues). And
-feel free to submit your own!
-
-### Contributing
-
-This is an opinionated kickstarter, but the opinions are fluid and
-evidence-based. Don't like the way I did something? Think you know of a better
-way? Have an idea to make this more useful? Let me know! You can contact me
-through all the usual channels or you can open an issue on the GitHub page. If
-you're feeling ambitious, you can even submit a pull request - how thoughtful
-of you!
-
-So join the team! We're good people.
-
+# OpenDaylight DLUX \r
+\r
+OpenDaylight DLUX is a Javascript-based stateless user interface that communicates with the service backend to provide a consistent and user-friendly interface to interact with OpenDaylight projects and base controller.\r
+\r
+\r
+## Quick Start\r
+\r
+1. Install Node.js. Use link http://nodejs.org/download/\r
+2. Go to directory dlux-web from command line\r
+\r
+ $ cd dlux-web\r
+\r
+3. Execute following steps from shell prompt\r
+\r
+ $ sudo npm -g install grunt-cli karma bower\r
+ $ npm install\r
+ $ bower install\r
+\r
+\r
+4. To run the dlux on local node server, use command\r
+\r
+ $ grunt live\r
+\r
+It will start server at http://localhost:9000/. It expects your controller to be running at localhost:8181.\r
+\r
+You can change the base url of controller in file dlux-web/config/development.json\r
+\r
+\r
+5. To generate OSGi bundle for controller, run\r
+\r
+ $ mvn clean install\r
+\r
+It will generate dlux-web-0.1.0-SNAPSHOT.jar under dlux-web/target/.\r
+This assumes that dlux is deployed on same node where md-sal is present. If md-sal is present at different OSGi container,\r
+then you should update the base url in file dlux-web/config/production.json\r
+\r
+6. Copy this jar bundle to plugins directory inside your controller distribution. Then, you can access Dlux UI at http://<<Controller IP>>:8181/dlux/index.html.\r
+\r
+\r
+## Overall Directory Structure\r
+\r
+At a high level, the structure looks roughly like this:\r
+\r
+```\r
+dlux-web/\r
+ |- grunt-tasks/\r
+ |- karma/\r
+ |- src/\r
+ | |- app/\r
+ | | |- <app logic>\r
+ | |- assets/\r
+ | | |- <static files>\r
+ | |- common/\r
+ | | |- <reusable code>\r
+ | |- less/\r
+ | | |- main.less\r
+ |- vendor/\r
+ | |- angular-bootstrap/\r
+ | |- bootstrap/\r
+ | |- placeholders/\r
+ |- .bowerrc\r
+ |- bower.json\r
+ |- build.config.js\r
+ |- Gruntfile.js\r
+ |- module.prefix\r
+ |- module.suffix\r
+ |- package.json\r
+```\r
+\r
+What follows is a brief description of each entry, but most directories contain\r
+their own `README.md` file with additional documentation, so browse around to\r
+learn more.\r
+\r
+- `karma/` - test configuration.\r
+- `src/` - our application sources. [Read more »](src/README.md)\r
+- `vendor/` - third-party libraries. [Bower](http://bower.io) will install\r
+ packages here. Anything added to this directory will need to be manually added\r
+ to `build.config.js` and `karma/karma-unit.js` to be picked up by the build\r
+ system.\r
+- `.bowerrc` - the Bower configuration file. This tells Bower to install\r
+ components into the `vendor/` directory.\r
+- `bower.json` - this is our project configuration for Bower and it contains the\r
+ list of Bower dependencies we need.\r
+- `build.config.js` - our customizable build settings; see "The Build System"\r
+ below.\r
+- `Gruntfile.js` - our build script; see "The Build System" below.\r
+- `module.prefix` and `module.suffix` - our compiled application script is\r
+ wrapped in these, which by default are used to place the application inside a\r
+ self-executing anonymous function to ensure no clashes with other libraries.\r
+- `package.json` - metadata about the app, used by NPM and our build script. Our\r
+ NPM dependencies are listed here.\r
+\r
+\r
+### The Build System\r
+\r
+The best way to learn about the build system is by familiarizing yourself with\r
+Grunt and then reading through the heavily documented build script,\r
+`Gruntfile.js`. But you don't need to do that to be very productive with\r
+`ngBoilerplate`. What follows in this section is a quick introduction to the\r
+tasks provided and should be plenty to get you started.\r
+\r
+The driver of the process is the `delta` multi-task, which watches for file\r
+changes using `grunt-contrib-watch` and executes one of nine tasks when a file\r
+changes:\r
+\r
+* `delta:gruntfile` - When `Gruntfile.js` changes, this task runs the linter\r
+ (`jshint`) on that one file and reloads the configuration.\r
+* `delta:assets` - When any file within `src/assets/` changes, all asset files\r
+ are copied to `build/assets/`.\r
+* `delta:html` - When `src/index.html` changes, it is compiled as a Grunt\r
+ template, so script names, etc., are dynamically replaced with the correct\r
+ values configured dynamically by Grunt.\r
+* `delta:less` - When any `*.less` file within `src/` changes, the\r
+ `src/less/main.less` file is linted and copied into\r
+ `build/assets/ng-boilerplate.css`.\r
+* `delta:jssrc` - When any JavaScript file within `src/` that does not end in\r
+ `.spec.js` changes, all JavaScript sources are linted, all unit tests are run,\r
+ and the all source files are re-copied to `build/src`.\r
+* `delta:coffeesrc` - When any `*.coffee` file in `src/` that doesn't match\r
+ `*.spec.coffee` changes, the Coffee scripts are compiled independently into\r
+ `build/src` in a structure mirroring where they were in `src/` so it's easy to\r
+ locate problems. For example, the file\r
+ `src/common/titleService/titleService.coffee` is compiled to\r
+ `build/src/common/titleService/titleService.js`.\r
+* `delta:tpls` - When any `*.tpl.html` file within `src/` changes, all templates\r
+ are put into strings in a JavaScript file (technically two, one for\r
+ `src/common/` and another for `src/app/`) that will add the template to\r
+ AngularJS's\r
+ [`$templateCache`](http://docs.angularjs.org/api/ng.$templateCache) so\r
+ template files are part of the initial JavaScript payload and do not require\r
+ any future XHR. The template cache files are `build/template-app.js` and\r
+ `build/template-common.js`.\r
+* `delta:jsunit` - When any `*.spec.js` file in `src/` changes, the test files\r
+ are linted and the unit tests are executed.\r
+* `delta:coffeeunit` - When any `*.spec.coffee` file in `src/` changes, the test\r
+ files are linted, compiled their tests executed.\r
+\r
+As covered in the previous section, `grunt watch` will execute a full build\r
+up-front and then run any of the aforementioned `delta:*` tasks as needed to\r
+ensure the fastest possible build. So whenever you're working on your project,\r
+start with:\r
+\r
+```sh\r
+$ grunt watch\r
+```\r
+\r
+And everything will be done automatically!\r
+\r
+### Build vs. Compile\r
+\r
+To make the build even faster, tasks are placed into two categories: build and\r
+compile. The build tasks (like those we've been discussing) are the minimal\r
+tasks required to run your app during development. Build use developement.json for configuration.\r
+\r
+Compile tasks, however, get your app ready for production. The compile tasks\r
+include concatenation, minification, compression, etc. These tasks take a little\r
+bit longer to run and are not at all necessary for development so are not called\r
+automatically during build or watch. Compile use production.json as configuration file.\r
+\r
+To initiate a full compile, you simply run the default task:\r
+\r
+```sh\r
+$ grunt\r
+```\r
+\r
+This will perform a build and then a compile. The compiled site - ready for\r
+uploading to the server! - is located in `src/main/resources/pages`, taking a cue from\r
+traditional software development. To test that your full site works as\r
+expected, open the `src/main/resources/pages/index.html` file in your browser. Voila!\r
+\r
+### Maven Build\r
+\r
+Maven is added to generate an OSGi compatible bundle that can be shipped with Opendaylight Controller.\r
+Maven internally runs grunt production ready build and generate a jar out of it.\r
+Once you successfully run 'mvn clean install', the OSGi bundle jar gets generated under target/.\r
+### Live Reload!\r
+\r
+DLUX also includes [Live Reload](http://livereload.com/), so you no\r
+longer have to refresh your page after making changes! You need a Live Reload\r
+browser plugin for this:\r
+\r
+- Chrome - [Chrome Webstore](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)\r
+- Firefox - [Download from Live Reload](http://download.livereload.com/2.0.8/LiveReload-2.0.8.xpi)\r
+- Safari - [Download from Live Reload](http://download.livereload.com/2.0.9/LiveReload-2.0.9.safariextz)\r
+- Internet Explorer - Surely you jest.\r
+\r
+Note that if you're using the Chrome version with `file://` URLs (as is the\r
+default with `ngBoilerplate`) you need to tell Live Reload to allow it. Go to\r
+`Menu -> Tools -> Extensions` and check the "Allow access to file URLs" box next\r
+to the Live Reload plugin.\r
+\r
+When you load your page, click the Live Reload icon in your toolbar and\r
+everything should work magically. w00t!\r
+\r
+If you'd prefer to not install a browser extension, then you must add the\r
+following to the end of the `body` tag in `index.html`:\r
+\r
+```html\r
+<script src="http://localhost:35729/livereload.js"></script>\r
+```\r
+\r
+Boom!\r
+\r
+### Testing\r
+\r
+Tests can be run via grunt-watch command. It opens separate Chrome instance for running tests. This instance need to be open\r
+at all times (or at least during the time you want tests to be executed). Note on test execution speed - Chrome is at lower CPU \r
+priority when minimalized, or tab where are test executed is not active. This grealy decreases test execution speed, so in that \r
+case, just bring up the Chrome and/or activate tab with tests. Test are executed every time on Grunt jshint command.\r
+\r
+If you want to create/alter new task or command in Gruntfile and want to plug in test execution, you can add karma:unit to new \r
+Grunt task or karma:unit:run to Grunt command.\r
+\r
+If you are writing tests, they should be in same folder as tested file in form <TESTED_FILE>.spec.js\r
Code Review / dlux.git / blobdiff