Integration of power bi reports with angular js in mvc application - angularjs

Question

How we can integrate power BI report with angular JS in mvc existing application. AS of now I am facing issue to display power bi report on angular view.

Answer 1

The way to go is: Use PowerBI Embedded (https://azure.microsoft.com/en-us/services/power-bi-embedded/)
I'm not an angular expert, but there is a Github repo aimed at this: https://github.com/Microsoft/PowerBI-Angular

Answer 2

Check out http://plnkr.co/edit/tQc1DF?p=info for a basic example of embedding a powerbi report and doing page navigation, using angular 1.4.x
var app = angular.module('plunker', [
'powerbi'
]);
app.controller('MainCtrl', function($scope, $http, models, PowerBiService) {
var staticReportUrl = 'https://powerbiembedapi.azurewebsites.net/api/reports/c52af8ab-0468-4165-92af-dc39858d66ad';
var _filterPaneEnabled = false;
var _navContentPaneEnabled = false;
var _reportHandle = null;
$scope.tree = [];
$http.get(staticReportUrl)
.then(function(responce) {
//create the config for the directive
var config = angular.extend(responce.data, {
settings: {
filterPaneEnabled: _filterPaneEnabled,
navContentPaneEnabled: _navContentPaneEnabled
}
});
$scope.embedConfiguration = config;
//create the nav-tree
$scope.tree.push(new models.Node(responce.data));
}, function(reason) {
});
$scope.onEmbedded = function(report) {
// get a reference to report object
_reportHandle = report;
//attach to events
report.on('loaded', OnloadedReport);
report.on('error', OnErrorReport);
};
function OnloadedReport(c) {
//get available pages to attach to navigation tree
_reportHandle.getPages()
.then(function(pages) {
pages.forEach(function(page) {
$scope.$apply(function() {
//populate the nav-tree
$scope.tree[0].pages.push(new models.Leaf(page));
});
});
})
.catch(function(error) {
console.log(error);
});
}
function OnErrorReport(e) {
console.log(e);
}
$scope.toggleFilterPaneClicked = function() {
_filterPaneEnabled = !_filterPaneEnabled;
_reportHandle.updateSettings({
filterPaneEnabled: _filterPaneEnabled
});
};
$scope.toggleNavContentPaneClicked = function() {
_navContentPaneEnabled = !_navContentPaneEnabled;
_reportHandle.updateSettings({
navContentPaneEnabled: _navContentPaneEnabled
});
};
$scope.setPage = function(page) {
_reportHandle.setPage(page.name);
};
$scope.fullScreen = function() {
_reportHandle.fullscreen();
};
});
app.factory('models', function() {
var Node = function(dataset) {
var self = this;
self.id = dataset.id;
self.name = dataset.name;
self.type = dataset.type;
self.accessToken = dataset.accessToken;
self.embedUrl = dataset.embedUrl;
self.webUrl = dataset.webUrl;
self.pages = [];
return self;
};
var Leaf = function(page) {
var self = this;
self.name = page.name;
self.displayName = page.displayName;
return self;
};
return {
Node: Node,
Leaf: Leaf
};
})
[1]https://microsoft.github.io/PowerBI-JavaScript/demo/static.html