Is there a awesome way to use Modx with a SPA? Angularjs for example?
For me, I am unable to use both simultaneously because my index.html page wants to use a angular router. my angular router is looking for custom routes and pages from inside my angular javascript. none of these things connect to modx and use modx's engine to redirect index.php
my solution is to use angular on the ROOT website and use MODX as a manager / json creator on a sub directory. ie
http://mysite.com/cms/whatever.json
and I am making pages like "whatever" and setting them to json as a format and using getResources and MigXTV as a glorified JSON creator. like
{ "image" : "[[+image]]", "etc": "[[+etc_variable]]" }
the problem is that there is no way to create new pages "dynamically" with new controllers and new directives in angular and that be managed from Modx (at least not in my system). (this is important for clients who don't know how to write html and pages, etc)
So is there a way to connect the two or what is the plan for this stuff in the future, etc. Does modx have a place in the future for Single Page Javascript Frameworks. Right now using json files I am able to create a global-resources.json and include things like meta data, keywords, page titles, and stuff like that.. but using something like Wayfinder might be impossible unless I am only setting up "dynamic" routes in angular with no controllers or javascript for those pages...
Another thing is.. is there a way to dump the entired modx website. every page. every variable. every tree into a JSON list? sorta like a global RSS feed but just something built in that dumps the whole database as json?
thanks!
Here is a example of my testimonial page. As you can see. there is so much stuff happening in javascript that dynamically creating "testimonial" and linking it into javascript, and then adding in a controller, and etc. is a pain in the butt.
'use strict';
angular.module('myapp.testimonials', [])
.config(
['$stateProvider',
function ($stateProvider) {
$stateProvider.state("testimonials", {
abstract: false,
url: "/testimonials",
views: {
'@': {
template: ''
},
'subcontent@': {
templateUrl: 'pages/testimonials.html',
controller: 'testimonialsCtrl',
},
'navTitle@': {
template : '<ul><li><h1> {{mytitle}} </h1></li></ul>',
controller: 'navTitle',
},
'bkg@': {
template: '<div class="static-bkg"></div>'
},
},
onExit: ['appLoading',
function (appLoading) {
appLoading.loading();
}],
onEnter: ['appLoading', 'triangles', 'drawer',
function ( appLoading, triangles, drawer) {
appLoading.ready();
triangles.close();
drawer.close();
}],
})
}]
).controller('testimonialsCtrl', ['$scope','$http', function($scope, $http) {
$scope.currentPage = 0;
$scope.pageSize = 8;
$scope.items = [];
$http.get('http://ecocooltech.com/cms/Testimonials.json')
.success(function(data) {
$scope.items = data.entries;
$scope.numberOfPages=function(){
return Math.ceil($scope.items.length/$scope.pageSize);
}
});
}]);