Forum Discussion

phani's avatar
phani
Advisor
9 years ago

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 Fo...
  • AdamA's avatar
    AdamA
    9 years ago

    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.

AdamA's avatar
AdamA
Khoros Oracle
9 years ago

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.

  • phani's avatar
    phani
    Advisor
    9 years ago

    Hi AdamA,

     

    We have deployed the Angular JS code in a component and placed in TKB Article Page and Forum Topic Page. We have tried all 3 recommended options (Option 1, 2 & 3) mentioned here. Following is our observation in all 3 approach. 

     

    Option 1:

    JS code executed. But console is throwing the errors "Argument 'myCtrl' is not a function, got undefined" and  "App Already Bootstrapped with this Element"

     

    Attached Option 1 code and error screen shot.

     

    Option 2:

    JS code executed. But console is throwing the error "Argument 'myCtrl' is not a function, got undefined" 

     

    Attached Option 1 code and error screen shot.

     

    Option 3:

    JS code not executed. Console is throwing the errors "Argument 'myCtrl' is not a function, got undefined" and  "App Already Bootstrapped with this Element"

     

    Attached Option 3 code and error screen shot.

     

    In all of the above cases we observed common Lithium Issue:

    'The Media Uploader Dialog Box is automatically opening and blocking the UI if we place any type of angular JS code on TKB Article Page'. PS the error screenshots.

     

    Community: http://italent2.demo.lithium.com/

     

    Could you please help us to solving this issue.

     

    Thanks & Regards,

    Phani


  • phani's avatar
    phani
    Advisor
    9 years ago

    Thank you AdamA for your tremendous support to resolve this issue.