4

I've been doing some digging to figure out how I can get ui-router to work. I came across this:

How can I reference angularjs template files within a visualforce page?

but every answer on there didn't work for me.

Here's the VF page:

<apex:page standardStylesheets="false" sidebar="false" showHeader="false" docType="html-5.0">
<apex:stylesheet value="{!URLFOR($Resource.QuarryResources, 'app/css/style.css')}" />
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<html ng-app="quarryApp">
    <head>
        <meta charset="utf-8"></meta>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
        <meta name="description" content=""></meta>
        <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
        <link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css"></link>
        <base href="{!URLFOR($Resource.QuarryResources, 'app/')}" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    </head>
    <body ng-app="quarryApp">

I've uploaded the related resources as a .zip in the Static Resources of my sandbox; here's the structure:

QuarryResources.zip
  - app
    - css
    - images
    - script
    - pages

Here's what a sample partial loos like:

<section class = "main-wrapper">
  <header ng-model="message">
    <h1>Home</h1>
  </header>
</section>

Controller for QuarryApp:

var quarryApp = angular.module('quarryApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
      .state('home', {
        url:'/home',
        templateUrl: "pages/home.html"
      });
  });

If possible, I'd like to go down the route of storing the partials as a static resource rather than as visualforce pages. My research has shown that the performance is much faster that way; of course, correct me if I'm wrong.

Any help would be much appreciated by this new VF and Angular developer.

Regards, W

Improve this question
11
  • Oh I forgot to add, if possible, I'd like to go down the route of storing the partials as a static resource rather than as visualforce pages. My research has shown that the performance is much faster that way; of course, correct me if I'm wrong.
    – Codemky
    Commented Jul 30, 2014 at 18:32
  • Probably best you solve your current problem first. But once you have, I would strongly recommend that you use static resources for your partials rather than pages. Here is how Serving AngularJS templates from static resources.
    – Keith C
    Commented Jul 30, 2014 at 20:12
  • @KeithC, that's actually what I'm trying to do. You'll see my partials are in the .zip file that is uploaded into Static Resources. I just named them pages instead of partials.
    – Codemky
    Commented Jul 30, 2014 at 20:37
  • Sorry only glanced at your question.
    – Keith C
    Commented Jul 30, 2014 at 21:58
  • @keithC, no problem. I think I've hit a wall, would you be able to help me? greenstork helped me figure how to set up ui-router on visualforce but the partials are still not showing up...
    – Codemky
    Commented Jul 30, 2014 at 22:16

1 Answer 1

Reset to default
3

Your HTML in you Angular app is no longer relative to the VF page, so you need to figure out the base path through some trickery. You can do this by creating a simple module in your VF page, in a script tag, which stores the path of your static resource in an angular constant, like so:

<script>
    "use strict";
    angular.module('server-data', [])
      .constant('basePath', '{!URLFOR($Resource.hubApps, "")}'.split('?')[0]);
</script>

You would then need to include that module in your app dependencies and use the base path whenever referencing template URLs.

Improve this answer
12
  • Thank you for taking the time to help me out! I'm having some difficulty understanding your answer I added the module in the <head> of my VF page, but I'm not too sure on how to go about 'including that module in my app dependencies and use the base path whenever referencing template URLs.
    – Codemky
    Commented Jul 30, 2014 at 19:12
  • Does it look something like this: var quarryApp = angular.module('quarryApp', ['ui.router', 'server-data']) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider .state('home', { url:'/home', templateUrl: "pages/home.html" }); }); Sorry about the formatting, line breaks isn't working for some odd reason...
    – Codemky
    Commented Jul 30, 2014 at 19:15
  • close, you'd need to add basePath to your .config function and reference it in your templateUrl
    – greenstork
    Commented Jul 30, 2014 at 19:19
  • greenstork, does this look right to you? ` .config(function($stateProvider, $urlRouterProvider, $basePath) {` and when I reference it in my template Url, did you mean like this? ` .state('home', { url:'/home', templateUrl: "basePath/pages/home.html" });`
    – Codemky
    Commented Jul 30, 2014 at 19:28
  • Oh and I just tried adding that module to my VF page and it's saying: Error: Static Resource named hubApps does not exist. Check spelling. I take it I was supposed to replace hubApps with Quarry Resources, right?
    – Codemky
    Commented Jul 30, 2014 at 19:33

You must log in to answer this question.

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