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>
