CODEWITHSUNDEEP
ruby-on-railsangularjs
Sunny Day
Sunny Day

Reputation: 543

views not showing when placed into ruby on rails app

I dropped in my angular app into a new ruby on rails app. what i'm noticing is that no views are being rendered out. i only see the layout being rendered. also i'm not getting any errors. my 2 views (home.html and about.html) and list.json are located in the public folder. please let me know if you need any more code from the app.

i have my application layout as follows:

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

i have my application controller as follows:

                class ApplicationController < ActionController::Base
              protect_from_forgery

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

I've made my JS asset pipeline as follows:

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

the toolsapp.js looks like this

                    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;
                  };
                });

Upvotes: 0

Views: 433

Answers (1)

cortex
cortex

Reputation: 5206

My suggestion for this is:

Create a home controller:

home_controller.rb

class HomeController < ApplicationController

  def index
  end

  def about
  end
end

Move your views to app/views/home folder.

Add following routes:

routes.rb

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

Remove from application_controller:

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

And add a yield in your layout:

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

So, your home and about views are gonna be rendered inside your layout when you go to localhost:3000 and localhost:3000/about.

Upvotes: 1

Related Questions