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.