WordPress register scripts and enqueue automatically

I have an FYI for you, more for myself but if this info helps others, double-bonus.

I have recently started combining my love for AngularJS with my experience on ongoing work with WordPress. The thing about working with AngularJS is there are a lot of scripts needed for even a small project, goes with the territory.  Before you start thinking “Why aren’t you combining and minifying your scripts?”, I know. It is on my list, Things I need to know more, understanding and using more tools like GULP and Grunt.

Until I find the answer to magically creating more time in my day and I know all there is to AngularJS, I need to enqueue all my scripts in WordPress. The latest project is creating a login page with AngularJS, connecting to an Office365 SharePoint list and pulling data back to WordPress. There is only a login page with the login form, and then the file display and client data is loaded and with that, there is six core AngularJS script files, five service scripts and two controllers. The goal here is only to load these when needed, no big deal right. Just use something like is_page() and load only what you need. My preferred process is the register everything and enqueue when you need them. I didn’t like the idea of registering and writing all that and started wondering if wp_register_script() would take an array of registered script handles to enqueue. I stumbled across the following in the codex. Function Reference/wp register script

Scripts that have been pre-registered using wp_register_script() do not need to be manually enqueued using wp_enqueue_script() if they are listed as a dependency of another script that is enqueued. WordPress will automatically include the registered script before it includes the enqueued script that lists the registered script’s handle as a dependency.

Awesome as script dependency is used all over AngularJS. The core file is the dependency for the other core files, all the services and modules are dependencies and included in your base module, usually referred to as “app”. Then the controllers depend on those, so you can register all your scripts and then enqueue 2 and they are all called. Here is my list and layout.

/**
 * -------------------------------------------------------------------------
 * Angular Modules
 */
wp_register_script( 'ng-core',
   plugin_dir_url( __DIR__ ) . 'modules/angular/angular.min.js' );
wp_register_script( 'ng-route',
   plugin_dir_url( __DIR__ ) . 'modules/angular-route/angular-route.min.js',
   array( 'ng-core' ), $this->version, true );
wp_register_script( 'ng-cookies',
   plugin_dir_url( __DIR__ ) . 'modules/angular-cookies/angular-cookies.min.js',
   array( 'ng-core' ), $this->version, true );
wp_register_script( 'ng-local-storage',
   plugin_dir_url( __DIR__ ) . 'modules/angular-local-storage/dist/angular-local-storage.min.js',
   array( 'ng-core' ), $this->version, true );
wp_register_script( 'ng-animate',
   plugin_dir_url( __DIR__ ) . 'modules/angular-animate/angular-animate.min.js',
   array( 'ng-core' ), $this->version, true );
wp_register_script( 'ng-ui-bootstrap',
   plugin_dir_url( __DIR__ ) . 'modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
   array( 'ng-core' ), $this->version, true );

/**
 * ----------------------------------------------------------------------------
 * Custom angular services
 */
wp_register_script( 'ng-app',
   plugin_dir_url( __DIR__ ) . 'shp_app/app.js',
   array( 'ng-core', 'ng-route', 'ng-cookies', 'ng-local-storage', 'ng-animate', 'ng-ui-bootstrap' ),
   $this->version, true );
wp_register_script( 'ng-auth-srvc',
   plugin_dir_url( __DIR__ ) . 'shp_app/js/service/authentication.srvc.js', array( 'ng-app' ),
   $this->version, true );
wp_register_script( 'ng-flash-srvc',
   plugin_dir_url( __DIR__ ) . 'shp_app/js/service/flash.srvc.js', array( 'ng-app' ),
   $this->version, true );
wp_register_script( 'ng-client-docs-srvc',
   plugin_dir_url( __DIR__ ) . 'shp_app/js/service/clientDocs.srvc.js', array( 'ng-app' ),
   $this->version, true );
wp_register_script( 'ng-local-storage-srvc',
   plugin_dir_url( __DIR__ ) . 'shp_app/js/service/user.service.local-storage.js', array( 'ng-app' ),
   $this->version, true );


/**
 * -------------------------------------------------------------------------------
 * angular custom controllers
 */
wp_register_script( 'ng-home-ctrl',
   plugin_dir_url( __DIR__ ) . 'shp_app/js/controller/home.ctrl.js',
   array( 'ng-app', 'ng-client-docs-srvc' ), $this->version, true);
wp_register_script( 'ng-login-ctrl',
   plugin_dir_url( __DIR__ ) . 'shp_app/js/controller/login.ctrl.js',
   array( 'ng-app', 'ng-auth-srvc', 'ng-flash-srvc', 'ng-local-storage-srvc' ), $this->version, true);

if(is_page('log-in')){
   wp_enqueue_script('ng-login-ctrl');
   wp_enqueue_script('ng-home-ctrl');
}

Leave a Reply

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