1

I am trying to implement a quiz engine in my organisation and I found an open source code (angularjs) that fulfill my requirements, (you can find the project here) (a live demo here) so naturally I would like to integrate it directly in my visualforce page but it does not work, it shows me a blank page.

Here is my visual force page ( actually, I have modified the index.html file to include all the other files as static resources ). Are there any other modifications to do for the other files (knowing that I have worked with angularjs before)?

  <apex:page showHeader="false">
  <html ng-app="appNameHere">
    <head>

    <!-- You may wish to bundle and minify in your project. It is not bundled and minified here to keep things simple here. -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet" />-->
    <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <apex:stylesheet value="{!URLFOR($Resource.cssAngular, 'css/style.css')}"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"/>

    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"/>
    <apex:includeScript value="{!URLFOR($Resource.app, 'app/app.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.app, 'app/helperService.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.app, 'app/quizCtrl.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.app, 'app/createCtrl.js')}"/>

  </head>
  <body>
    <div class="container">
        <div class="ng-view"></div>
    </div>
  </body>
  </html>
</apex:page>
  • Where you initialized angular app? Init angular app – itzmukeshy7 Apr 15 '16 at 9:31
  • In the original file it is initialized in html tag, and i do not know how to initialize it in the visualforce page '<html ng-app="quizApp" xmlns="w3.org/1999/xhtml">' – Merabti iBRAHIM Apr 15 '16 at 9:35
1

Try this ;)

<apex:page showHeader="false">
  <html ng-app="quizApp">
    <head>

    <!-- You may wish to bundle and minify in your project. It is not bundled and minified here to keep things simple here. -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet" />-->
    <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <apex:stylesheet value="{!URLFOR($Resource.cssAngular, 'css/style.css')}"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"/>

    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"/>
    <apex:includeScript value="{!URLFOR($Resource.app, 'app/app.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.app, 'app/helperService.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.app, 'app/quizCtrl.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.app, 'app/createCtrl.js')}"/>

  </head>
  <body>
    <div class="container">
        <div class="ng-view"></div>
    </div>
  </body>
  </html>
</apex:page>
| improve this answer | |
  • Yes, i tried that and i get an error in my firebug console, i have updated the question to include the error message – Merabti iBRAHIM Apr 15 '16 at 9:52
  • Replace ng-app="appNameGoesHere" with ng-app="quizApp"; Here app name is the problem; see updated answer; – itzmukeshy7 Apr 15 '16 at 9:54
  • sorry for taking too long to give you a feedback,( i had a connexion problem), this time i have another problem 'Error: The name can only contain underscores and alphanumeric characters. It must begin with a letter and be unique, and must not include spaces, end with an underscore, or contain two consecutive underscores.' the raison is the link of the visualforce page that i get after executing the above code "**/apex/QuizAngular#/home". i do not know why the "#" is here i tried to search the code but i did not find any redirection links. i t should be a angularjs trick – Merabti iBRAHIM Apr 15 '16 at 10:50
  • if you are running into other errors, please consider asking a new question as specified in How to Ask . Thanks – glls May 1 '17 at 4:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.