ng2-bootstrap-visualizejs
ng2-bootstrap-visualizejs copied to clipboard
Angular Framework (Angular 2.0) demonstration using ng2-bootstrap and visualize.js libraries
Ng2-Bootstrap-Visualizejs
A demonstration application that draws Jaspersoft report/dashboard resources with the Visualize.js library using the tabs and alerts directives from the ng2-bootstrap library. All implemented using the Angular Framework (Angular 2.0).
Interested in implementing a Visualize.js solution without using the ng2-bootstrap library? Check out this related project instead.
User Login Screen
Tabbed Result Views
Based on Angular 2-Quickstart
This repository is based on the Angular 2-Quickstart, which is provided by Valor Software to demo a simple implementation of their Native Angular 2 Directives for Bootstrap.
Note that this project has not been forked from the Angular 2-Quickstart project, so no updates made to that project will be reflected in this project.
Prerequisites
- Jaspersoft software and server resources (i.e. JasperReports Server)
- Angular Framework (aka, Angular 2.0) library resources
- Ng2-Bootstrap library resources
Jaspersoft JasperReports Server
Required software and servers are well described on the Jaspersoft website.
Angular Framework
Node.js and npm are essential to Angular 2 development. Get them now if they're not already installed on your machine.
Verify that you are running at least node v5.x.x
and npm 3.x.x
by running node -v
and npm -v
in a terminal/console window.
Older versions produce errors.
This project was originally developed using Angular 2.0.0-RC3.
Ng2-Bootstrap
The ng2-bootstrap library is available as an npm package, which makes it extremely easy to implement in this or any Angular Framework project. When first installing npm packages, project dependencies should install the latest package.
Getting Started
Clone this repo into new project folder (e.g., my-proj
).
git clone https://github.com/richbl/ng2-bootstrap-visualizejs my-proj
cd my-proj
Install npm Packages
See npm and nvm version notes above
Install the npm packages described in the package.json
and verify that it works:
Attention Windows developers: you must run all of these commands in administrator mode.
npm install
Edit Visualize.js Configuration
Configuration details for the Visualize.js library are currently managed in two files:
-index.html
: sets the library include for the Visualize.js library script (e.g., <script src="http://visualizejsdemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>)
-app/vjs.config.service.ts
: set user and resource details (i.e., reports and dashboards)
It's expected that future releases of this demonstration should permit for the dynamic loading of the Visualize.js library in the vjs.config.service.ts
component.
Login credentials for this demo: joeuser/joeuser.
Start the Server
The npm start
command first compiles the application,
then simultaneously re-compiles and runs the lite-server
.
Both the compiler and the server watch for file changes.
npm start
By default, the server will be running on http://localhost:3000. Open a browser page on this URL and you should see the application running.
Shut it down manually with Ctrl-C.
You're ready to go!