I am working on a small blogging app. The application has a backend (made in PHP) that spits out JSONs.
These are managed and displayed by an AngularJS (version 1.7.8) frontend.
The index.html file looks like this:
<!-- Header -->
<header id="header">
<div class="logo"><a href="/">{{siteTitle}}</a></div>
</header>
<!-- Main -->
<section id="main">
<div class="inner" ng-view></div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container">
<ul class="icons">
<li><a href="{{twitter}}" target="_blank" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="{{facebook}}" target="_blank" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="{{instagram}}" target="_blank" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="mailto:{{company_email}}" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
</ul>
<ul class="icons">
<li ng-repeat="page in pages">
<a href="pages/page/{{page.id}}">{{page.title}}</a>
</li>
</ul>
</div>
<div class="copyright">
© {{companyName}}. All rights reserved. Design by <a href="https://templated.co" target="_blank">TEMPLATED</a>
</div>
</footer>
The list of posts and single post templates are displayed via the $routeProvider
angular.module('app', [
'ngRoute',
'app.controllers',
'ngSanitize'
]).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'themes/caminar/templates/posts.html',
controller: 'PostsController'
}).when('/:slug', {
templateUrl: 'themes/caminar/templates/singlepost.html',
controller: 'SinglePostController'
}).otherwise({
redirectTo: '/'
})
}])
The posts.html file:
<div class="spotlight" ng-repeat="post in posts" ng-if="$index > 0" ng-class="{ '': $even , 'alt': $odd }">
<div class="image flush">
<a href="{{post.slug}}">
<img ng-src="api/assets/img/posts/{{post.post_image}}" alt="{{post.title}}" />
</a>
</div>
<div class="inner">
<h3>{{post.title}}</h3>
<p>{{post.description}}</p>
<div ng-class="{ 'text-right': $even , 'text-left': $odd }">
<a href="{{post.slug}}" class="button special small">Read More</a>
</div>
</div>
</div>
The singlepost.html file:
<div class="content">
<h2>{{post.title}}</h2>
<p class="meta clearfix">
<span class="pull-left">By <a href="posts/byauthor/{{post.author_id}}" title="All posts by {{post.first_name}} {{post.last_name}}">{{post.first_name}} {{post.last_name}}</a></span>
<span class="pull-right">Published on {{post.created_at | dateParse | date : "MMMM dd y"}} in <a href="categories/posts/{{post.cat_id}}" title="All posts in {{post.category_name}}">{{post.category_name}}</a></span>
</p>
<div class="image fit">
<img ng-src="api/assets/img/posts/{{post.post_image}}" alt="{{post.title}}">
</div>
<div class="post-content" ng-bind-html="post.content"></div>
</div>
The application works well, but it does have a flaw: it is not SEO friendly: while inspecting the single posts shows all its rendered code correctly, viewing the source ([CTRL] + [U] in Chrome) reveals:
<section id="main">
<div class="inner" ng-view></div>
</section>
I have been unable to find a way to show all the content in the page source, not only in the Chrome inspector.
Seositecheckup.com gives me this preview:
In other words, I am looking for a server-side rendering method in AngularJS. How can I achieve that?
