I’d like to ask help about the templateUrl while using ui-router and angular-rails-templates. I was able to make “template” work but not “templateUrl”. It looks as if it’s just re-rendering itself. Here’s a screenshot: http://i.imgur.com/H3dnFoF.jpg
What I’m planning to do is make application.html.erb the main template and just switch through several views from app/assets/templates. I’m fairly new to this and can’t seem to realize what I’m doing wrong. Thanks in advance! Here’s my code:
// app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>WebApp</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
</head>
<body ng-app="webApp">
<div>
<h1>{{main}}</h1>
</div>
<div ui-view=""></div>
</body>
</html>
// app/assets/javascripts/app.js
var appModule = angular.module('webApp', ['ui.router', 'templates']);
appModule.controller('IndexCtrl', [
'$scope',
function($scope){
$scope.main = '-Main Banner-';
}]);
appModule.controller('ContentCtrl', [
'$scope',
function($scope){
$scope.cont = 'Content page here!';
}]);
appModule.config(function (
$stateProvider,
$urlRouterProvider,
$locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'homepage.html',
controller: 'IndexCtrl'
});
$stateProvider
.state('content', {
url: '/content',
templateUrl: 'content.html',
controller: 'ContentCtrl'
});
// default fall back route
//$urlRouterProvider.otherwise('/');
// enable HTML5 Mode for SEO
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
// app/assets/templates/homepage.html.erb
<div class="container" ng-controller="IndexCtrl">
<h1>The Homepage View!</h1>
<h1>{{main}}</h1>
</div>
// app/assets/templates/content.html.erb
<div class="container">
<h1>The Content View!</h1>
</div>
// app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require angular
//= require angular-ui-router
//= require angular-rails-templates
//= app.js
//= require_tree . <- there's an error on initializing the module if this is removed
//= require_tree ../templates
// routes.rb
root 'application#index'
get '*path' => 'application#index'
// application_controller
def index
render 'layouts/application'
end
2
Answers
UPDATE: It seems this was caused by the incompatibility of Sprockets 3.1.0 with angular-rails-templates.
This solution got my app working: angular-rails-templates: templates are not found
It looks
app/assets/javascripts/application.js
needs change.//= app.js
towill work.