Question

我想在使用ui-router和angular-rails-templates时询问有关templateUrl的帮助。我能够制作＆＃34;模板＆＃34;工作但不是＆＃34; templateUrl＆＃34;。它看起来好像只是重新渲染自己。这是一个屏幕截图：http://i.imgur.com/H3dnFoF.jpg

我打算做的是将 application.html.erb 作为主模板，然后从 app / assets / templates 切换几个视图。我对此很新，似乎无法意识到我做错了什么。提前致谢！这是我的代码：

// 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

Answer 1

看起来app/assets/javascripts/application.js需要改变。 //= app.js到

//= require app

会奏效。

Answer 2

更新：这似乎是由于Sprockets 3.1.0与angular-rails-templates的不兼容造成的。

此解决方案让我的应用运行： angular-rails-templates: templates are not found

AngularJS和ui-router - templateUrl无效

2 个答案: