Is it possible to have Angular consume Joomla pages? - javascript

I'm in a situation where I need to integrate Joomla in an Angular app. I don't have much experience with Joomla and believe that I can use it as a headless CMS to get content Data with JSON. I however also need to be able to allow other people to just create pages/templates using Joomla and update the navigation of my Angular app with those newly created Pages.
Is something like this possible?

Related

How can I use a CMS with my custom website

I'm going to develop a custom site (my own html/css/js, maybe using vueJS) for a client. She wants to be able to edit the content of her site after, add/delete/update images and text.
If I code the site by myself instead of using visual builders inside wordpress, is she going to be able to edit her site with the wordpress built-in tools or I'm the one that will have to make the changes whenever she needs?
Usually you would wrap your custom part of the wordpress website into a custom plugin. I'm assuming you can wrap a vuejs app, but I haven't done/ tried that yet. But definitely an inspiring question. I would give that a try.
This tutorial should get you started: Tutorial to create a custom plugin
Implementing the Vuejs SPA afterwards into that plugin should be manageable...

Using VueJS to create a embeddable Chat Widget for websites

I'm building a product similar to Intercom live chat widget (tawto, drift, crisp etc). Basically, what it will do is add a widget to users website and then render a chat box (in simple words). I'm planning to use VueJS for the entire project.
So here are my thoughts.
We provide users an embeddable js snippet. What it will do is add a div to the body with id = "app" (or something like that). Then the same script will inject VueJS compiled code. Will also add some external scripts like socket io, some CSS libraries etc.
Here are my concerns:
Should I build the project using CDN vue.min.js or the CLI with compiled codes? (I'm comfortable with CLI)
I need to isolate my CSS libraries from users website, that possible with 'scoped' style in VueJS right?
If I use CLI version, will it work in a subdomain, inner pages, and links? Unlike a full website, I'm going to use VueJS to create a widget on the website
I have used vuejs to create widget before so this is your answer:
You should build a normal project, import vue and compile it with all of your code to 1 file.
Yes
Yes
Yes

BackboneJS with Codeigniter

I have an application build with Codeigniter and I want to use BackboneJS for my frontend. I already build an API so that I can use the returned JSON from my Database, so the only thing I need is to integrate Backbone in my Codeigniter setup. I have also already an Backbone application, where I created most of the Views I need. So, in my Backbone's index.php I have:
<script data-main="js/config" src="js/lib/requirejs/require.js"></script>
<script>
require(['config'], function(config) {
require(['app/mainpage']);
});
</script>
Also in my index.php, I have all the div's where my backbone views are rendered.
I would like to know, how I do integrate this in Codeigniter. My file/folder-structure in Codeigniter is the typical CI-setup:
- application
- config
- controllers
- models
- views
- assets
- css
- img
- system
index.php
.htaccess
So what is the best way to do this? Should I create an additional js-folder and then place my backbone-setup in that folder? If so, what about the <script>-code shown above? where to place it?
Thanks in advance
You asked this a while ago, so I don't know if you're still looking for an answer, but since I use a similar setup occasionally with AngularJS I suggest:
loading a view with all header contents as a layout. I use this layout
Load your front-end client JS inside an include in /application/views/site/header.php, see this repo for example
Once you have all the libraries loaded up you can then load each individual JS application (Angular uses Modules) or use a single application which loads partials (I assume backbone has this feature, as does Angular).
Oh also, a trap for the unweary: Codeigniter doesn't support JSON posts well, so RESTful APIs are not easy out of the box. If you need to receive JSON post data, the best I've found thus far is the utterly obtuse:
$phpArray = json_decode(file_get_contents('php://input'));

How can I add an admin template to a website without using a generic CMS as wordpress?

Is necessary to have a wordpress system in the backend to use an admin template? I see in the web there are many fancy web admin templates in bootstrap. I would like to use on of them but I'm not sure how to add one without using wordpress. Is there any documentation for it?
Thank you.
Yes you can!
If you know PHP, you can use CMS frameworks like Codeigniter with administration library like flexi-auth and you can use any of those Twitter Bootstrap admin templates for your administration.

Reusing HTML code with only client side technologies

I am tasked with creating a website using only client side techs such as HTML, CSS and JavaScript. We can't using any server-side tech because the instructor is too lazy to install anything and won't allow us to deploy using something such as Heroku. Is there a way I can do this? In particular I want to create partials for that navigation and footer without having to copy and paste them in every single file.
I know of two different approaches:
1. Using Ajax
You can use ajax to do this - probably with the help of a JavaScript library or framework.
JQuery's load can do things like $('#header').load('header-partial.html');
If you're building something more complex with a lot of views, etc... I'd consider using a MV* javascript framework like Backbone.js or AngularJS.
Check out the AngularJS seed project on GitHub for an example
2. Using a build script
If your site is simple enough that all you want to do is include a header and footer on each page, you should consider doing this as a build step in your deployment process. I.E. complile your html with the partials locally, and upload full pages, with the header/footer code on every html page.
This approach has the benefit of not breaking your site if js is disabled.
For an example, check out html5boilerplate's ant build script

Categories

Resources