https://github.com/maritzstl/powerbi-angular
AngularJS components that allows developers to easily create applications that utilize the Power BI APIs.
https://github.com/maritzstl/powerbi-angular
Last synced: 3 months ago
JSON representation
AngularJS components that allows developers to easily create applications that utilize the Power BI APIs.
- Host: GitHub
- URL: https://github.com/maritzstl/powerbi-angular
- Owner: MaritzSTL
- License: mit
- Created: 2021-02-16T18:48:55.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-16T18:52:40.000Z (over 5 years ago)
- Last Synced: 2025-03-03T03:14:38.869Z (over 1 year ago)
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# angular-powerbi
[](https://travis-ci.org/Microsoft/PowerBI-Angular)
[](https://www.npmjs.com/package/angular-powerbi)
[](https://www.npmjs.com/package/angular-powerbi)
[](https://www.npmjs.com/package/angular-powerbi)
[](https://github.com/Microsoft/powerbi-angular/tags)
Angular module which wraps PowerBI-JavaScript as service and adds a collection of components for each embedded type (Currently only Report is supported) which you can use to easily embed Power BI visuals within your Angular applications.
## Demo
http://azure-samples.github.io/powerbi-angular-client
Source: https://github.com/Azure-Samples/powerbi-angular-client
## Contents
`angular-powerbi.js` includes the following:
- Service: **PowerBiService**
(Handles messaging communication between host frame/window and embedded powerbi visual iframes/windows)
- Web Components
1. Report Specific Component
```
```
2. Generic Component
```
```
## Getting started
1. Install:
```
npm install -save angular-powerbi
```
1. Include the `angular-powerbi.js` file within your app:
```
```
2. Include the 'powerbi' module as a dependency of your app:
```
app.module('app', [
'powerbi'
]);
```
3. Fetch embed data from the server (embedUrl and accessToken) and make it available on controller scope.
This would likely require using a factory or service to fetch report data from your local server.
Example where the report is resolved when entering route:
Route:
`return ReportsService.findById('5dac7a4a-4452-46b3-99f6-a25915e0fe55');`
ReportsService:
```
findById(id: string): ng.IPromise {
return this.$http.get(`${this.baseUrl}/api/reports/${id}`)
.then(response => response.data);
}
```
If you need a sample server to test you can use the following:
- Live example: https://powerbiembedapi.azurewebsites.net/
- C# Sample Server: https://github.com/Azure-Samples/powerbi-dotnet-server-aspnet-web-api
- Nodejs Sample Server: (COMING SOON)
4. Insert the component in your template where you want to embed the visual:
```
```