Need help to create Angular JS apps in Lithium Community
Hi,
We are developing custom Angular JS apps in our community
We are facing bootstrapping issue when we are placing the Angular JS code in the following pages.
- Forum Page
- TKB Article Page
- Forum Topic Page
The console is throwing the error “App Already Bootstrapped with this Element" and Document viewer is automatically opening in TKB article page.
We have followed the steps mentioned in the document http://community.lithium.com/t5/Developers-Knowledge-Base/Integrating-custom-AngularJS-apps-with-Lithium-Community/ta-p/208252 to Integrate our custom Angular JS apps with Lithium Community. But we are facing the same issue.
Angular JS Code:
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<@liaAddScript angular="true">
;(function (angular) {
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
})(LITHIUM.angular);
</@liaAddScript>
Can anyone help us to resolve this issue.
Thanks & regards,
Phani
Hello phani, where have you added the markup in the page (<div ng-app="myApp" ng-controller="myCtrl">...</div>)? What issue are you seeing, is it just not compiling your markup? Is your JS being evaluated? If you are going to use the option (Option 1) to bootstrap where you use a ng-app attribute then you will need to be sure that the markup is not contained by our manually bootstrapped element. By default we manually bootstrap off of the element that is found using the location: .lia-page .min-width .lia-content. If you markup (app) is intended to be inside of this element then I recommend using Option 2 or Option 3 that is discussed on the linked page.
