[SalesForce] using angularui ui-router, how can I reference inline angularjs templates in a visualforce page

I have a question similar to Visualforce + Angular JS, ui-router not working; however, I'm looking to access inline templates, but cannot do so even though there are no console errors.

I've converted the following, using angular-route, to the the same, but using angular-ui-router. The angular-ui-router updates the url as expected; however, it is not loading the ui-view with the specified angularjs template.

Any help will be greatly appreciated.

Note: All javascript libraries have been uploaded as resource (zipFile).

ANGULAR ROUTE CODE BLOCK (this works)

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

        <div ng-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="{!URLFOR($Resource.zipFile,'/lib/angular/angular.min.js')}"></script>
        <script src="{!URLFOR($Resource.zipFile,'/lib/angular-route/angular-route.min.js')}"></script>
        <script type="text/javascript">
            (function(){
                var uiTestApp = angular.module('uiTest',['ngRoute']);

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

                function configRoutes($routeProvider){
                    $routeProvider
                    .when('/page1',{
                            templateUrl: 'page1.html'
                        })
                    .when('/page2',{
                        templateUrl: 'page2.html'
                    });

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

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

ANGULAR-UI-ROUTER CODE BLOCK (this partially works, doesn't load angularjs inline templates)

<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="{!URLFOR($Resource.zipFile,'/lib/angular/angular.min.js')}"></script>
        <script src="{!URLFOR($Resource.zipFile,'/lib/angular-ui-router/angular-ui-router.min.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>
</apex:page>

Best Answer

After additional research (RTFM) I was able to get this to work

I changed 

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

to

<ui-view></ui-view>

and it worked as expected.

Related Topic