Hva du skal skape

Arbeidet med Angular.js-rammen er rask og givende, og kombinert med WordPress kan det skape et veldig hyggelig SPA (Enkelt søknad) på kort tid. Med alle CMS kontrollene og plugins WordPress tilbyr, er dette et interessant short-cut.

Sette opp temaet

Vi vil begynne å lage et nytt tema ved å bruke _tk boilerplate tema til å begynne med. Dette er en implementering av _s understreker tema fra Automattic, men med Twitter Bootstrap implementert.

Ta tak i temaet fra GitHub, og legg filene i din temaer katalogen:

$ cd-temaer $ wget https://github.com/Themekraft/_tk/archive/master.zip wp-content / themes / $ unzip master.zip Arkiv: master.zip 69acda231e2a2f8914374df81b89a7aa37d594fa opprette: _tk-master / inflating: _tk-master /404.php oppblåsing: _tk-master / archive.php oppblåsing: _tk-master / comments.php oppblåsing: _tk-master / content-page.php oppblåsing: _tk-master / content-single.php ... ## Gi nytt navn The Directory $ mv _tk-master / angular-bootstrap $ rm -f master.zip 

Nå som vi har _tk starter tema, vil vi trenge NPM pakker vinkel og vinkel-rute fra innsiden din tema katalog (vi bruker navnet vinkel-bootstrap).

$ cd wp-vinkel $ npm init #follow beskjedene for å lage din package.json-fil ... "forfatter": "", "lisens": "ISC" Er dette ok? (ja) ja ## Installer pakkene $ $ npm installer kantet vinkelrute - lagre 

• Du må initialisere NPM innenfor temaet katalog med npm init for å opprette package.json, en fil som NPM bruker til å administrere prosjekter.
• Ved å bruke --lagre flagg i vår npm installer vinklet vinkelrute - lagre kommando vi forteller NPM å legge til modulene som avhengigheter til prosjektet vårt.
• I fremtiden, hvis vi trenger å dele prosjektet med en annen utvikler, trenger de bare å løpe npm installasjon i samme katalog som package.json for å få pakkene.

Nå har du pakkene i din node_modules katalog inni temaet ditt. Ta en titt i katalogen, og du vil kunne se flere js-filer. Vi skal bruke angular.min.js for utvikling

Initialiserer vinkel

Å inkludere angular.min.js inne i WordPress må vi endre functions.php fil slik at vi kan skrive inn skriptene i WordPress.

Inne i funksjoner.php, finn _tk_scripts () funksjon og legg til følgende til bunnen av funksjonen:

// Load angular wp_enqueue_script ('angularjs', get_template_directory_uri (). '/ Node_modules / angular / angular.min.js'); wp_enqueue_script ('angularjs-rute', 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-rute')); 

Du må også opprette JS / scripts.js-For nå bare opprett en tom fil.

Oppdater nå temaet ditt i en nettleser, og i utviklerverktøyene vil du kunne se angular.min.js inkludert nå.

Bruke Partials

Angular.js har et flott system for bare å oppdatere et delvis stykke HTML. Å dra nytte av dette og vinkel-rute modul, må vi opprette en katalog inne i temaet som heter partials.

$ mkdir partials 

Inne i partials katalog, opprett en fil som heter main.html for å teste, og legge til hva HTML du liker inne.

Lokaliser Partial-banen for WordPress

For Angular å kunne laste delene, må vi gi en fullstendig URL. Jeg hadde noen problemer med å bruke get_stylesheet_directory_uri () metode, men prøv det selv. Hvis det ikke virker, bruk din fullstendige nettadresse.

Legg til følgende i _tk_scripts funksjonen nedenfor hvor du la til angularjs og vinkel-rute linjer fra siste trinn:

// Med get_stylesheet_directory_uri () wp_localize_script ('skript', 'lokalisert', array ('partials' => get_stylesheet_directory_uri (). '/ Wp-innhold / temaer / vinkelstartstrap / partisjoner /')); 

