CODEWITHSUNDEEP
javascriptruby-on-railsrubyangularjs
bitfrost41
bitfrost41

Reputation: 129

AngularJS and ui-router - templateUrl not working

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

Upvotes: 2

Views: 1217

Answers (2)

bitfrost41
bitfrost41

Reputation: 129

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

Upvotes: 0

jon snow
jon snow

Reputation: 3072

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

//= require app

will work.

Upvotes: 1

Related Questions