I am using navigation menu in angularjs. I am unable to navigate to partial html pages. How can i achieve the same. How can i navigate to specific vf page. My folder structure is as follows;

AngularApp.resource(Resource Name) --app app.js --controllers --- --- --- --directives --- --- --services --- --- --views createWorkOrder.html workOrderGrid.html

src classes ---WorkOrderControllerExtension.cls pages ---WorkOrderVF.page

Here is my code. VF Page:

    <apex:page controller="WorkOrderControllerExtension"  docType="html-5.0"
 sidebar="false" showHeader="false" standardStylesheets="false">

    <!-- Bootstrap -->
    <link href="{!URLFOR($Resource.Bootstrap, 'css/bootstrap.min.css')}" rel="stylesheet" />
    <!-- Custom CSS -->
    <link href="{!URLFOR($Resource.Stylesheet, 'main.css')}" rel="stylesheet" />
    <link href="{!URLFOR($Resource.Stylesheet, 'Images/sprite-workorder.png')}" rel="stylesheet" />
    <!-- ng-table css -->
    <link href="{!URLFOR($Resource.Stylesheet, 'ng-table.min.css')}" rel="stylesheet" />

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <apex:includeScript value="{!URLFOR($Resource.Bootstrap, 'js/bootstrap.min.js')}"/>    
    <apex:includeScript value="{!URLFOR($Resource.AngularJSLib, 'angular.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.AngularJSLib, 'angular-route.min.js')}"/>

    <apex:includeScript value="{!URLFOR($Resource.AngularJSLib, 'angular-resource.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.AngularJSLib, 'ui-bootstrap-tpls-0.11.0.js')}"/>
    <base href="{!URLFOR($Resource.AngularApp, 'app/')}" /> 
    <!-- Include ngTable js file-->
    <apex:includeScript value="{!URLFOR($Resource.AngularApp,'app/directives/ngTable.js')}"/>   

    <!-- Include all individual files as needed for AngularApp-->
    <apex:includeScript value="{!URLFOR($Resource.AngularApp,'app/app.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.AngularApp,'app/controllers/workOrderController.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.AngularApp,'app/controllers/searchWOController.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.AngularApp,'app/controllers/caseController.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.AngularApp,'app/controllers/navController.js')}"/>

    <!-- <apex:includeScript value="{!URLFOR($Resource.AngularApp,'app/services/workOrderSVC.js')}"/> -->

    <!-- Visualforce Remote Objects. -->    
    <apex:remoteObjects jsNamespace="CaseModels">
        <apex:remoteObjectModel name="Case" jsShorthand="case" fields="Id,CaseNumber"/>
    <apex:remoteObjects jsNamespace="WorkOrderModels">
        <apex:remoteObjectModel jsShorthand="wo" name="Work_Order__c" fields="Id,Name,Case__c,City__c,Street__c,Zip__c"/>

    <nav class="navbar navbar-default navPanel" >
          <div class="container-fluid" ng-controller="navController">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">        
              <div class="woSpriteImage woHeadTitle"></div>
              <div class="appHeading">WORK ORDER APP</div>
            <ul class="nav navbar-nav ">              
              <li class="createWO"><a href="/">CREATE WORK ORDER </a></li>
              <li class="workOrdList"><a href="#/getWorkOrder">WORK ORDER LIST</a></li>
              <li class="caseList"><a href="">CASE LIST</a></li>
          </div><!-- /.container-fluid -->
    <div ng-app="workOrderApp"  class="container form" width="100%">            



 var app = angular.module('workOrderApp',['ngTable','ngRoute']);

            // route for the home page by default
            .when('/', {                
                templateUrl : 'views/createWorkOrder.html',
                controller  : 'woFormController'
            // route for the work order grid page.
            .when('/getWorkOrder', {
                templateUrl : 'views/workOrderGrid.html',
                controller  : 'searchWOController'
            // route for the work order view page.
            .when('/getWorkOrder/:woId', {
                templateUrl : 'views/createWorkOrder.html',
                controller  : 'woFormController'
            // route for the work order grid page.
            .when('/getCaseList', {
                templateUrl : 'views/caseGrid.html',
                controller  : 'caseController'
            // route for the work order view page.
            .when('/getCaseWorkOrder/:caseId', {
                templateUrl : 'views/caseWorkOrderGrid.html',
                controller  : 'searchWOController'
                redirectTo: '/'


    app.controller('navController', ['$scope', function($scope){
    //Get Case Id form query string.
    var csId = getWoUrlParameter('RecordId');
    var wId = null;

    $scope.getWoURL = function(wId,csId){     
         if(wId != "null" && csId != "null")
            return  "https://" + $window.location.host + "/apex/WorkOrderVF?"+"RecordId="+csId+"#/getWorkOrder/"+wId;

            return  "https://" + $window.location.host + "/apex/WorkOrderVF?"+"#/getWorkOrder/";


    //Format proper url and return query string value.
    function getWoUrlParameter(param, dummyPath) {
        var sPageURL = dummyPath || window.location.search.substring(1),
            sURLVariables = sPageURL.split(/[&||?]/),

        for (var i = 0; i < sURLVariables.length; i += 1) {
            var paramName = sURLVariables[i],
                sParameterName = (paramName || '').split('=');

            if (sParameterName[0] === param) {
                res = sParameterName[1];

        return res;


Please help.

  • 2
    Navigation in Angular is normally within a single page where any href value is a relative URL. Moving to a new Visualforce page will result in a new instance of the Angular app being created which is probably not what you want. This github.com/metadaddy-sfdc/IssuesInGitHub is an example of an Angular app running in Salesforce. – Keith C Feb 10 '16 at 14:16
  • Yes. i want to navigate to different .html pages via navigation menu. How can i configure the route to start after /apex/WorkOrderVF?. Now it is taking my resource file path as my html files and js files are stored there. – Ejaz Feb 10 '16 at 14:18
  • 1
    OK, the .html is a different thing to a Visualforce page. If you are storing your .html partials as static resources this github.com/metadaddy-sfdc/IssuesInGitHub/blob/master/metadata/… illustrates one way to access them. – Keith C Feb 10 '16 at 14:22
  • @Keith: I have my navigation menus on VF page. Based on menus and their parameters i want to redirect user to different .html pages which are in static resource. Is there an issue with my routing code? – Ejaz Feb 10 '16 at 14:26
  • The href would normally be e.g. <a href="#/getWorkOrder"/> to match your second route. – Keith C Feb 10 '16 at 14:31

Your Answer

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

Browse other questions tagged or ask your own question.