Simple integration of WP and AngularJS

  • martinforsyth

    (@martinforsyth)


    7 years, 2 months ago

    I’m relatively new to both WP and AngularJS. I want to do some simple, lightweight proof of concept stuff locally to help my understanding.

    I can get the Angular component to work independently of WP by simply copying any example from here and serving it directly (nothing to do with WP) from my local Apache web server.

    I want to be able to integrate the same AngularJS example into a WP constructed page.

    I an suspicious that loading the angular.min.js library is causing the issue.

    I have tried a number of things, all of which yield the same result – namely a page showing unparsed AngularJS content. See screenshot here

    I have added the relevant code to a Gutenberg HTML block. I have tried loading the angular.min.js library using a variety of methods …

    1
    By directly including it in the Gutenberg block (i didn’t really expect that to work anyway – though it did when including it similarly in my other directly served page test outside of WP).

    2
    By coding it in a sample template page, with and without first registering it … i.e. either …

    wp_register_script('angularjs', '/wp-content/themes/twentynineteen/angularjs/angular.min.js');
wp_enqueue_script('angularjs');

    or …

    wp_enqueue_script( 'angularjs', '/wp-content/themes/twentynineteen/angularjs/angular.min.js');

    In the wp_enqueue_script i have verified that angular.min.js is correctly pathed. I have also experimented with passing the CDN URL to wp_register_script/wp_enqueue_script, as well as using both true and false as values for the enqueue function’s $in_footer = false argument.

    In all cases i get the same result. As shown in the screenshot.

    Can anyone point out what i might need to do to get this working? I don’t want to mask my understanding by doing anything too involved. In my mind it’s a simple idea …. load the AngularJS library then execute the code.

    Thx

Viewing 3 replies - 1 through 3 (of 3 total)
  • Kartik Shukla

    (@kartiks16)

    7 years, 2 months ago

    Hey martinforsyth,

    Yes this is relatively simple idea and there are many reference links available for this.

    Can you please check this.

    https://wp-and-angular.com/#/

    https://code.tutsplus.com/tutorials/creating-single-page-applications-with-wordpress-and-angularjs–cms-25095

    Hope this helps.

    Thanks.

    Thread Starter martinforsyth

    (@martinforsyth)

    7 years, 2 months ago

    Thx kartiks16

    I have seen some of that material already. It’s a bit more heavyweight than what i’m after. I’m trying to avoid getting into too much by the way of theme/plugin creation in order to get this working.

    In a way, i’m less interested in building a working AngularJS app and more interested in why it doesn’t work for me in what seems to be a simple case. No doubt there’s something i’m not fully understanding. It’s that which i really want to find out about.

    Moderator bcworkz

    (@bcworkz)

    7 years, 2 months ago

    The way you enqueued looks OK, and as you say, the reference on the page is correct, assuming that is what you meant by “pathed”.

    Placing JS code in an HTML block is unsafe, it will become corrupted. There is a dedicated code block you should be using to embed script. For any extensive amount of code, it’s best managed as an external file and enqueued.

    You shouldn’t add files and folders to the twentynineteen theme folder. Either create a child theme or a dedicated plugin to contain added files.

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

The topic ‘Simple integration of WP and AngularJS’ is closed to new replies.

Tags