AngularJS routing and templates in Rails. How to get directions to templates?
I would like to ask for help in creating templates for AngularJS and Rails. What's the correct way to make this pattern? Looking at multiple answers here and some tutorials, I am a bit stuck.
Thing is, I can render {{header}} in my application.html.erb but not {{templateContent}} or anything from my intended template. What am I missing? And if possible, can anyone create a different angular controller routing to a different template?
My template is in:
app
-assets
|-templates
|--homepage.html.erb
Thanks in advance!
Here are my files:
//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="web_app" ng-controller="HomeCtrl">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="header">{{header}}</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
//app.js
var appModule = angular.module('web_app', ['ui.router', 'templates']);
appModule.controller('HomeCtrl', [
'$scope',
function($scope){
$scope.header = 'Hello world!';
$scope.templateContent = 'This is a content!';
}
]);
appModule.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'homepage.html'
});
$urlRouterProvider.otherwise('/home');
}]);
//application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require angular
//= require angular-ui-router
//= require angular-rails-templates
//= require app.js
//= require_tree ../templates
// Added this to my Gemfile
gem 'angular-rails-templates'
//homepage.html.erb
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
</div>
//routes.rb
root to: 'application#angular'
source to share
UPDATE: It looks like it was caused by the incompatibility of Sprockets 3.1.0 with angular-rails-templates.
This solution got my app: angular-rails-templates: no templates found
source to share
In your state, home
you have configured the controller MainCtrl
:
$stateProvider
.state('home', {
url: '/homepage',
templateUrl: '/homepage.html',
controller: 'MainCtrl'
});
And you expect what {{templateContent}}
will be displayed in the customized template homepage.html
. This is a scoping issue, you have to set the state controller to be HomeCtrl
where the correct variable is set, or add $scope.templateContent
to MainCtrl
so that it is visible in your template.
Hope it helps!
Good luck!
source to share