I have a simple AngularJS app, including 3 HTML files (1 for the host page and a couple of HTML templates used in routing to different views) and a single JS file with my bundled services and controllers. In the host page I reference the AngularJS script together with other CDN resources like Angular-UI, Twitter Bootstrap CSS, etc.
Now I'd want to host my app in a WordPress page, but it's difficult to find an up-to-date and authoritative guidance on how I could do this in the best way. In the WP docs I found that you can use wp_enqueue_script, like e.g. explained in http://code.tutsplus.com/articles/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins--wp-22509 . I'd like to reference my JS and CSS resources only in the page where I need them (i.e. in the page embedding my app), without touching things which get reset whenever a theme is updated.
It would be great if some sort of plugins existed for this, but I cound not find any. I found an inline-javascript plugin which allows me to include JS code in the post, but I'm not sure if this would be required at all, given that I'm creating the app page as an admin with unfiltered HTML capabilities so it seems I just have to include a script tag at the end of the page to let WP run it. Also, there is a plugin named Angular, but I could not find any documentation on using it: where to put what, how to configure it, what to do with external resources (e.g. HTML templates) and dependencies, etc. This plugin's page is simply the AngularJS homepage.
So I'm left with performing this integration manually, which implies (given that both styles and scripts are going to be used only by that particular app in a single page):
1. for each custom CSS, add it in the page itself a php code block, like e.g.
<?php if (is_page("MyAppPageName")) { ?>
<link rel="stylesheet" href="CSS-CDN or custom CSS using <?php content_url('somefile.css'); ?>" type="text/css" />
<?php } ?>
2. for each script add a call to wp_enqueue_script in the page itself in a php code block.
3. copy the HTML layout from the app's main page into the host WP page. This HTML contains the Angular directives.
4. as for views with external templates, I'm not sure about how should I load them. In the Angular app I just reference them by their relative path, e.g. Views/Index.html. Should I be in loss of a viable solution here I'll have to resort to inline templates in the app code, but this defeats all the benefits of storing them independently.
Would this be enough for letting the WP page launch the Angular compiler and process its directives accordingly, with all the required dependencies for both CSS and JS? Is there a better way? I'm quite new to WP so I'm probably missing several obvious things... Thanks!