Ce veți crea

Colaborarea cu cadrul Angular.js este rapidă și plină de satisfacții, iar în combinație cu WordPress se poate face o SPA cu adevărat plăcută (Application Single Page) într-o perioadă scurtă de timp. Cu toate controalele CMS și plug-inurile oferite de WordPress, aceasta este o scurtă descriere interesantă.

Configurarea temei

Vom începe să creați o nouă temă folosind _tk boilerplate temă pentru a începe cu. Aceasta este o punere în aplicare a _S subliniază tema de la Automattic, dar cu bootstrap-ul Twitter implementat.

Luați tema de la GitHub și plasați fișierele în tematică director:

$ cd temele $ wget https://github.com/Themekraft/_tk/archive/master.zip wp-content / themes / $ unzip master.zip Arhiva: master.zip 69acda231e2a2f8914374df81b89a7aa37d594fa crearea: _tk-master / inflating: _tk-master /Tmp.php inflație: _tk-master / content-page.php inflație: _tk-master / content-single.php ... ## Redenumiți directorul $ mv _tk-master / unghiul-bootstrap $ rm -f master.zip 

Acum că avem _tk starter temă, vom avea nevoie de NPM pachete unghiular și unghiular-route din interiorul directorului temă (folosim numele unghiular-bootstrap).

$ cd wp-unghiular $ npm init # urmați instrucțiunile pentru a crea fișierul package.json ... "autor": "", "license": "ISC" Este bine? (da) da ## Instalați pachetele $ $ npm pentru a instala unghiul unghiular-rută 

• Trebuie să inițializați NPM în directorul de teme cu npm init în scopul de a crea package.json, un fișier care NPM folosește pentru a gestiona proiectele.
• Prin utilizarea funcției --Salvați în pavilionul nostru npm instala unghiular unghiular - rută comanda pe care o spunem NPM pentru a adăuga modulele ca dependente de proiectul nostru.
• În viitor, dacă avem nevoie să împărtășim acest proiect cu un alt dezvoltator, va trebui doar să ruleze npm install în același director ca și package.json pentru a obține pachetele.

Acum veți avea pachetele din dvs. node_modules director în interiorul temei. Aruncați o privire în director și veți putea vedea mai multe fișiere JS. Vom folosi angular.min.js pentru dezvoltare

Inițializarea unghiului

A include angular.min.js în WordPress trebuie să modificăm functions.php astfel incat sa putem encripta scripturile din WordPress.

În interiorul funcțiilor.php, găsiți _tk_scripts () funcția și adăugați următoarele în partea de jos a funcției:

// Încărcați unghiul 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 / unghiular-rută / unghiular-route.min.js'); wp_enqueue_script ('scripts', get_stylesheet_directory_uri (). '/js/scripts.js', array ('angularjs', 'angularjs-route')); 

Va trebui, de asemenea, să creați js / scripts.js-acum creați doar un fișier gol.

Acum, reîmprospătați tema într-un browser și în instrumente de dezvoltatori pe care le veți putea vedea angular.min.js incluse acum.

Utilizarea partialelor

Angular.js are un sistem excelent pentru actualizarea doar a unei bucăți parțiale de cod HTML. Pentru a profita de acest lucru și de unghiular-route modul, va trebui să creați un director în interiorul temei numite amprente parțiale.

$ mkdir partials 

În interiorul amprente parțiale director, creați un fișier numit main.html pentru a testa și a adăuga orice HTML doriți.

Localizați calea parțial pentru WordPress

Pentru ca Angular să poată încărca partialele, trebuie să furnizăm o adresă URL completă. Am avut unele probleme cu utilizarea get_stylesheet_directory_uri () metodă, dar încercați-o pentru dvs. Dacă nu funcționează, utilizați adresa URL completă.

Adăugați următoarele la _tk_scripts funcția de mai jos în cazul în care ați adăugat angularjs și unghiular-route linii din ultimul pas:

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

