Use angularJS inside a PHP cPanel plugin

[alexis_]

Hello,

I'm working on a cPanel plugin, it's a PHP web application. Inside that application, I need to list the domain that customer have.

After some research, I discovered the cPanel style guide and a few pages about that :

• cPanel Style Guide (you should put this somewhere in the documentation because I find this on github, from a 2016 cPanel conf, It's kind of difficult to find)
  
• Guide to cPanel Interface Customization - jQuery - Developer Documentation - cPanel Documentation
  
• cPanel plugin create form
  
• squareplanetdesign/cpanel_todo_plugin

So I want to use the dynamics tables because it's sexy and I don't want to manage the pagination in PHP (always a nightmare the pagination stuff).

I dont know anything about Javascript and AngularJS but I'm learning. If I understood correctly, I must use the RequireJS thing to load what I need : angularJS and Jquery for instance.

I understood that I must use the cPanel header and footer, otherwise I don't have access to requireJS and the other stuff.

So, I tried the example from the styleguide but I can't get it working. I think I got angularJS loaded and Jquery too.

One of the problem is that I don't really understand how to use the JS example from the cPanel StyleGuide in combinaison with the RequireJS thing.

When I'm getting close to figure this thing out, I'm blocked with this error (from the JS console) :

Error: [ng:areq] http://errors.angularjs.org/1.4.4/ng/areq?p0=applicationListController&p1=not%20a%20function%2C%20got%20undefined

I think I missed something, I'm pretty sure I must load something else, from the CJT stuff for instance, where the "applicationListController" is defined.


So, in summary, do you have an example of a working app, in PHP, using angularJS ? Just a page in PHP that load a dynamics tables for instance.

Thank you in advance

 

[cPanelMichael]

Hello @alexis_,

We don't offer a specific example of an application using AngularJS in our documentation. Could you let us know the step-by-step instructions of how we can reproduce the issue? You can post examples of the actual code you are using in CODE tags.

Thank you.

 

[alexis_]

Hello,

Thank for your answer, I tested a lot differents things but I will post the 2 things I tested and appear to be almost functionnal. *

First version, based on those two pages :
- Guide to cPanel Interface Customization - jQuery - Developer Documentation - cPanel Documentation
- cPanel Style Guide

<?php
// my app and the $cpanel is included before ...
echo $cpanel->header("Test App", 'app-key');
?>
<script type="text/javascript">
    // Wait for require.js to load using the new event
    // This will be the one we document publicly so we
    // can eventually use async loading for requirejs.
    window.addEventListener("library-loaded", function(e) {
        if ( e.detail.library.match(/requirejs/) ) {
            require(["frameworksBuild"], function() {
                require(
                    [
                        "angular",
                        "uiBootstrap"
                    ],
                    function(angular) {

                        console.log(angular);

                        // First create the application
                        angular.module("App", ["ui.bootstrap"]);

                        // Then load the application dependencies
                        var app = require(
                            [

                            ], function() {
                                var app = angular.module("App");

                                app.controller("TabsDemoCtrl", ["$scope", function($scope) {
                                    $scope.tabs = [
                                        { title:"Dynamic Title 1", content:"Here’s some dynamic content." },
                                        { title:"Dynamic Title 2", content:"Here’s some more dynamic content.", disabled: true }
                                    ];

                                    $scope.alertMe = function() {
                                        // fired when the alert tab with select is selected
                                    };
                                }]);

                                /**
                                 * Initialize the application
                                 * @return {[type]} [description]
                                 */
                                app.init = function() {
                                    // apply the app after requirejs loads everything
                                    angular.bootstrap(document, ["App"]);

                                    // Chaining
                                    return app;
                                };

                                // We can now run the bootstrap for the application
                                app.init();

                            });

                        return app;
                    }
                );
            });
        }
    });
</script>

<uib-tabset>
    <uib-tab heading="Static title">
        <div class="tab-content">Static Content</div>
    </uib-tab>
    <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
        <div class="tab-content">{{tab.content}}</div>
    </uib-tab>
    <uib-tab select="alertMe()">
        <tab-heading>
            <i class="glyphicon glyphicon-bell"></i> Alert!
        </tab-heading>
        <div class="tab-content">I've got an HTML heading, and a select callback. Shiny!</div>
    </uib-tab>
</uib-tabset>

<?php
echo $cpanel->footer();

With this version, I know that angular is loaded because the console.log(angular) return something but I have an error because 3 angular controllers seems to be missing.



The raw version of the console log : pastebin.com/raw/eY9muUFB

I tried a second version after looking at the code of the cPanel TODO plugin :
-github.com/squareplanetdesign/cpanel_todo_plugin

I noticed this plugin add some dependencies and load stuff related to CJT too, so tried this :

<script type="text/javascript">
    // Wait for require.js to load using the new event
    // This will be the one we document publicly so we
    // can eventually use async loading for requirejs.
    window.addEventListener("library-loaded", function(e) {
        if ( e.detail.library.match(/requirejs/) ) {
            require(["frameworksBuild"], function() {
                require(
                    [
                        "angular",
                        "uiBootstrap",
                        // I added this two lines
                        "cjt/core",
                        "cjt/modules",
                    ],
                    function(angular) {

                        console.log(angular);

                        // First create the application
                        // I added the cjt2.cpanel
                        angular.module("App", ["ui.bootstrap", "cjt2.cpanel"]);

                        // Then load the application dependencies
                        var app = require(
                            [
                                // I Added this line too
                                "cjt/views/applicationController",
                            ], function() {
                                var app = angular.module("App");

                                app.controller("TabsDemoCtrl", ["$scope", function($scope) {
                                    $scope.tabs = [
                                        { title:"Dynamic Title 1", content:"Here’s some dynamic content." },
                                        { title:"Dynamic Title 2", content:"Here’s some more dynamic content.", disabled: true }
                                    ];

                                    $scope.alertMe = function() {
                                        // fired when the alert tab with select is selected
                                    };
                                }]);

                                /**
                                 * Initialize the application
                                 * @return {[type]} [description]
                                 */
                                app.init = function() {
                                    // apply the app after requirejs loads everything
                                    angular.bootstrap(document, ["App"]);

                                    // Chaining
                                    return app;
                                };

                                // We can now run the bootstrap for the application
                                app.init();

                            });

                        return app;
                    }
                );
            });
        }
    });
</script>

I tried a lot of differents versions, loading random stuff from CJT, sometime I manage to get rid of the sidebarController error but the "applicationController" error is always blocking for me.

Thanks a lot.
Alexis

 

[cPanelMichael]

I tried a lot of differents versions, loading random stuff from CJT, sometime I manage to get rid of the sidebarController error but the "applicationController" error is always blocking for me.

Hi Alexis,

While we won't be able to help you with the development of the custom code itself, we can take a closer look at the system to check for anything obvious that could be leading to the error message you have reported. Could you open a support ticket using the link in my signature so we can take a closer look?

Thank you.