Accentsconagua

Création d'applications d'une seule page avec WordPress et Angular.js

Code
Share
Ce que vous allez créer

Travailler avec le framework Angular.js est rapide et enrichissant. Combiné à WordPress, il permet de créer un très beau SPA (application d’une page) en un laps de temps réduit. Avec tous les contrôles et plugins CMS proposés par WordPress, c’est un raccourci intéressant.

Mise en place du thème

Nous allons commencer à créer un nouveau thème en utilisant le _tk thème passe-partout pour commencer. Ceci est une mise en œuvre de la _s souligne le thème d'Automattic mais avec le Bootstrap de Twitter implémenté.

Prenez le thème de GitHub et placez les fichiers dans votre des thèmes annuaire:

$ cd thèmes $ wget https://github.com/Themekraft/_tk/archive/master.zip contenu_wp / thèmes / $ unzip maître.zip Archive: master.zip 69acda231e2f8914374df81b89a7aa37d594fa creation: _tk-master / _instantané /404.php gonfler: _tk-master / archive.php gonfler: _tk-master / comments.php gonfler: _tk-master / content-page.php gonfler: _tk-master / content-single.php… ## Renommer le répertoire $ mv _tk-master / angular-bootstrap $ rm -f master.zip

Maintenant que nous avons le _tk thème de démarrage, nous aurons besoin de la npm paquets angulaire et voie angulaire depuis votre répertoire de thème (nous utilisons le nom bootstrap angulaire).

$ cd wp-angular $ npm init # respectez les invites pour créer votre fichier package.json… "author": "", "license": "ISC" Est-ce correct? (oui) oui ## Installer les paquets $ $ npm installer angular angular-route --save
  • Vous devez initialiser npm dans le répertoire des thèmes avec npm init afin de créer le package.json, un fichier qui npm utilise pour gérer des projets.
  • En utilisant le --enregistrer drapeau dans notre npm install angular angular-route --save commande nous disons npm ajouter les modules en tant que dépendances à notre projet.
  • À l'avenir, si nous devons partager ce projet avec un autre développeur, ils n'auront plus qu'à exécuter npm installer dans le même répertoire que le package.json afin d'obtenir les colis.

Maintenant, vous aurez les paquets dans votre node_modules répertoire dans votre thème. Jetez un coup d'oeil dans le répertoire et vous pourrez voir plusieurs fichiers js. Nous allons utiliser angular.min.js Pour le developpement

Initialisation angulaire

Inclure angular.min.js à l'intérieur de WordPress, nous devons modifier la functions.php fichier afin que nous puissions mettre en file d'attente les scripts dans WordPress.

Dans functions.php, trouvez le _tk_scripts () fonction et ajoutez ce qui suit au bas de la fonction:

// Charge angular 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'));

Vous aurez également besoin de créer js / scripts.js-pour l'instant il suffit de créer un fichier vierge.

Maintenant, actualisez votre thème dans un navigateur et dans les outils de développement, vous pourrez voir angular.min.js inclus maintenant.

Utilisation de partiels

Angular.js a un excellent système pour mettre à jour seulement une partie de HTML. Pour profiter de cela et de la voie angulaire module, nous devrons créer un répertoire dans le thème nommé partiels.

$ mkdir partiels

À l'intérieur de partiels répertoire, créer un fichier nommé main.html à des fins de test, et ajoutez le code HTML que vous aimez à l'intérieur.

Localiser le chemin des partiels pour WordPress

Pour qu'Angular puisse charger les partiels, nous devons fournir une URL complète. J'ai eu du mal à utiliser le get_stylesheet_directory_uri () méthode, mais essayez-le pour vous-même. Si cela ne fonctionne pas, utilisez votre URL complète.

Ajouter ce qui suit au _tk_scripts fonction ci-dessous où vous avez ajouté le angularjs et voie angulaire lignes de la dernière étape:

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

Si cela échoue (comme ce fut le cas pour moi au moment de la rédaction), écrivez dans l'URL, par exemple.