Dacă acest lucru nu reușește (care la momentul scrisului a fost pentru mine), scrieți în URL, de ex.

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

Activarea WP-API

Pentru ca Angular să lucreze cu WordPress, trebuie să activați pluginul WP-API REST. Acest lucru este simplu, deoarece este doar instalarea unui plugin.

Descărcați și instalați pluginul de la git și rulați următoarele în Plugin-uri dir:

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

Apoi, activați pluginul în wp-admin panou. Veți putea vedea ieșirea JSON la your-wordpress.com/wp-json odată ce este activată.

Construirea de trasee

Rutele alcătuiesc paginile specifice ale blogului dvs. Putem defini una pentru noi main.html parcurgeți acum - și configurați-o pentru a fi afișată pe pagina index a WordPress.

Mai întâi, asigurați-vă că aplicația Angular.js este definită prin intermediul funcției ng-app atribut și în header.php efectuați următoarele:

  ng-app = "wp">   

Aici sunăm aplicația wp cu ng-app atribut. De asemenea, am setat baza astfel încât Angular să poată găsi JSON-ul în care am activat WP-API.

Adăugați următoarele la js / scripts.js:

($): $ routeProvider .when ('/', templateUrl: localized.partials + 'main.html', controler: 'Main')) .controller ('Principal', functie ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /') .posts = res;);); 

Acum înăuntru amprente parțiale / main.html adaugă asta:

 
  Post.title  
 
 

Și, în sfârșit, înăuntru index.php, imediat după get_header.php (), adăugați atributul Angular ng-view pe o div etichetă.

Reîmprospătați indexul WordPress și o listă cu gloanțe a postărilor din blog va fi afișată acum pe pagina de pornire.

Acest lucru se datorează ng-controler invocând Principal controler de la scripts.js si ng-view atribut specificând unde ar trebui să facă Angular.

Afișarea mesajului Post By Slug

Să adăugăm acum traseul pentru afișarea unui blog WordPress prin intermediul serviciului URL de conținut.

Deschis js / scripts.js și ajustați fișierul după cum urmează:

($): $ routeProvider .when ('/', templateUrl: localized.partials + 'main.html', controler: 'Main')) .when ('/: slug', templateUrl: localized.partials + 'content.html', controler: 'Content') (Funcția (res) ($ scope.posts = res;); () ) .controller ("Conținut", ['$ scope', '$ http', '$ routeParams', funcția ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /? [nume] = '+ $ routeParams.slug) .success (funcția (res) $ scope.post = res [0];);]); 

Prin adăugarea Conţinut controler, putem specifica $ http.get URI pentru posturile JSON și specificați melc ca parametru filtru.

Pentru a crea acest lucru, folosim următorul cod: $ http.get ('wp-json / posts /? filter [nume] =' + $ routeParams.slug).

Notă: Pentru a obține /:melc traseu de lucru, trebuie să specificați /% Postname% / ca structura dvs. permalink în wp-admin.

Asigurați-vă că ați setat content.html cu urmatoarele:

Post.title
 Post.content 

Acum, dacă actualizați pagina, veți putea naviga la postările dvs. de pe blog prin intermediul link-urilor din lista de gloanțe pe care ați făcut-o în pasul anterior.

Utilizarea serviciilor unghiulare în WordPress

Până acum am văzut cum să creați rute și să începeți să lucrați cu wp-JSON API-ul. Înainte de a începe să scriem orice logică avem nevoie de un loc pentru ca ea să meargă, și asta se află într-un unghiular serviciu (în acest exemplu folosim a Fabrică serviciu).

Creați un fișier nou js / services.js și adăugați următorul cod pentru a prelua categorii și postări:

 funcția ThemeService ($ http) var ThemeService = categories: [], mesaje: [], pageTitle: 'Ultimele mesaje:', currentPage: 1, totalPages: 1, currentUser: ; // Setați titlul paginii în