AngularJS and ui-router - templateUrl not working

Question

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: https://i.sstatic.net/2VjYu.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

I think you need to remove this code from comment$urlRouterProvider.otherwise('/'); — Pankaj Parkar
– Pankaj Parkar, Commented Apr 21, 2015 at 18:18
@pankajparkarhi. hi. tried to remove that. nothing happened. nothing is also rendered after a short flash of "{{main}}" text. — bitfrost41
– bitfrost41, Commented Apr 21, 2015 at 18:51

jon snow · Accepted Answer · 2015-04-21 18:16:19Z

1

It looks app/assets/javascripts/application.js needs change. //= app.js to

//= require app

will work.

answered Apr 21, 2015 at 18:16

jon snow

3,0621 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:51:05Z

0

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

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered May 25, 2015 at 10:10

bitfrost41

1291 silver badge11 bronze badges

Collectives™ on Stack Overflow

AngularJS and ui-router - templateUrl not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related