seo Question posted in
Some basic information to get you started with this can be found here.

AngularJS and ui-router – templateUrl not working – SEO

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
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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


  2. 0

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

    //= require app

    will work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search