3

I'm getting an error that I've Googled a bunch and I'm getting nowhere. Here's the code:

VF Page:

<apex:page controller="registrationController" showHeader="false" sidebar="false" standardStylesheets="false" docType="html-5.0" >
<apex:remoteObjects>
    <apex:remoteObjectModel name="Volunteer_Visit__c" jsShorthand="VisitGateway" fields="Id,Name"></apex:remoteObjectModel>
    <apex:remoteObjectModel name="Volunteer_Registration__c" jsShorthand="RegGateway" fields="Id,Name,Contact_Org_Name__c,Contact_First_Name__c,Con_Email__c,Schedule_Start_Time__c,Org_ID__c,Volunteer_Visit__c,Contact__c,Walk_in__c,Badge_Name__c,Num_of_Hours__c"></apex:remoteObjectModel>
</apex:remoteObjects>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>

    <!-- Boostrap loaded in from the MaxCDN and some custom bootstrap styles hacked together from this template 
    http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/ along with some custom flavor -->
    <apex:stylesheet value="{!URLFOR($Resource.registrationappstatic, 'registrationapp/styles/stylish-portfolio.css')}"/>
    <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>

    <!-- Font Awesome stuff also coming in from the Stylish Portfolio theme -->
    <apex:stylesheet value="{!URLFOR($Resource.registrationappstatic, 'registrationapp/font-awesome/css/font-awesome.min.css')}"/>
    <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"/>

    <!-- Good ol' Angular JS and ngRoute loaded in from Google CDN -->
    <apex:includeScript value="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"/>
    <apex:includeScript value="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"/>

    <!-- Custom AppJS here and controllers found in the registrationappstatic Static Resource -->
    <apex:includeScript value="{!URLFOR($Resource.registrationappstatic, 'registrationapp/app.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.registrationappstatic, 'registrationapp/registration-list-controller.js')}"/>
</head>

<body>
    <div class="bootstrap" ng-app="registrationKiosk">
        <div ng-view="ng-view"></div>
    </div>
    <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>
    <apex:includeScript value="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
</body>

Here's app.js

angular

.module('registrationKiosk', ['ngRoute'])

.constant('resourceUrl', '/resource/'+Date.now()+'/registrationappstatic/registrationapp/app')

.config(['$routeProvider', 'resourceUrl', function($routeProvider, resourceUrl) {
    $routeProvider
        .when('/', {
            templateUrl:  resourceUrl+'/view1.html'
         })
        .when('/volunteer-select', {
            templateUrl:  resourceUrl+'/view2.html',
            controller: 'RegCtrl'
        })
        .when('/preregister', {
           templateUrl:  resourceUrl+'/view3.html',
           controller: 'RegCtrl'
        })
        .otherwise({
            redirectTo: "/"
        });
 }])
.service('visitStorage', SObjectModel.VisitGateway);

Note the service bit - this is where I think things are going awry. Here's how I set up the one controller I have:

.controller("RegCtrl", ["$scope", "$q", "visitStorage", function($scope, $q, visitStorage) {

So I have all this set up and I'm running into the unknown provider error for this service. What am I doing wrong? If I'm not showing enough code - please let me know. I'm also getting this error:

Uncaught ReferenceError: SObjectModel is not defined

I assume it's related to the service - but I don't know what I'm doing wrong.

Thanks!

Improve this question
1
  • It's possible that your app.js is loading before the remote objects are available. This in turn is causing the provider error since the service doesn't get created because of the reference error. Can you show me where you load app.js in your page?
    – Valyrion
    May 7, 2015 at 7:41

1 Answer 1

Reset to default
3

Try moving all your scripts to the bottom of your body tag using <script src="{!URLFOR($Resource...)}"/> instead of the apex:includescript. There's an example here that does this in an Angular+RemoteObject application like yours.

Improve this answer
2
  • 1
    Worked like a charm! Do you mind explaining why I have to do that? Is it just the quirkiness of VF?
    – Zakk Tapp
    May 7, 2015 at 19:59
  • Happy to help :) The reason is that HTML normally loads everything it finds sequentially from top to bottom. I'm not entirely clear on the specifics, but somehow (maybe the VF includescript places stuff wrong, maybe the <head> tag runs first by default) the scripts were being inserted before wherever VF defined the remoteobjects. You'd have to look at the page source to see the exact order of things. Placing them at the bottom of the body tag is just a convention for including scripts because it ensures that all (most) of your page will be ready by the time your scripts execute.
    – Valyrion
    May 8, 2015 at 7:45

You must log in to answer this question.

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