What's the correct way to embed a remote AngularJS application into a webpage?

Question

I'm trying to work out the correct way to embed an AngularJS application into another web page (served by another app). I have two apps, running on different servers:

App 1 - PHP app

App 2 - AngularJS app (calendar widget of sorts)

The PHP app is the primary app, into which I want to embed the calendar, which is served from a remote server. I have full access to both servers, and to both apps. The idea is that I want to be able to re-use the Angular app elsewhere, so it needs to be as loosely coupled as possible to the PHP app, preferably embedded in a single line of code.

I am currently using a HTML5 tag, which seems to work well, but I was wondering if there's anything wrong with this approach, or if there's a better means of doing what I'm after.

I should mention that I'm happy to use a HTML5-only solution, I'm no worried about backwards compatibility with older browsers.

No iFrame solutions, unless there's a REALLY valid solution. My ultimate goal is to head towards a microservice-style architecture.

Thanks in advance for your help.

An "app" is its own thing. If you need a widget to embed, try jQuery UI or something similar. — Blazemonger, Jun 09 '15 at 13:17
Hi @Blazemonger - I can't link to specific files, because I need it to be loosely-coupled, I need to allow the Angular app to change if needed. I want to embed whatever is served at http://bla.example.com/ into a page in the PHP application. — Dave Harding, Jun 09 '15 at 13:18

score 0 · Accepted Answer · edited May 23 '17 at 11:44

I generally manage all of my client-side dependencies with Bower but you could use any package manager.

This is how I would do it with Bower, which just uses Git to pull down your dependencies. This solution would require you to know how to use Git.

Install Bower—see above link.

Then, create a file called bower.json at the root of your project that points to the Git repository of your project:

{
    "name": "my-php-app",
    "version": "0.0.0",
    "dependencies": {
        "my-angular-app": "git@bitbucket.org:MY_BITBUCKET_ACCOUNT/my-angular-app.git#master"
    }
}

Then you can run the following command in the root of your PHP project:

bower install

This will create a directory called bower_components at the root. You can configure the default directory.

Your application should be self-contained there. You can import it and all of its dependencies with PHP on the required page.

Thanks Tina - though my solution requires all files to be served from the remote angular web service, and loosely bound to the main application. All the main application will know about the angular app, is the endpoint. — Dave Harding, Jun 22 '15 at 11:30

What's the correct way to embed a remote AngularJS application into a webpage?

1 Answers1