Wat je gaat creëren

Het werken met het Angular.js-framework is snel en de moeite waard, en in combinatie met WordPress kan het in een korte tijdsspanne een hele mooie SPA (Single-page Application) maken. Met alle CMS-besturingselementen en plug-ins die WordPress biedt, is dit een interessante kortere weg.

Het thema opzetten

We beginnen met het maken van een nieuw thema met behulp van de _tk standaard thema om te beginnen. Dit is een implementatie van de _s onderstreept thema van Automattic maar met Bootstrap van Twitter geïmplementeerd.

Pak het thema uit GitHub en plaats de bestanden in uw thema's directory:

$ cd-thema's $ wget https://github.com/Themekraft/_tk/archive/master.zip wp-content / themes / $ unzip master.zip Archive: master.zip 69acda231e2a2f8914374df81b89a7aa37d594fa create: _tk-master / inflating: _tk-master /404.php opblazen: _tk-master / archive.php opblazen: _tk-master / comments.php opblazen: _tk-master / content-page.php opblazen: _tk-master / content-single.php ... ## Hernoem de map $ mv _tk-master / angular-bootstrap $ rm -f master.zip 

Nu dat we de _tk startthema, we hebben de NPM pakketjes hoekig en hoekig-route vanuit je themamap (we gebruiken de naam hoekig-bootstrap).

$ cd wp-angular $ npm init #volg je de prompts om je package.json bestand aan te maken ... "author": "", "license": "ISC" Is dit in orde? (Ja) Ja ## Installeer de pakketten $ $ npm installeer hoekige hoekroute - opslaan 

• U moet initialiseren NPM binnen de themahoofdmap met npm init om het te maken package.json, een bestand dat NPM gebruikt om projecten te beheren.
• Door de --opslaan vlag in onze npm installeer hoekige hoek-route - opslaan commando dat we vertellen NPM om de modules toe te voegen als afhankelijkheden van ons project.
• Als we dit project in de toekomst met een andere ontwikkelaar moeten delen, hoeven deze alleen te worden uitgevoerd npm installeren in dezelfde map als de package.json om de pakketten te krijgen.

Nu heb je de pakketten in je node_modules map in uw thema. Neem een ​​kijkje in de directory en je zult verschillende js-bestanden kunnen zien. We zullen gebruiken angular.min.js voor ontwikkeling

Angular initialiseren

Opnemen angular.min.js in WordPress moeten we de functions.php bestand zodat we de scripts in WordPress kunnen plaatsen.

Zoek binnen functies.php de _tk_scripts () functie en voeg het volgende toe aan de onderkant van de functie:

// Laad hoekig wp_enqueue_script ('angularjs', get_template_directory_uri (). '/ Node_modules / angular / angular.min.js'); wp_enqueue_script ('angularjs-route', get_template_directory_uri (). '/ node_modules / angular-route / angular-route.min.js'); wp_enqueue_script ('scripts', get_stylesheet_directory_uri (). '/js/scripts.js', array ('angularjs', 'angularjs-route')); 

Je moet ook maken js / scripts.js-maak nu gewoon een leeg bestand aan.

Vernieuw nu uw thema in een browser en in ontwikkelaarshulpmiddelen die u kunt zien angular.min.js nu inbegrepen.

Partials gebruiken

Angular.js heeft een geweldig systeem om alleen een deel van HTML bij te werken. Om hiervan te profiteren en de hoekig-route module, zullen we een map moeten maken binnen het genoemde thema partials.

$ mkdir partials 

Binnen in de partials map, maak een bestand met de naam main.html voor het testen en voeg de HTML toe die je leuk vindt.

Lokaliseer het Partialspad voor WordPress

Voor Angular om de partials te kunnen laden, moeten we een volledige URL opgeven. Ik had wat problemen met het gebruik van de get_stylesheet_directory_uri () methode, maar probeer het zelf. Als het niet werkt, gebruikt u uw volledige URL.

Voeg het volgende toe aan de _tk_scripts functie hieronder waar u de angularjs en hoekig-route regels uit de laatste stap:

// Met get_stylesheet_directory_uri () wp_localize_script ('scripts', 'localized', array ('partials' => get_stylesheet_directory_uri (). '/ Wp-content / themes / angular-bootstrap / partials /')); 

