Please whitelist cPanel in your adblocker so that you’re able to see our version release promotions, thanks!

The Community Forums

Interact with an entire community of cPanel & WHM users!

Use angularJS inside a PHP cPanel plugin

Discussion in 'User Experience' started by alexis_, May 12, 2018.

  1. alexis_

    alexis_ Member

    Joined:
    Sep 13, 2017
    Messages:
    11
    Likes Received:
    1
    Trophy Points:
    3
    Location:
    Belgium
    cPanel Access Level:
    Root Administrator
    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 :
    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) :

    Code:
    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 :)
     
  2. cPanelMichael

    cPanelMichael Forums Analyst
    Staff Member

    Joined:
    Apr 11, 2011
    Messages:
    43,928
    Likes Received:
    1,819
    Trophy Points:
    363
    cPanel Access Level:
    Root Administrator
    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.
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  3. alexis_

    alexis_ Member

    Joined:
    Sep 13, 2017
    Messages:
    11
    Likes Received:
    1
    Trophy Points:
    3
    Location:
    Belgium
    cPanel Access Level:
    Root Administrator
    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:
    <?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.

    Capture du 2018-05-17 09-05-50.png

    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 :

    PHP:
    <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."disabledtrue }
                                        ];

                                        
    $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
     
    #3 alexis_, May 17, 2018
    Last edited by a moderator: May 17, 2018
  4. cPanelMichael

    cPanelMichael Forums Analyst
    Staff Member

    Joined:
    Apr 11, 2011
    Messages:
    43,928
    Likes Received:
    1,819
    Trophy Points:
    363
    cPanel Access Level:
    Root Administrator
    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.
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
Loading...

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice