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>
Improve this question
2
  • Where you initialized angular app? Init angular app
    – itzmukeshy7
    Apr 15, 2016 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, 2016 at 9:35

1 Answer 1

Reset to default
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
4
  • 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, 2016 at 9:52
  • Replace ng-app="appNameGoesHere" with ng-app="quizApp"; Here app name is the problem; see updated answer;
    – itzmukeshy7
    Apr 15, 2016 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, 2016 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, 2017 at 4:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .