UI Router not working in Visual Force Page

Question

<apex:page standardStylesheets="false" cache="false" showHeader="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<body ng-app="uiTest">
    <a ui-sref="page1">Home</a>
    <a ui-sref="page2">Elsewhere</a>

    <div ui-view="ng-view"></div>

    <script type="text/ng-template" id="page1.html">
        <h1>Page 1</h1>
    </script>
    <script type="text/ng-template" id="page2.html">
        <h1>Page 2</h1>
    </script>

        <script src="https://code.angularjs.org/1.5.0-rc.0/angular.min.js"></script>


    <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script type="text/javascript">
        (function(){
            var uiTestApp = angular.module('uiTest',['ui.router']);

            uiTestApp.config(['$stateProvider','$urlRouterProvider',configRoutes]);

            function configRoutes($stateProvider, $urlRouterProvider){
                $stateProvider
                    .state('page1',{
                        url: '/page1',
                        templateUrl: 'page1.html'
                    })
                    .state('page2',{
                        url: '/page2',
                        templateUrl: 'page2.html'
                    });

                $urlRouterProvider.otherwise('/page1');
            }

        uiTestApp.run(['$state', function ($route) {
            // Include $route to kick start the router.
        }]);
        })();
    </script>
</body>

I have been trying to make this code work. Can anyone help me in detecting whats seem to be issue here why is it not running. I am new to angular JS and trying to learn it as much as I can.

Mujtaba, it always helps to explain what you're trying to do. And as the scope of this site is salesforce specific, explaining the relation between the Angular & Visualforce and how the issue is related to the salesforce aspect is usually a good idea. — Samuel De Rycke, Dec 17 '15 at 10:00

score 1 · Answer 1 · edited Apr 13 '17 at 12:54

1

The place to start with any JavaScript is to look in your browser's JavaScript console. You will see a message such as:

Mixed Content: The page at 'https://cveep.na15.visual.force.com/apex/xxx#/page1' was loaded over HTTPS, but requested an insecure script 'http://angular-ui.github.io/ui-router/release/angular-ui-router.js'. This request has been blocked; the content must be served over HTTPS.

which points to the first problem - change to https for the script.

Beyond that, pare your code right back to the minimum Angular app and build up from there. Browsers have excellent development tools built in (including a full-blown debugger) and you will have to get good with such tools if you are going to write much JavaScript. For a basic introduction see How do I start to debug my own Visualforce/JavaScript?.

edited Apr 13 '17 at 12:54

Community

1

answered Dec 16 '15 at 23:33

Keith C

135,775
26
201
437

Thanks for the prompt reply. But the thing that I found that was not making my code work was the link of the Angular ui router I changed it to, //cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js" and every thing was good to go. Thanks again.. – Mujtaba Talpur Dec 17 '15 at 00:30
@MujtabaTalpur Leaving off the "https" (the scheme) means that the scheme of the containing page is used i.e. "https". – Keith C Dec 17 '15 at 13:11

UI Router not working in Visual Force Page

1 Answers1