Postingan lainnya

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 7 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban