Deprecation notice
Power BI Angular is deprecated and is no longer supported.
angular-powerbi
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
-
Report Specific Component
<powerbi-report embed-url="vm.report.embedUrl" access-token="vm.report.accessToken"></powerbi-report> -
Generic Component
<powerbi-component options="vm.report"></powerbi-component>
-
Getting started
-
Install:
npm install -save angular-powerbi -
Include the
powerbi.jsand theangular-powerbi.jsfile within your app:Below we're using absolute urls to npmcdn but you could also use relative urls to local files in
node_modulesor bundle the two scripts with the rest of your vendor scripts.<script src="https://npmcdn.com/powerbi-client@2.0.0"></script> <script src="https://npmcdn.com/angular-powerbi@1.0.0"></script> -
Include the 'powerbi' module as a dependency of your app:
app.module('app', [ 'powerbi' ]); -
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<PowerBi.IReport> { 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: https://github.com/Azure-Samples/powerbi-node-server-express
-
Insert the component in your template where you want to embed the visual:
<powerbi-report embed-url="vm.report.embedUrl" access-token="vm.report.accessToken" options="vm.reportOptions"></powerbi-report>