// Avec la valeur codée en dur wp_localize_script ('scripts', 'localized', array ('partials' => 'http://www.mydomaind.com/wp-content/themes/angular-bootstrap/partials/'));

Activer WP-API

Pour que Angular fonctionne avec WordPress, nous devons activer le plug-in WP-API REST. C'est simple, il ne s'agit que de l'installation d'un plugin.

Téléchargez et installez le plugin à partir de git et lancez le programme suivant dans votre plugins dir:

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

Puis activez le plugin dans votre wp-admin panneau. Vous pourrez voir la sortie JSON à l'adresse your-wordpress.com/wp-json une fois activé.

Routes de construction

Les itinéraires constituent les pages spécifiques de votre blog. Nous pouvons en définir un pour notre main.html partiel maintenant et configurez-le pour qu'il soit affiché sur la page d'index de notre WordPress.

Tout d’abord, assurez-vous que l’application Angular.js est définie via le ng-app attribut, et dans header.php faire ce qui suit:

  ng-app = "wp">

Ici, nous appelons l'application wp avec le ng-app attribut. Nous avons également mis le base balise afin que Angular puisse trouver le JSON que nous avons activé dans WP-API.

Ajouter ce qui suit à js / scripts.js:

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

Maintenant à l'intérieur partiels / main.html Ajoute ça:

     
  •   titre de l'article  
    •

Et enfin à l'intérieur index.php, directement après get_header.php (), ajouter l'attribut angulaire ng-view sur un div étiquette.

Actualisez l'index de votre WordPress, et une liste à puces de vos articles de blog sera maintenant affichée sur la page d'accueil.

Ceci est dû à la ng-contrôleur invoquant le Principale contrôleur de scripts.js et le ng-view attribut spécifiant où Angular doit rendre.

Affichage d'un message par slug

Ajoutons maintenant la route pour l'affichage d'un blog WordPress via l'URLLug.

Ouvrir js / scripts.js et ajustez le fichier pour qu'il se lise comme suit:

