0

我将我的 Angular 应用程序放入了一个新的 ruby​​ on rails 应用程序。我注意到的是没有视图被渲染出来。我只看到正在渲染的布局。我也没有收到任何错误。我的 2 个视图（home.html 和 about.html）和 list.json 位于公共文件夹中。如果您需要应用程序中的更多代码，请告诉我。

我的应用程序布局如下：

                <!DOCTYPE html>
            <html>
            <head>
              <title></title>
              <%= stylesheet_link_tag    "application", :media => "all" %>
              <%= javascript_include_tag "application" %>
              <%= csrf_meta_tags %>
            </head>
            <body>
            <div class="navbar navbar-inverse navbar-fixed-top">
                  <div class="navbar-inner">
                    <div class="container">
                      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a href="/home" class="brand"><img src="assets/tool-box.png" /> Dev Tool Chest</a>
                      <div class="nav-collapse collapse">
                        <ul class="nav">
                          <li class="active">
                            <a href="/home">Home</a>
                          </li>
                          <li class="">
                            <a href="./about">About</a>
                          </li>

                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="container">

            <div id="view" ng-view></div>

            </div>


            </body>
            </html>

我的应用程序控制器如下：

                class ApplicationController < ActionController::Base
              protect_from_forgery

              def index
              render :layout => 'application', :nothing => true
              end
            end

我制作了我的 JS 资产管道，如下所示：

                //= require jquery
            //= require jquery_ujs
            //= require bootstrap
            //= require angularmin.js
            //= require angularstrap.min.js
            //= require toolsapp.js

toolsapp.js 看起来像这样

                    var tools = angular.module("tools", ['$strap.directives'])

                tools.config(function($routeProvider) {

                  $routeProvider.when('/home', {
                    templateUrl: 'home.html',
                    controller: 'HomeController'
                  });
                   $routeProvider.when('/about', {
                    templateUrl: 'about.html',
                    controller: 'AboutController'
                  });




                  $routeProvider.otherwise({ redirectTo: '/home' })

                });

                tools.controller("HomeController", function($scope, fetchData) {


                fetchData.then(function(data){
                    $scope.record = data;
                    $scope.typeahead = function(){
                    var allNames = [];
                    for(var i=0;i<$scope.record.length;i++){
                    allNames.push($scope.record[i].name)
                    }
                    return allNames;
                    }
                  });



                $scope.clearSearch = function(){
                    $scope.search = "";
                    $scope.name2 = "";
                    }
                $scope.name2 = "";
                $scope.search = "";



                });

                tools.controller("AboutController", function($scope) {
                });





                tools.factory('fetchData', ['$http', function($http){
                  var Url  = "list.json";
                  var list = $http.get(Url).then(function(response){
                     return response.data;
                  });
                  return list;
                }]);






                tools.filter('unique', function () {

                  return function (items, filterOn) {

                    if (filterOn === false) {
                      return items;
                    }

                    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
                      var hashCheck = {}, newItems = [];

                      var extractValueToCompare = function (item) {
                        if (angular.isObject(item) && angular.isString(filterOn)) {
                          return item[filterOn];
                        } else {
                          return item;
                        }
                      };

                      angular.forEach(items, function (item) {
                        var valueToCheck, isDuplicate = false;

                        for (var i = 0; i < newItems.length; i++) {
                          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
                            isDuplicate = true;
                            break;
                          }
                        }
                        if (!isDuplicate) {
                          newItems.push(item);
                        }

                      });
                      items = newItems;
                    }
                    return items;
                  };
                });
4

1 回答 1

1

我对此的建议是：

创建一个家庭控制器：

home_controller.rb

class HomeController < ApplicationController

  def index
  end

  def about
  end
end

将您的视图移动到app/views/home文件夹。

添加以下路线：

路线.rb

get 'about', to: "home#about"
root to: 'home#index'

从中删除application_controller：

def index
  render :layout => 'application', :nothing => true
end

并yield在您的布局中添加：

<div class="container">
  <div id="view" ng-view>
    = yield
  </div>
</div>

因此，当您转到 localhost:3000 和 localhost:3000/about 时，您的 home 和 about 视图将在您的布局中呈现。

于 2013-05-22T17:39:19.083 回答