Integrating and loading AngularJS WordPress

Integrating and loading AngularJS WordPress

Following our “How to Develop a new WordPress plugin” post, within this blog post I’ll describe how to integrate AngularJS WordPress on specific pages.

There are several methods how to load AngularJS WordPress.
1. You can create a checkbox which will enable it on the edit page.
2. You can hook it to the requested post/page and edit it as you wish with “_the_content” or “_the_title” filters.
3. You can create a new page which loads your AngularJS application.

I’ve used all three of them, but as far as I think – the third solution is the best one.
You should remember that WordPress is very easy and intuitive, so try make things clearer and not too much complex and your site will be easy to manage and adaptable for changes.

 

Loading AngularJS WordPress

  1. 1. Creating a new page type:
    • * Create a new php file in your theme directory.
    • * “Register” the page to be shown in the dropdown list when adding a new page.
      /*
      Template Name: AngularJS Page
      */
      
    • * Get the header and the footer and add the “ng-view” where you want to load your AngularJS application.
      Remember to add the header and the footer to the page so the site won’t change his layout.

      get_header();
      get_footer();
      

      Between of the “getters” add your html code with ng-view call.

  1. 2. Loading all the javascripts for our application:
  2. * Use the “wp_enqueue_scripts” hook to load all the required JS’s:
    add_action( 'wp_enqueue_scripts', 'load_angular_javascript' );
    function load_angular_javascript()
    {
        /*Loading angular*/
        wp_enqueue_script('angular-js', plugin_dir_url(__FILE__) . '/angularJS/lib/angular.min.js');
    
        /*Loading Services*/
        wp_enqueue_script('kaltura-service', plugin_dir_url(__FILE__) . '/angularJS/services/KalturaService.js');
    
        /*Loading App*/
        wp_enqueue_script('angular-app', plugin_dir_url(__FILE__) . '/angularJS/app.js');
    
        /*Loading controllers*/
        wp_enqueue_script('angular-home-controller', plugin_dir_url(__FILE__) . '/angularJS/controllers/homeController.js');
        wp_enqueue_script('angular-video-controller', plugin_dir_url(__FILE__) . '/angularJS/controllers/VideoController.js');
    
        /*Loading directives*/
        wp_enqueue_script('angular-thumbnail-directive', plugin_dir_url(__FILE__) . '/angularJS/directives/kaltura-thumbnail.js');
    
    }
    

Now all we need to do in order to load our AngularJS application, is to choose the “AngularJS Page” template when creating a new page and our Angular application will be loaded.

5 thoughts on “Integrating and loading AngularJS WordPress

  1. Been looking for this type of integration. Thanks for posting. Where does that chunk of code go (wp_enqueue_scripts)? Do you add to in the AngularJS.php file or in a plugin?

    1. Hi Ron,

      You should add the scripts in the plugin.
      Example:

      add_action( 'wp_enqueue_scripts', 'load_angular_javascript' );
      function load_angular_javascript()
      {
          /*Loading angular*/
          wp_enqueue_script('angular-js', plugin_dir_url(__FILE__) . '/angularJS/lib/angular.min.js');
      
          /*Loading Services*/
          wp_enqueue_script('kaltura-service', plugin_dir_url(__FILE__) . '/angularJS/services/KalturaService.js');
      
          /*Loading App*/
          wp_enqueue_script('angular-app', plugin_dir_url(__FILE__) . '/angularJS/app.js');
      
          /*Loading controllers*/
          wp_enqueue_script('angular-home-controller', plugin_dir_url(__FILE__) . '/angularJS/controllers/homeController.js');
      
          /*Loading directives*/
          wp_enqueue_script('angular-thumbnail-directive', plugin_dir_url(__FILE__) . '/angularJS/directives/kaltura-thumbnail.js');
      }
      

      Let me know if it worked or where you stuck.

  2. Wonder if require.js would play nice with wordpress’s background processes. If so, think of the benefits.include one script, and the rest of your app files can be maintained just like any other require/angular app. Angular gives a whole new meaning to shortcodes!

    1. Hi Brian,

      I think require.js will work in most of WordPress scenarios.
      You can add require.js to your load function in your plugin and from their manage your entire js’s.
      Let me know if you have issues or whether it worked and you have 1 access point for your js files.

Leave a Reply

Your email address will not be published. Required fields are marked *