Postingan lainnya

Buku Ini Koding!

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

Menggunakan Angularjs di Wordpress themes

Kali ini saya akan share cara membuat themes wordpress dengan angularjs

Yang pertama kamu harus lakukan adalah download angularjs di <a href='https://code.angularjs.org/1.5.7/'>https://code.angularjs.org/1.5.7/</a> terus kamu buat themes di folder wordpress

Pertama bikin file style.css di folder themes wordpress dan isi dengan irfomasi themes yang kamu buat

/*
Theme Name: Angular Wordpress
Author: Ardy Him
Author URI: http://fb.com/ardyhim
Description: Themes wordpress dengan angularjsr
Version: 1.0
*/

buat file lagi dengan nama index.php dan isi dengan

<!DOCTYPE html>
<html ng-app="wordpress">
  <head>
    <meta charset="utf-8">
    <title>Wordpress Angular</title>
    <?php wp_head(); ?>
  </head>
  <body>
    <div ng-view>

    </div>
  </body>
</html>

buat lagi file functions.js dan masukan code untuk memanggil angularjs

<?php

function ag_script(){
  wp_enqueue_style('default',get_template_directory_uri().'/style.css', false, NULL,'all');
  wp_register_script(
		'angularjs',
		get_stylesheet_directory_uri() . '/angular/angular.js'
	);
	wp_register_script(
		'angularjs-route',
		get_stylesheet_directory_uri() . '/angular/angular-route.js'
	);
	wp_enqueue_script(
		'my-scripts',
		get_stylesheet_directory_uri() . '/angular/app.js',
		array( 'angularjs', 'angularjs-route' )
	);
	wp_localize_script(
		'my-scripts',
		'myLocalized',
		array(
			'views' => trailingslashit( get_template_directory_uri() ) . 'views/'
			)
	);
}
add_action('wp_enqueue_scripts','ag_script');

?>

karna di situ saya gunakan directory angular, maka kamu harus buat dulu folder angular dan taruh di folder itu file angular.js angular-route.js dan app.js setelah itu kita buat config buat angularjs di file app.js

angular.module('wordpress', ['ngRoute'])
.config(function($httpProvider, $routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: myLocalized.views + 'home.html',
      controller: 'home'
    })
    .when('/contact',{
      templateUrl: myLocalized.views + 'contact.html',
      controller: 'contact'
    });
})
.controller('home', function($scope){
  $scope.home = "Home view";
})
.controller('contact', function($scope){
  $scope.contact = "Contact view";
});

untuk code myLocalized.views itu kita ambil directory themes angular nya yang kita atur di bagian functions.php ------------------------- nanti akan saya buat juga cara mengambil content wordpress dengan WP-API

angular wordpress sharing

@ardyhim

289 Kontribusi 175 Poin

Dipost 9 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban