为什么我的html页面没有在<ui-view>中进行渲染?

时间:2016-05-09 19:16:10

标签: javascript ruby-on-rails angularjs

我正在尝试使用rails连接angularjs。我的观点有些问题。他们没有得到渲染

我的视图被抓取但出现错误[HTTP / 1.1 404 Not Found]

我在first.html的回复中得到了这个 https://github.com/sourabh-garg/vegeta/blob/master/response%20error.html

在我试图加载的app / assets / templates / first.html中。

app / views / application / index.html.erb有我的索引文件

路由 root'application #index'

App.js

   var app = angular.module('myapp', ['ui.router'])

      .config(function config($stateProvider){

       $stateProvider.state("index", {
        url : "",
        controller : "FirstCtrl as first",
        templateUrl : "first.html"
       })

       $stateProvider.state("second", {
        url : "/second",
        controller : "SecondCtrl as second",
        templateUrl : "second.html"
       })

      })
      .directive('elem', function () {
        return {
          restrict: 'E',
          templateUrl: "templates/second.html"
        };
      })
      .filter('reverse', function(){

      return function(text){
        return text.split('').reverse().join('');
      }

      })
      .service("greeting", function Greeting(){

        var greeting =  this;

        greeting.message =  "Default";
       })
      .service('Data', [function () {

        return {message: "You are a awesome"}
      }])
      .controller('FirstCtrl', function($scope, greeting, Data){

        var first = this;
        first.greeting = greeting;

        first.data = Data;

        first.reversed = function(message){
          return message.split('').reverse().join('');

        };

      })
      .controller('SecondCtrl', function($scope, greeting){

        var second = this;
        second.greeting = greeting;
      });

2 个答案:

答案 0 :(得分:1)

1)您正在使用gem angular-rails-templates

您是否必须将模板模块注入Angular应用程序?
angular.module('myapp', ['ui.router', 'templates'])

2)在您的文件结构app/assets/javascripts/,第5行的application.js文件中,查看将//= require_tree .更改为//= require_tree ../templates是否更正了该链接。

资源: angular-rails-template: include templates in rails assets pipeline

答案 1 :(得分:0)

您的配置功能写得不准确,请尝试

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

$ stateProvider使用了两次 // Now set up the states

// For any unmatched url, send to /route1 $urlRouterProvider.otherwise("/first");

$stateProvider .state('first', { url: "/first", templateUrl: "first.html" }) .state('second', { url: "/second", templateUrl: "second.html" }); }])