Hvis dette mislykkes (som i skrivende stund var det for meg), skriv inn URL-adressen, f.eks.

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

Aktiverer WP-API

For Angular å jobbe med WordPress, må vi aktivere WP-API REST plugin. Dette er enkelt, da det bare er installasjonen av et plugin.

Last ned og installer pluginet fra git, og kjør følgende i din plugins dir:

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

Aktiver deretter pluginet i din wp-admin panel. Du vil kunne se JSON-utdata på your-wordpress.com/wp-json når den er aktivert.

Bygge ruter

Ruter utgjør de spesifikke sidene i bloggen din. Vi kan definere en for vår main.html Del nå - og konfigurer den til å bli vist på indekssiden til vår WordPress.

Først må du kontrollere at Angular.js-appen er definert via ng-app attributt og i header.php gjør følgende:

  ng-app = "wp">   

Her ringer vi appen wp med ng-app Egenskap. Også vi satte utgangspunkt merk så at Angular kan finne JSON vi har aktivert i WP-API.

Legg til følgende til JS / scripts.js:

angular.module ('wp', ['ngRoute']) .config (funksjon ($ routeProvider, $ locationProvider) $ routeProvider .when ('/', templateUrl: localized.partials + 'main.html' 'Main')) .controller ('Main', funksjon ($ omfang, $ http, $ routeParams) $ http.get ('wp-json / posts /'). Suksess .posts = res;);); 

Nå inne partials / main.html Legg til dette:

 
  Post.title  
 
 

Og til slutt inne index.php, rett etter get_header.php (), legg til Angular-attributtet ng-syn på en div stikkord.

Oppdater indeksen til WordPress, og en kolliste med blogginnleggene dine vil nå bli vist på hjemmesiden.

Dette skyldes ng-kontrolleren påkalle Hoved kontrolleren fra scripts.js og ng-syn Attributt angir hvor kantet skal gjengis.

Viser et innlegg etter slug

La oss legge til ruten nå for å vise en WordPress-blogg via URL-sluggen.

Åpen JS / scripts.js og juster filen slik at den leser som følger:

angular.module ('wp', ['ngRoute']) .config (funksjon ($ routeProvider, $ locationProvider) $ routeProvider .when ('/', templateUrl: localized.partials + 'main.html' 'Main'). Når ('/: slug', templateUrl: localized.partials + 'content.html', kontroller: 'Innhold') .Oversikt (redirectTo: '/';) .controller ('Main', funksjon ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /'). Suksess (funksjon (res) $ scope.posts = res;); ) .controller ('Innhold', ['$ scope', '$ http', '$ routeParams', funksjon ($ omfang, $ http, $ routeParams) $ http.get ('wp-json / posts /? filter [name] = '+ $ routeParams.slug) .success (funksjon (res) $ scope.post = res [0];);]); 

Ved å legge til Innhold kontrolleren, kan vi spesifisere $ http.get URI for JSON innleggene, og angi slug som filterparameter.

For å opprette dette bruker vi følgende kode: $ http.get ('wp-json / posts /? filter [name] =' + $ routeParams.slug).

Merk: For å få tak i /: Slug ruteplanlegging, du må spesifisere /% Postname% / som din permalinkstruktur i wp-admin.

Pass på å stille inn content.html med følgende:

Post.title
 Post.content 

Nå, hvis du oppdaterer siden, vil du kunne navigere til blogginnleggene dine via koblingene i punktlisten du gjorde i forrige trinn.

Bruke kantetjenester i WordPress

Så langt har vi sett hvordan å skape ruter og begynne å jobbe med wp-json API. Før vi begynner å skrive noen logikk trenger vi et sted for det å gå, og det er innenfor en kantet service (i dette eksemplet bruker vi en Fabrikk service).

Opprett en ny fil JS / services.js og legg til følgende kode for å hente kategorier og innlegg:

 funksjon ThemeService ($ http) var ThemeService = kategorier: [], innlegg: [], sideTitle: 'Siste innlegg:', currentPage: 1, totalPages: 1, currentUser: ; // Sett sidetittelen i