angular.module ('wp', ['ngRoute']) .config (function ($ routeProvider, $ locationProvider) $ routeProvider .when ('/', templateUrl: localized.partials + 'main.html', contrôleur: 'Main') .when ('/: slug', templateUrl: localized.partials + 'content.html', contrôleur: 'Content') .otherwise (redirectTo: '/');) .controller ('Main', fonction ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /'). Success (function (res) $ scope.posts = res;); ) .controller ('Contenu', ['$ scope', '$ http', '$ routeParams', fonction ($ scope, $ http, $ routeParams) $ http.get ('wp-json / posts /? filter [name] = '+ $ routeParams.slug) .success (fonction (res) $ scope.post = res [0];)));

En ajoutant le Contenu contrôleur, nous pouvons spécifier le $ http.get URI pour les publications JSON, et spécifiez le limace comme paramètre de filtre.

Pour créer cela, nous utilisons le code suivant: $ http.get ('wp-json / posts /? filter [name] =' + $ routeParams.slug).

Remarque: pour obtenir le /:limace route fonctionne, vous devez spécifier /%après le nom%/ comme votre structure permalien dans le wp-admin.

Assurez-vous de régler le content.html avec ce qui suit:

titre de l'article
 Publier un contenu

Maintenant, si vous actualisez la page, vous pourrez accéder aux articles de votre blog via les liens de la liste à puces que vous avez créée à l'étape précédente..

Utilisation de services angulaires dans WordPress

Jusqu'ici, nous avons vu comment créer des itinéraires et commencer à travailler avec le wp-json API. Avant de commencer à écrire une logique, nous avons besoin d’un endroit où aller, et c’est dans un angle angulaire. un service (dans cet exemple, nous utilisons un Usine un service).

Créer un nouveau fichier js / services.js et ajoutez le code suivant pour récupérer des catégories et des publications:

 function ThemeService ($ http) var ThemeService = catégories: [], posts: [], pageTitle: 'Derniers messages:', currentPage: 1, totalPages: 1, currentUser: ; // Définit le titre de la page dans le  fonction de balise _setTitle (documentTitle, pageTitle) document.querySelector ('title'). innerHTML = documentTitle + '| AngularJS Demo Theme '; ThemeService.pageTitle = pageTitle;  // Configuration de la fonction de pagination _setArchivePage (posts, page, en-têtes) ThemeService.posts = posts; ThemeService.currentPage = page; ThemeService.totalPages = en-têtes ('X-WP-TotalPages');  ThemeService.getAllCategories = function () // S'ils sont déjà définis, vous n'avez pas besoin de les récupérer à nouveau if (ThemeService.categories.length) return;  // Récupère les termes de la catégorie depuis wp-json return $ http.get ('wp-json / taxonomies / catégorie / termes'). Success (function (res) ThemeService.categories = res;); ; ThemeService.getPosts = fonction (page) return $ http.get ('wp-json / posts /? Page =' + page + '& filter [posts_per_page] = 1'). Success (fonction (res, status, en-têtes)  ThemeService.posts = res; page = parseInt (page); // Vérifie la validité d'une variable de page si (isNaN (page) || page> en-têtes ('X-WP-TotalPages')) _setTitle ('Page non trouvée', 'Page non trouvée'); else // Gestion de la pagination si (page> 1) _setTitle ('Articles sur la page' + page, 'Articles sur la page' + page + ':'); 1setTitle ( 'Accueil', 'Derniers messages:'); _setArchivePage (res, page, en-têtes);); ; return ThemeService;  // Finalement, enregistrez le service app.factory ('ThemeService', ['$ http', ThemeService]); </pre> <p>Ceci est une configuration d'usine de base, où nous avons deux fonctions internes <code>_setTitle</code> et <code>_setArchivePage</code>. Ces méthodes s'appellent de <code>getPosts</code> et <code>getCatégories</code> pour mettre à jour le titre de la page en cours et définir un nombre entier interne pour savoir quel numéro de page nous sommes en train d'examiner.</p> <p>Nous devrons commencer à utiliser le <code>ngSanitize</code> module pour analyser les entrées à notre service. Installez ceci avec <code>npm</code> en tant que tel dans votre répertoire de thème:</p> <pre>$ npm install angular-sanitize --save </pre> <p>le <code>ThèmeService</code> est juste un objet JavaScript de base qui effectue une recherche de catégorie via <code>$ http.get</code>, comme le <code>getPosts</code> méthode. Nous allons maintenant informer notre contrôleur de ce service. Ouvrir <code>scripts.js</code> et modifier le contrôleur pour être au courant <code>ThèmeService</code>.</p> <pre>// Contrôleur principal app.controller ('Main', ['$ scope', '$ http', 'ThemeService', function ($ scope, $ http, ThemeService) // Récupère les catégories de ThemeService ThemeService.getAllCategories (); // Obtient la première page de publications de ThemeService ThemeService.getPosts (1); $ scope.data = ThemeService;]); </pre> <p>N'oubliez pas d'activer le <code>angulaire-assainir</code> module à l'intérieur de votre <code>scripts.js</code> également sur la première ligne avec:</p> <pre>var app = angular.module ('wp', ['ngRoute', 'ngSanitize']); </pre> <p>Enfin, vous devrez vous assurer que <code>js / services.js</code> est mis en file d'attente dans WordPress ainsi que le <code>angulaire-assainir</code> module. Faites-le en modifiant le <code>functions.php</code> déposer et ajouter ce qui suit avant la <code>wp_localize_script</code> appel:</p> <pre>wp_enqueue_script ('angularjs-sanitize', get_stylesheet_directory_uri (). '/node_modules/angular-sanitize/angular-sanitize.min.js'); wp_enqueue_script ('theme-service', get_stylesheet_directory_uri (). '/js/services.js'); </pre> <p>Maintenant nous devrons mettre à jour le <code>main.html</code> partiel pour afficher ces catégories fournies par ThemeService.</p> <pre><h1>Les catégories</h1> <ul> <li ng-repeat="category in data.categories"> <span ng-if="current_category_id && category.ID == current_category_id" ng-bind-html="category.name"></span>  </li> </ul> <p>data.pageTitle</p> <ul> <li ng-repeat="post in data.posts">  <img ng-src="post.featured_image_thumbnail_url" alt="post.featured_image.title.rendered" /> <div ng-bind-html="post.excerpt.rendered"></div> </li> </ul> </pre> <p>Vous pourrez maintenant voir vos articles et catégories affichés sur votre page d'accueil via <code>ng-view</code> utilisant un <code>usine</code> service pour Angular. L'avantage de ceci est que tous les composants auront les données à leur disposition. Donc, nous pouvons maintenant partager les catégories objet entre tous nos contrôleurs dans nos routes.</p> <h2>Aller plus loin</h2> <p>Maintenant que nous avons un service configuré pour notre thème, nous pouvons continuer à développer la couche de données et incorporer le style Bootstrap dans le code HTML renvoyé..</p> <p>Les possibilités maintenant que Angular est configuré dans votre thème sont vraiment infinies, et en consultant le référentiel fourni, vous aurez un point de départ rapide pour créer des applications WordPress d'une seule page compatibles Angular et Bootstrap..</p>


<div class="rek-block">
	<center>	
			<ins class="adsbygoogle"
			style="display:inline-block;width:580px;height:400px"
			data-ad-client="ca-pub-3810161443300697"
			data-ad-slot="9434875811"></ins>
	   <script>
	   (adsbygoogle = window.adsbygoogle || []).push({});
	   </script>
	</center>
</div>


<div class="h-alltags">
<a href="articles/code">Code</a>
</div>

		</div>

</div>
</div>




</div>


<div class="next_posts clearfix">
	<div class="n_post">
        
		<div class="next_posts-h1 left_nh1"><a href="/articles/music/creating-skrillex-style-tech-basslines-in-ni-massive-adjusting-parameters.html">Création de lignes de basse Tech Style Skrillex dans NI Massive - Ajustement des paramètres</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_24/creating-skrillex-style-tech-basslines-in-ni-massive-adjusting-parameters_3.jpg');"></div>	
			
        				
	</div>		
	<div class="n_post">
        
		<div class="next_posts-h1 right_nh1"><a href="/articles/design/creating-simple-origami-style-typography-in-illustrator.html">Création d'une typographie de style origami simple dans Illustrator</a></div>
			
			<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_1/creating-simple-origami-style-typography-in-illustrator_23.jpg');"></div>
					
        
	</div>
</div>


<footer>
	<div class="container">
			<div class="footer-langs">
					<ul class="site-langs-list">
							<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>					
							<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
							<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
							<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
							<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
							<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
							<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
							<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
					</ul>
				</div>
				
			<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
			<div class="footer-text">
				Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
			</div>
	</div>
</footer>

<div class="search">
	<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
	<div class="modal">
			<div class="modal-content">
							<span class="close-button">×</span>

							<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
							<ul class="searchli" id="results-container"></ul>

						</div>
</div>


<link rel="stylesheet" href="css/flags.css">

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
  "popup": {
	"background": "#edeff5",
	"text": "#838391"
  },
  "button": {
	"background": "#4b81e8"
  }
},
"theme": "classic",
"position": "bottom-right"
})});
</script>


	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<script src="js/scripts.min.js"></script>	
	<script src="js/common.js"></script>
	<link rel="stylesheet" href="css/fontawesome-all.min.css">

	<script>
			var modal = document.querySelector(".modal");
			var trigger = document.querySelector(".search");
			var closeButton = document.querySelector(".close-button");

			function toggleModal() {
						modal.classList.toggle("show-modal");
			}

			function windowOnClick(event) {
						if (event.target === modal) {
										toggleModal();
						}
			}

			trigger.addEventListener("click", toggleModal);
			closeButton.addEventListener("click", toggleModal);
			window.addEventListener("click", windowOnClick);
</script>



    <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<script src="jquery.unveil2.min.js"></script>
<script>
	$('img').unveil();
</script>

</body>
</html>