• 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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    I’m not familiar with Angular in particular, but I think you pretty much have it covered, but I could not guarantee that is all that’s needed for your app to run. You would be creating an interface plugin yourself. I don’t think that Angular plugin you saw is worth trying to work with. Better to go with what you create and understand yourself.

    You will want to use wp_enqueue_style() for external CSS just as you do for scripts. This enables dependencies to be resolved. Conditional loading is a perfect approach, though accessing the correct information can sometimes be a challenge. There’s usually a solution somewhere though.

    The HTML should be implemented as a custom page template. These usually reside in the theme folder, but can reside anywhere as long as you do not need users to be able to create additional pages based on it. I’m not sure what views entail, they sound like additional page templates to me. You never reference any of these templates by path in general use, only when creating a page based on the template. Page creation can be done by script during plugin activation. If everything is included in the template, the only reason to create a page is to have a title slug with which to reference the page in general use.

    I don’t see any glaring obstacles for this working. You’ll run into quirks of doing things the WP way which can be frustrating if you’re unaware there is a WP way. You’ll just have to work through these. You already know about enqueuing script. Another one is AJAX requests. I’m probably too closely involved at this point to be able to provide a comprehensive list, some quirks now seem perfectly normal to me.

    About all you can do is dive in and make it work. Good luck!

    Roy Sivan

    (@guavaworks)

    Not sure if you figured out your issue, but including AngularJS into a page template is fairly easy, as long as you are enqueuing scrips properly

    Check out my latest write-up on how to do it:
    WP + AngularJS

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘AngularJS app in WP page’ is closed to new replies.