I'm building a Rails App with Angular serving the FrontEnd Views. Currently I'm having a problem where Angular will load both the Header and Footer into the nested Angular Views.
For Example, I have a page that lists the latest Quote Requests. On this view I have the Header followed by another Header underneath (Which is not desired), then the list of quotes, then a footer followed by another footer ( Which is also not desired).
I'm not really sure what is happening this happens once I'm logged in as a user, maybe some one could help.
Application.Html
<!DOCTYPE html>
<html>
<head>
<title>StrangeCessation</title>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application'%>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, intial-scale=1, maximum-scale=1">
</head>
<body ng-app="StrangeCessation">
<div class="section1">
<div class="heading">
<%= image_tag "HEADER.jpg", class: "himg" %>
</div>
</div>
<div class="container-fluid" ui-view="main">
<%= yield %>
<hr>
</div>
<div class="footer ">
<% if !logged_in? %>
<script>
$(document).ready(function () {
document.getElementById("lgfields").style.visibility = "hidden";
});
function switchFields() {
if(document.getElementById("lgfields").style.visibility == "hidden") {
document.getElementById("lgfields").style.visibility = "visible"
} else {
document.getElementById("lgfields").style.visibility = "hidden"
};
}
</script>
<div>
<span class="col-xs-offset-5 col-sm-offset-10">Strange Cessation</span>
<span class="loginI">
<a onclick="switchFields()"><%= image_tag "login.png", class: "loginIcon loginImage" %></a>
</span>
<div id="login" class="col-sm-offset-10">
<div id="lgfields">
<%= render partial: "sessions/new" %>
</div>
</div>
</div>
<% else %>
<span>Strange Cessation</span>
<div class="navigation">
<a ui-sref="home">Home</a>
<a ui-sref="quotes">Quotes</a>
<a ui-sref="users">Users</a>
<%= link_to "Log out", logout_path, method: "delete" %>
</div>
<% end %>
</div>
</body>
</html>
Quotes.html
<% if logged_in? %>
<div class="quotespage" >
<div class="userleftpanel col-xs-2 col-sm-3 col-sm-offset-1">
<div class="row">
<h1> Welcome <%= current_user.username %> </h1>
</div>
<div class="row">
<%= image_tag current_user.avatar %>
</div>
<div class="row">
<script>
$(document).ready(function() {
document.getElementById('settings').style.visibility = 'hidden';
document.getElementById('fullquote').style.visibility = 'hidden';
});
function switchSettings() {
if(document.getElementById('settings').style.visibility == 'hidden') {
document.getElementById('settings').style.visibility = "visible"
} else {
document.getElementById('settings').style.visibility = 'hidden'
};
}
</script>
<a onclick="switchSettings()"> Settings </a>
<div id="settings">
<%= render :partial => "users/form", :locals => { :user => @user } %>
</div>
</div>
</div>
<div class="quoteicons col-xs-8">
<div class="openquotes col-xs-2">
<h2><%= @quotes.count %> Open Jobs</h2>
</div>
<div class="newquotes col-xs-2 col-xs-offset-1">
<h2>
<% @myarray = [] %>
<% @quotes.each do |quote| %>
<% if quote.unread?(current_user) == true %>
<% @myarray.push(quote) %>
<% end %>
<% end %>
<%= @myarray.count %> New Request
</h2>
</div>
<div class="deletedquotes col-xs-2 col-offset-1">
<h2> Deleted Quotes </h2>
</div>
</div>
<div id='quotes' class="quotes col-xs-5 col-md-5" >
<div id="full" ui-view="fullquote"></div>
<div ng-repeat="quote in quotes" class="request">
<a ng-click="showQuote(quote);">
<span ng-if="quote.read == false"> *NEW*</span>
<span class="col-xs-12">Request #{{quote.id}}</span><br>
<span class="col-xs-1">{{quote.name}}</span>
<span class="col-xs-1">{{quote.email}}</span>
<span class="col-xs-4 col-xs-offset-4">{{quote.city}}, {{quote.state}}, {{quote.region}} </span>
</a>
<div ng-show="quote.visible">
<div><a ui-sref="quotes.detail({id: quote.id})" ng-click="showfullquote()" ng-init="fullquote = false">View</a>
<a ng-click="deleteQuote(quote)" style="float:left;"> Delete </a>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
Quotes.js
var app = angular.module("StrangeCessation", ['ui.router', 'ngResource']);
app.factory('Quotes', ['$resource',function($resource){
return $resource('/quotes.json', {},{
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
app.factory('Quote', ['$resource', function($resource){
return $resource('/quotes/:id.json', {}, {
show: { method: 'GET' },
update: { method: 'PUT', params: {id: '@id'} },
delete: { method: 'DELETE', params: {id: '@id'} }
});
}]);
app.factory('Users', ['$resource',function($resource){
return $resource('/users.json', {},{
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
app.factory('User', ['$resource', function($resource){
return $resource('/users/:id.json', {}, {
show: { method: 'GET' },
update: { method: 'PUT', params: {id: '@id'} },
delete: { method: 'DELETE', params: {id: '@id'} }
});
}]);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', { url: '/home', views: { 'main': { templateUrl: 'static_pages/home.html'}}})
.state('quotes', { url: '/quotes', views: {'main': { templateUrl: 'quotes.html', controller: 'QuotesCtrl'}}})
.state('quotes.detail', { url: '/:id', views: {'fullquote': { templateUrl: function($stateParams) {return `quotes/${$stateParams.id}`;}, controller: 'QuotesController'}}})
.state('quotes.detail.pdf', { url: '.pdf', views: { 'quotepdf': { controller: 'QuotesCtrl'}}})
.state('users', { url: '/users', templateUrl: 'users.html', controller: 'UsersCtrl'})
.state('/users/:id', { url: 'users_show.html', controller: 'UsersCtrl' });
// $urlRouterProvider.otherwise( function($injector, $location) {
// var $state = $injector.get("$state");
// $state.go("home");
// })
$locationProvider.html5Mode({ enabled: true, requireBase: false });
});
app.controller("QuotesCtrl", ['$scope', '$state', '$stateParams', 'Quotes', 'Quote', '$location', function($scope, $stateParams, $state, Quotes, Quote, $location ) {
$scope.quotes = Quotes.query();
$scope.quote = Quote.query();
$scope.$stateParams = $stateParams;
$scope.$state = $state;
var quotes = $scope.quotes;
var quote = $scope.quote;
$scope.logState = function() {
console.log($state);
}
var logState = $scope.logState ;
var fullquote = true;
$scope.fullquote = fullquote;
$scope.showQuote = function (quote) {
quote.visible = !quote.visible;
logState();
}
$scope.deleteQuote = function (quote) {
Quote.delete({id: quote.id})
console.log("deleted" + quote.id);
}
if($state == 'quotes.detail.pdf') {
console.log('Fire Modal');
$scope.firePdfModal = function() {
console.log('Fire Modal');
}
}
$scope.showfullquote = function () {
fullquote = false;
console.log(fullquote);
}
}]);
app.controller("QuotesController", ['Quote', '$scope', '$stateParams', QuotesController]);
function QuotesController( $scope, $stateParams, Quote ) {
$scope.currentQuoteId = $stateParams.quote.id;
};
app.controller("UsersCtrl", ['$scope', '$http', 'Users', 'User', '$location', function($scope, $http, Users, User, $location ) {
$scope.users = Users.query();
}
]);
