{"id":1190,"date":"2016-09-19T13:20:25","date_gmt":"2016-09-19T04:20:25","guid":{"rendered":"https:\/\/n8finch2024.local\/?p=1190"},"modified":"2019-06-30T07:01:29","modified_gmt":"2019-06-29T22:01:29","slug":"genesis-and-angular-adding-routing-to-posts-and-pages","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/genesis-and-angular-adding-routing-to-posts-and-pages\/","title":{"rendered":"Genesis and Angular: Adding Routing to Posts and Pages (Part 3)"},"content":{"rendered":"<p><em>This is the third post in a three part series on using Genesis and Angular. Part 1 can be read <a href=\"\/adding-angular-markup-genesis-child-theme\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>here<\/strong><\/a>, and Part 2 can be read <a href=\"\/using-angular-display-content-genesis-using-wp-rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>here<\/strong><\/a>.\u00a0<\/em><\/p>\n<p>Routing is part of the magic of web applications, and not something that we really think about when we&#8217;re developing WordPress sites since it&#8217;s basically taken care of for us in using the nav menu and full on links with page reloading. But this project was all about skipping the page load, and having a view area that will dynamically load posts and pages, an &#8220;app-like state&#8221; some might say.<\/p>\n<p>Using Genesis and Angular to display posts and pages in an app-like state wasn&#8217;t super\u00a0straightforward. While it opened a few extra cans of worms I wasn&#8217;t expecting, adding routing for both posts and pages has proven to be\u00a0super interesting, and got me digging into WP core as well to find some answers.<\/p>\n<p>Let&#8217;s review the goals of this project:<\/p>\n<p><strong>Primary objective:\u00a0<\/strong>Create a view area that will display all the contents of posts and pages without a page reload using\u00a0Genesis and Angular.<\/p>\n<p>Do this by:<\/p>\n<ol>\n<li>Adding markup to my Genesis child theme<\/li>\n<li>Fetching data with the WP REST API and Angular<\/li>\n<li>Routing the data Angular on posts and pages<\/li>\n<\/ol>\n<p>Ok, this is going to be a bit of a beast, so let&#8217;s get\u00a0truckin&#8217;&#8230;<\/p>\n<p><!--more--><\/p>\n<h2>Move Files to Assets Folder<\/h2>\n<p>The first thing we&#8217;re going to do is rearrange our file\u00a0structure a bit, so we don&#8217;t have random Angular app code and template files\u00a0all over our Genesis child theme. So, I&#8217;ve created an <code>assets<\/code>\u00a0folder in the child theme directory, and moved the template files and also the Angular app JavaScript files out of this. If you want to look ahead, <a href=\"https:\/\/github.com\/n8finch\/angular-gensis-gulp-starter\"><strong>here&#8217;s the repo<\/strong><\/a> on GitHub.<\/p>\n<p>If you want to follow along, the file structure (not including other Genesis files from the sample theme) is:<br \/>\n<script src=\"https:\/\/gist.github.com\/n8finch\/a3b321110cdd4946ea7d31797167c7c8.js\"><\/script><\/p>\n<p>All the PHP below is still going into the <code>functions.php<\/code>\u00a0file for now, but this could be moved to the <code>assets<\/code>\u00a0directory as well, to a <code>load-app.php<\/code>\u00a0file, which can be loaded from the child theme&#8217;s\u00a0<code>functions.php<\/code>\u00a0file. Totally up to you.<\/p>\n<p>Now that we&#8217;ve got the file structure in place, let&#8217;s get routing!<\/p>\n<h2>Basics of Routing<\/h2>\n<p>Routing isn&#8217;t hard to understand, it&#8217;s just hard to implement (well, not if you&#8217;re using Angular and the UI Router!). In the first part of this series, we set out our <code>ng-view<\/code>\u00a0with Genesis markup. The idea is that we want to have the view in the area where we would normally view post or\u00a0page (or any!) content. However, to get all of this updating dynamically, we&#8217;ve got to set up our controllers and routes so that if someone goes to the slug <code>my-latest-post<\/code>, the post titled &#8220;My Latest Post&#8221; shows up.<\/p>\n<p>Simple, right? Good. This allows us to manage &#8220;state&#8221;, and we&#8217;re going to use the <a href=\"https:\/\/angular-ui.github.io\/ui-router\/site\/#\/api\/ui.router\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>UI Router<\/strong><\/a> from <strong>Angular UI<\/strong> to take care of this.<\/p>\n<p>First, we&#8217;ll need to include it as a dependency in our Angular app. So, we need to enqueue the scripts (I&#8217;ve got them installed via Bower, but you can install them via zip file or CDN). You can enqueue them with the standard <code>wp_enqueue_script()<\/code>\u00a0function. Then, we want to include it as a dependency in our app in our <code>app.js<\/code>\u00a0file:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/n8finch\/6de27fecf5fadf214f03a7621c844402.js\"><\/script><\/p>\n<p>Good, now, let the fun begin. We are going to manage the routes with a <code>config()<\/code>\u00a0function, which will chain to our angular app module (make sure you see the end results below and in the GitHub repo for clarification, I&#8217;m just talking through this now).\u00a0This is what we want:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/n8finch\/fbd483555445a9f35c08558b01ae9265.js\"><\/script><\/p>\n<p>Ok, what did we do here? First, we&#8217;re injecting <code>$stateProvider, $urlRouterProvider, and $locationProvider<\/code> into our <code>config()<\/code> function. This allows us to use the methods and properties associated with these services in Angular and Angular UI to direct our routing. See the links below for more info.<\/p>\n<p>Then, we&#8217;re using the <code>$state<\/code>\u00a0provider to declare where we want our app to look when someone is at a particular URL. First, we set up the <code>otherwise()<\/code>\u00a0function, which just means that if there&#8217;s no route match, just return to this. We&#8217;ve set the otherwise default to <code>\/<\/code>, which is our homepage.<\/p>\n<p>From there, we assign state we want to the url, a controller to handle our model\u00a0and a template to handle our view. For the first state, we&#8217;re basically saying &#8220;We&#8217;re in a <code>posts<\/code>\u00a0state when the url is at the base of the application <code>\/<\/code>\u00a0, and when that&#8217;s the case, we want to use the <code>Posts<\/code>\u00a0controller to handle our model data and the <code>app-index.html<\/code>\u00a0template to handle our view.<\/p>\n<p>We&#8217;ve already looked at that mostly in the last part of this series, but that gives us our basic homepage listing of posts:<\/p>\n<p><a href=\"\/wp-content\/uploads\/2016\/08\/final-styling-fixup.jpg\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-1176\" src=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/h_690,w_905\/v1561845689\/final-styling-fixup_nobdrh.jpg\" alt=\"final styling fixup\" width=\"1024\" height=\"780\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Set Up Routing for Posts<\/h2>\n<p>Routing for posts and routing for pages is going to be very similar. Basically, whenever someone navigates to <code>the-target-post<\/code>\u00a0slug after home url slug, we want\u00a0the router to notice that this is a post, and that it should use the <code>singleView<\/code>\u00a0controller and <code>single.html<\/code>\u00a0template file. No problem.<\/p>\n<p>However, we need to do a bit of forward thinking. We&#8217;re use to having WordPress take care of the routing for us on our pages and posts, but since we&#8217;re using\u00a0Genesis\u00a0<em>and<\/em> Angular now, we&#8217;ve got to think about how to differentiate the request calls to the WP REST API. The easiest way to do this is to prefix the slug with <code>posts<\/code>\u00a0or <code>pages<\/code>\u00a0so that the router knows which controller and template to use, and that&#8217;s just what you see in the above code snippet with\u00a0state routes: <code>.state(&#039;single&#039;, { url: &#039;\/posts\/:slug\/&#039;, ...<\/code><\/p>\n<p>This means that, since the router is looking at the url to figure out where to send us, we can now direct it to the proper controller and view. Routes are similar to <code>if<\/code>\u00a0or <code>switch<\/code>\u00a0statements; &#8220;if the slug is prefixed with <code>posts<\/code>, then use the <code>singleView<\/code>\u00a0controller&#8230;&#8221; etc.<\/p>\n<p>To get our single view showing up then, we need to make sure we&#8217;re doing three things:<\/p>\n<ol>\n<li>Linking to the posts properly from our home page<\/li>\n<li>Creating the view properly for our single posts page<\/li>\n<li>Giving the controller the right data\u00a0to work with so we can get back a JSON object with our single post view.<\/li>\n<\/ol>\n<p>First, we need to make sure we&#8217;re linking properly from our <code>app-index.html<\/code>\u00a0view on our home page. To do this, we just need to make sure the <code>h2<\/code>\u00a0titles and Read More anchor links are populated with the right <code>href<\/code>. To do this, our title with look something like this: <code>href=&quot;\/posts\/{{post.slug}}\/&quot;&gt;{{post.title.rendered}}<\/code> and our Read More link will look something like this: <code>href=&quot;\/posts\/{{post.slug}}\/&quot;&gt;Read more...<\/code><\/p>\n<p>Here&#8217;s the final <code>app-index.html<\/code> view:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/n8finch\/96180a99c80c77842037af89ff647cf7.js\"><\/script><\/p>\n<p>That will link us correctly to any post that is fetched from the WP REST API to the single view.<\/p>\n<p>Second, we need to create a <code>single.html<\/code>\u00a0view for the router and controller to use. We can actually reuse a lot from our <code>app-index.html<\/code>\u00a0view, with some slight modifications. You can feel free to add or subtract to this template:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/n8finch\/a255f31192238b73f23231cb91784f8b.js\"><\/script><\/p>\n<p>As you can see, we&#8217;re using the <code>singleView<\/code>\u00a0controller in this template, so Angular knows that it should reference that controller when working with that view.<\/p>\n<p>Third, we need to set up our <code>singleView<\/code> controller\u00a0to handle our model logic. We&#8217;re basically using the same controller from <code>Posts<\/code>, but making a different API call based on the <code>posts\/<\/code>\u00a0slug. If you look on the router, you&#8217;ll see the <code>url<\/code>\u00a0property has a value of <code>&#039;posts\/:slug\/&#039;<\/code>. This means that the slug is a variable, and can be read using the <code>$stateParams<\/code>\u00a0and <code>$stateProvider<\/code>\u00a0services. You see that in the controller when we specify that we want the <code>$stateParams.slug<\/code>\u00a0property value in the <code>singleView<\/code>\u00a0controller.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/n8finch\/1f5e4e20bd499098340e4230676aad57.js\"><\/script><\/p>\n<p>You&#8217;ll also notice that in\u00a0that we are making a call to the WP REST API using a filter with the name of the slug. The request is going to the <code>posts<\/code>\u00a0endpoint and returning all posts with a slug value that matches the one being linked to from our homepage.<\/p>\n<p>Like a Highlander, there should only be one slug (JSON post object) returned.<\/p>\n<p>Phew, that&#8217;s a lot, but fear not! We&#8217;re basically doing the same thing with Pages, only with a slight twist&#8230;<\/p>\n<h2>Set Up Routing for Pages<\/h2>\n<p>The idea for routing pages is basically the same:<\/p>\n<ol>\n<li>Linking to the page\u00a0properly from our home page or nav menu<\/li>\n<li>Creating the view properly for our pages<\/li>\n<li>Giving the controller the right data\u00a0to work with so we can get back a JSON object with our page\u00a0view.<\/li>\n<\/ol>\n<p>Now, we can see that we already have a problem linking to pages since we&#8217;re currently not controlling the output for our menus, and we&#8217;re probably not including pages in our posts that we can link to. Remember: we&#8217;re using a prefixed slug to navigate to posts and pages. That means that we need to modify the links in the nav menu to bend them to our will.<\/p>\n<p>How do we do that?<\/p>\n<p>After a little research and digging around in WP core, <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_setup_nav_menu_item\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>I found a filter we can use<\/strong><\/a> to change the links in the menu.\u00a0By default, WordPress will return all menu items as full links, for example : <code>https:\/\/example.com\/about-page<\/code>. However, we want to remove the base url, and add <code>pages<\/code>\u00a0to the front, so the link on the nav menu will be simply <code>\/pages\/about-page\/<\/code>.<\/p>\n<p>Here&#8217;s the filter I used to change the nav menu link items:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/n8finch\/d093199f4abecdc146b74dc1ff5a87de.js\"><\/script><\/p>\n<p>Pretty cool right? So, we&#8217;ve got our linking done, and now, steps two and three are easy and basically the same as before.<\/p>\n<p>Create the page view:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/n8finch\/308d65746b6973597e0ec3b38115ff6c.js\"><\/script><\/p>\n<p>Create the controller:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/n8finch\/78f4802ce3749ad6e3db2e491c5c3463.js\"><\/script><\/p>\n<p>Excellent, all the pieces are in play, we&#8217;ve just got to talk about one more bit.<\/p>\n<h2>To Hash or Not to Hash<\/h2>\n<p>By default, Angular will &#8220;hash&#8221; your urls, meaning that it will prefix everything with a <code>#<\/code>. This was the first step in using browser history and linking in web apps a few years ago. Actually, you can still see this in your Gmail if you&#8217;re using the web app, you can navigate to your Inbox, Starred, etc. and you&#8217;ll see <code>#inbox<\/code>, <code>#starred<\/code>, etc. in the url.<\/p>\n<p>I don&#8217;t really like these, so I&#8217;ve added the <code>$locationProvider.html5Mode(true);<\/code> in the router above to turn off the hashing.<\/p>\n<p>If you do that, you also need to a the <code><\/code> to your file. Since we&#8217;re using Genesis and Angular together, I&#8217;ve\u00a0hooked that into the <code>wp_head<\/code>:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/n8finch\/8ffd3b452a28756d25710817da349a4c.js\"><\/script><\/p>\n<p>And now, everything should be working. You should be able to\u00a0display all the contents of posts and pages without a page reload using\u00a0Genesis and Angular:<\/p>\n<p><a href=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/v1561845686\/Angular-app-in-Genesis1_bxaliw.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-1222\" src=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/v1561845686\/Angular-app-in-Genesis1_bxaliw.gif\" alt=\"angular-app-in-genesis1\" width=\"870\" height=\"643\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>As you can see in the gif, there&#8217;s no page reload, and we can navigate with posts on the main page and page links in the menu. You can see the final code <a href=\"https:\/\/github.com\/n8finch\/angular-gensis-gulp-starter\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>here on GitHub<\/strong><\/a>.<\/p>\n<p style=\"text-align: center;\"><strong>Mission accomplished.<\/strong><\/p>\n<h2>Why I&#8217;m Stopping Here<\/h2>\n<p>There is still plenty to work to do here, but the primary objective of creating a view for posts and pages with no reload is complete. Angular is a\u00a0<strong><em>massive<\/em><\/strong> framework, and it&#8217;s going to take a while to explore. Also, there are a few other reasons for stopping here&#8230;<\/p>\n<p><strong>Leaving Angular 1 for Angular 2: <\/strong>Since I began my dive into Angular, Angular 2 has been released, and there won&#8217;t be any more development on Angular 1. This example has been using Angular 1. Angular 2 is sufficiently different that I&#8217;ll need to go ahead and start re-learning a lot of what I&#8217;ve already done. It is also where all the new development will be happening. So, I&#8217;m going to set Angular 1\u00a0aside. I might rebuild this in the future with Angular 2, but I also might use something a little lighter like <a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Vue.js<\/strong><\/a><\/p>\n<p><strong>Exploring the WP REST API further:\u00a0<\/strong>There&#8217;s a ton that the WP REST API can do, and this is all scratching the surface. I&#8217;ve learned how to create my own endpoints, fetch general and specific data, and a whole bunch of other stuff not included in this series of posts. I&#8217;ll be working on a couple plugins that use the WP REST API to CRUD\u00a0data as well. More on that later.<\/p>\n<p><strong>All the little quirks that com along with an app-like state:<\/strong> There are several issues with running an app on top of WordPress, not least of which is re-organizing or re-wiring plugins and core functionality to suit the needs of the app. We saw that with filtering the page links in the nav menu to properly route to our templates and controllers. Currently, that&#8217;s beyond the scope of this project. I also don&#8217;t have a specific use case for it yet. So, changing this around will need to wait.<\/p>\n<p>Basically, while this is a great starting point for an Angular 1.x and Genesis theme, I&#8217;m not going to be implementing it anytime soon in production, and that&#8217;s ok.<\/p>\n<p>This has been fun, though! I learned a lot, I feel like I&#8217;ve made progress as a front-end developer, and I can feel good about moving on to working with Angular 2 and custom WordPress plugins.<\/p>\n<p>Cheers!<\/p>\n<p>&nbsp;<\/p>\n<h3>Helpful Links<\/h3>\n<p><a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_setup_nav_menu_item\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>developer.wordpress.org\/reference\/hooks\/wp_setup_nav_menu_item<\/strong><\/a><\/p>\n<p><a href=\"https:\/\/angular-ui.github.io\/ui-router\/site\/#\/api\/ui.router\"><strong>angular-ui.github.io\/ui-router\/site\/#\/api\/ui.router<\/strong><\/a><\/p>\n<p><strong><a href=\"https:\/\/docs.angularjs.org\/api\/ng\/provider\/$locationProvider\" target=\"_blank\" rel=\"noopener noreferrer\">docs.angularjs.org\/api\/ng\/provider\/$locationProvider<\/a><\/strong><\/p>\n<p><a href=\"https:\/\/knowthecode.io\/docx\/wordpress\/apply_filters\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>knowthecode.io\/docx\/wordpress\/apply_filters<\/strong><\/a><\/p>\n<p><a href=\"https:\/\/knowthecode.io\/docx\/wordpress\/add_filter\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>knowthecode.io\/docx\/wordpress\/add_filter<\/strong><\/a><\/p>\n<p><a href=\"https:\/\/deliciousbrains.com\/creating-a-wordpress-theme-using-the-rest-api-and-vue-js\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>deliciousbrains.com\/creating-a-wordpress-theme-using-the-rest-api-and-vue-js<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the third post in a three part series on using Genesis and Angular. Part 1 can be read here, and Part 2 can be read here.\u00a0 Routing is part of the magic of web applications, and not something that we really think about when we&#8217;re developing WordPress sites since it&#8217;s basically taken care [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[23,1,8],"tags":[24,25,20],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Genesis and Angular: Adding Routing to Posts and Pages (Part 3) | Nate Finch<\/title>\n<meta name=\"description\" content=\"Using Genesis and Angular together is a ton of fun! In this post, I show how you can route correctly, bringing Genesis and Angular together.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Genesis and Angular: Adding Routing to Posts and Pages (Part 3) | Nate Finch\" \/>\n<meta property=\"og:description\" content=\"Using Genesis and Angular together is a ton of fun! In this post, I show how you can route correctly, bringing Genesis and Angular together.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/\" \/>\n<meta property=\"og:site_name\" content=\"Nate Finch\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-19T04:20:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-29T22:01:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/Genesis-and-Angular_ygyahh.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nate\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@n8finch\" \/>\n<meta name=\"twitter:site\" content=\"@n8finch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nate\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/\"},\"author\":{\"name\":\"Nate\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"headline\":\"Genesis and Angular: Adding Routing to Posts and Pages (Part 3)\",\"datePublished\":\"2016-09-19T04:20:25+00:00\",\"dateModified\":\"2019-06-29T22:01:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/\"},\"wordCount\":2236,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"keywords\":[\"angular\",\"genesis\",\"web development\"],\"articleSection\":[\"Angular\",\"Blog\",\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/\",\"url\":\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/\",\"name\":\"Genesis and Angular: Adding Routing to Posts and Pages (Part 3) | Nate Finch\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch.local\/#website\"},\"datePublished\":\"2016-09-19T04:20:25+00:00\",\"dateModified\":\"2019-06-29T22:01:29+00:00\",\"description\":\"Using Genesis and Angular together is a ton of fun! In this post, I show how you can route correctly, bringing Genesis and Angular together.\",\"breadcrumb\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/n8finch.local\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Genesis and Angular: Adding Routing to Posts and Pages (Part 3)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/n8finch.local\/#website\",\"url\":\"https:\/\/n8finch.local\/\",\"name\":\"Nate Finch\",\"description\":\"All the things, keeping it clever...&#x1f913;\",\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/n8finch.local\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\",\"name\":\"Nate\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"contentUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"width\":796,\"height\":792,\"caption\":\"Nate\"},\"logo\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Genesis and Angular: Adding Routing to Posts and Pages (Part 3) | Nate Finch","description":"Using Genesis and Angular together is a ton of fun! In this post, I show how you can route correctly, bringing Genesis and Angular together.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/","og_locale":"en_US","og_type":"article","og_title":"Genesis and Angular: Adding Routing to Posts and Pages (Part 3) | Nate Finch","og_description":"Using Genesis and Angular together is a ton of fun! In this post, I show how you can route correctly, bringing Genesis and Angular together.","og_url":"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/","og_site_name":"Nate Finch","article_published_time":"2016-09-19T04:20:25+00:00","article_modified_time":"2019-06-29T22:01:29+00:00","og_image":[{"width":900,"height":500,"url":"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/Genesis-and-Angular_ygyahh.jpg","type":"image\/jpeg"}],"author":"Nate","twitter_card":"summary_large_image","twitter_creator":"@n8finch","twitter_site":"@n8finch","twitter_misc":{"Written by":"Nate","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/#article","isPartOf":{"@id":"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/"},"author":{"name":"Nate","@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"headline":"Genesis and Angular: Adding Routing to Posts and Pages (Part 3)","datePublished":"2016-09-19T04:20:25+00:00","dateModified":"2019-06-29T22:01:29+00:00","mainEntityOfPage":{"@id":"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/"},"wordCount":2236,"commentCount":4,"publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"keywords":["angular","genesis","web development"],"articleSection":["Angular","Blog","Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/","url":"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/","name":"Genesis and Angular: Adding Routing to Posts and Pages (Part 3) | Nate Finch","isPartOf":{"@id":"https:\/\/n8finch.local\/#website"},"datePublished":"2016-09-19T04:20:25+00:00","dateModified":"2019-06-29T22:01:29+00:00","description":"Using Genesis and Angular together is a ton of fun! In this post, I show how you can route correctly, bringing Genesis and Angular together.","breadcrumb":{"@id":"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/n8finch-site.site.strattic.io\/genesis-and-angular-adding-routing-to-posts-and-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/n8finch.local\/"},{"@type":"ListItem","position":2,"name":"Genesis and Angular: Adding Routing to Posts and Pages (Part 3)"}]},{"@type":"WebSite","@id":"https:\/\/n8finch.local\/#website","url":"https:\/\/n8finch.local\/","name":"Nate Finch","description":"All the things, keeping it clever...&#x1f913;","publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/n8finch.local\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce","name":"Nate","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/","url":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","contentUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","width":796,"height":792,"caption":"Nate"},"logo":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1190"}],"collection":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/comments?post=1190"}],"version-history":[{"count":31,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1190\/revisions"}],"predecessor-version":[{"id":1835,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1190\/revisions\/1835"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media\/1118"}],"wp:attachment":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media?parent=1190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/categories?post=1190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/tags?post=1190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}