Als dit niet lukt (wat op het moment van schrijven voor mij was), schrijf dan in de URL, bijv.

// Met hardcoded value wp_localize_script ('scripts', 'localized', array ('partials' => 'http://www.mydomaind.com/wp-content/themes/angular-bootstrap/partials/')); 

WP-API inschakelen

Voor Angular om met WordPress te werken, moeten we de REST-plug-in WP-API inschakelen. Dit is eenvoudig, want het is gewoon de installatie van een plug-in.

Download en installeer de plug-in vanuit git en voer het volgende uit in uw plugins dir:

git clone [email protected]: WP-API / WP-API.git json-rest-api 

Schakel vervolgens de plug-in in uw wp-admin paneel. U kunt JSON-uitvoer zien op your-wordpress.com/wp-json zodra het is ingeschakeld.

Bouw routes

Routes vormen de specifieke pagina's van je blog. We kunnen er een definiëren voor onze main.html nu gedeeltelijk - en stel het in om te worden getoond op de indexpagina van onze WordPress.

Zorg er eerst voor dat de app Angular.js wordt gedefinieerd via de ng-app attribuut, en in header.php maak het volgende:

  ng-app = "wp">   

Hier bellen we de app wp met de ng-app attribuut. Ook hebben we de baseren tag zodat Angular de JSON kan vinden die we hebben ingeschakeld WP-API.

Voeg het volgende toe aan js / scripts.js:

angular.module ('wp', ['ngRoute']) .config (function ($ routeProvider, $ locationProvider) $ routeProvider .when ('/', templateUrl: localized.partials + 'main.html', controller: 'Hoofd')) .controller ('Hoofd', functie ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /'). Success (function (res) $ scope .posts = res;);); 

Nu binnen partials / main.html Voeg dit toe:

 
   Post.title  
 
 

En eindelijk binnen index.php, direct daarna get_header.php (), voeg het Angular attribuut toe ng-view op een div label.

Vernieuw de index van uw WordPress en een lijst met opsommingen van uw blogposts wordt nu weergegeven op de startpagina.

Dit komt door de ng-controller een beroep doen op de Hoofd controller van scripts.js en de ng-view attribuut waarin wordt opgegeven waar Angular moet worden weergegeven.

Een bericht weergeven door Slug

Laten we nu de route toevoegen voor het weergeven van een WordPress-blog via de URL-slug.

Open js / scripts.js en pas het bestand aan zodat het als volgt luidt:

angular.module ('wp', ['ngRoute']) .config (function ($ routeProvider, $ locationProvider) $ routeProvider .when ('/', templateUrl: localized.partials + 'main.html', controller: 'Hoofd') .when ('/: slug', templateUrl: localized.partials + 'content.html', controller: 'Content') .andere (redirectTo: '/');) .controller ('Main', functie ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /'). Success (function (res) $ scope.posts = res;); ) .controller ('Inhoud', ['$ scope', '$ http', '$ routeParams', functie ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /? filter [naam] = '+ $ routeParams.slug) .success (functie (res) $ scope.post = res [0];);]); 

Door de Inhoud controller, kunnen we de $ http.get URI voor de JSON-berichten en geef de naaktslak als de filterparameter.

Om dit te maken gebruiken we de volgende code: $ http.get ('wp-json / posts /? filter [naam] =' + $ routeParams.slug).

Opmerking: om de /:naaktslak route werken, moet u specificeren /% Postname% / als uw permalink-structuur in de wp-admin.

Zorg ervoor dat u de content.html met het volgende:

 Post.title
  Post.content 

Als u nu de pagina vernieuwt, kunt u naar uw blogberichten navigeren via de links in de lijst met opsommingen die u in de vorige stap hebt gemaakt.

Angular Services gebruiken in WordPress

Tot nu toe hebben we gezien hoe routes kunnen worden gemaakt en kunnen werken met de wp-json API. Voordat we beginnen met het schrijven van logica, hebben we een plaats nodig om te gaan, en dat is binnen een hoek service (in dit voorbeeld gebruiken we een Fabriek service).

Maak een nieuw bestand js / services.js en voeg de volgende code toe om categorieën en berichten op te halen:

 function ThemeService ($ http) var ThemeService = categories: [], posts: [], pageTitle: 'Latest Posts:', currentPage: 1, totalPages: 1, currentUser: ; // Stel de paginatitel in de