Skip to content

Instantly share code, notes, and snippets.

@amielucha
amielucha / 1-index.html
Last active October 10, 2015 13:57
AngularJS ♥ WordPress Tutorial part 1 #tutorial
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>AngularJS ♥ WordPress</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="js/app.js"></script>
<body class="container">
@amielucha
amielucha / 2-app.js
Created October 10, 2015 14:08
AngularJS ♥ WordPress Tutorial part 2 #tutorial
(function(){
var app = angular.module('angular♥wp', ['ngRoute']);
})();
@amielucha
amielucha / 3-index.html
Last active October 10, 2015 15:04
AngularJS ♥ WordPress Tutorial part 3 #tutorial
<html lang="en" ng-app="angular♥wp">
...
<h1 class="text-center">AngularJS ♥ WordPress</h1>
<div ng-view></div>
@amielucha
amielucha / 4-app.js
Created October 10, 2015 14:42
AngularJS ♥ WordPress Tutorial part 4 #tutorial
(function(){
var app = angular.module('angular♥wp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
// Enable html5 mode
$locationProvider.html5Mode(true);
// configure routing
$routeProvider.when('/', {
templateUrl: 'content.html',
@amielucha
amielucha / 5-content.html
Last active October 10, 2015 15:07
AngularJS ♥ WordPress Tutorial part 3 #tutorial
<p>this is our content.html<br>
We want to load the content from WordPress here.
@amielucha
amielucha / 6-app.js
Created October 10, 2015 15:27
AngularJS ♥ WordPress Tutorial part 6 #tutorial
(function(){
var app = angular.module('angular♥wp', ['ngRoute']);
var api = {};
app.config(function($routeProvider, $locationProvider){
// Enable html5 mode
$locationProvider.html5Mode(true);
// configure routing
$routeProvider.when('/', {
@amielucha
amielucha / 7-app.js
Last active October 10, 2015 15:54
AngularJS ♥ WordPress Tutorial part 7 #tutorial
(function(){
var app = angular.module('angular♥wp', ['ngRoute']);
var api = {};
// JSON content location
api.query = 'http://amielucha.com/wp-json/wp/v2/posts/';
app.config(function($routeProvider, $locationProvider){
// Enable html5 mode
$locationProvider.html5Mode(true);
@amielucha
amielucha / 8-content.html
Last active October 10, 2015 16:17
AngularJS ♥ WordPress Tutorial part 7 #tutorial
<section>
<article class="well" ng-repeat="post in posts">
<header>
<h1>{{post.title.rendered}}</h1>
</header>
<div class="post-content">
{{post.excerpt.rendered}}
</div>
</article>
</section>
@amielucha
amielucha / 9-app.js
Created October 10, 2015 16:16
AngularJS ♥ WordPress Tutorial part 9 #tutorial
(function(){
var app = angular.module('angular♥wp', ['ngRoute']);
var api = {};
// JSON content location
api.query = 'http://amielucha.com/wp-json/wp/v2/posts/';
app.config(function($routeProvider, $locationProvider){
// Enable html5 mode
$locationProvider.html5Mode(true);
@amielucha
amielucha / 10-content.html
Created October 10, 2015 16:19
AngularJS ♥ WordPress Tutorial part 10 #tutorial
<h2>Item:</h2>
<section>
<article class="well" ng-repeat="post in posts">
<header>
<h1 ng-bind-html="post.title.rendered">
{{post.title.rendered}}
</h1>
</header>
<div class="post-content" ng-bind-html="post.excerpt.rendered">
{{post.excerpt.rendered}}