So I’m writing a small app and currently working on the angular js front end. The backend is written in RoR but thats besides the point. I have a dependency ui.router
in my angular.module
so I can move around pages.
Link to github branch if interested: linky link
Paths:
App
-Assets
-Javascripts
-app.js (where the routing lies)
-Templates
-dashboard.html (this is the template I want to render)
-Views
-Layouts
-Index.html.erb <- this is the index
Heres the problem:
angular.module('SwoleMetrics', [
'ui.router',
'templates'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
/**
* Routes and States
*/
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard.html', <<--- RIGHT HERE
controller: 'DashboardCtrl'
});
// default fall back route
$urlRouterProvider.otherwise('/dashboard');
// enable HTML5 Mode for SEO
$locationProvider.html5Mode(true);
});
No matter what path I put into templateUrl, it never works. I have the same html file in basically every folder around app.js to see if it could read any of those but it always fails and just recursively inserts the parent div into the . Do any front end engineers know why?
2
Answers
The issue was the way the files were being served via rails. The sprockets gem was updated and no longer compatible with angular-ui-templates and broke everything. Downgraded to sprockets v. 2.x and it worked.
Its going to be relative to index.html. If index.html is under App then your path is going to be templateUrl: ‘Templates/dashboard.html’.