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.

Answer 1

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": "[email protected]: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.