We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.
  1. Home
  2. HTTP Environment

Assets Management example with layout file?

Hi, I'm trying to integrate Assets Management into my application. I'm running into errors and can't seem to find any examples of how to use Assets Management within a layout.

What I have right now is this in my layout.phtml:

    <!DOCTYPE html>
    <html lang="en" data-ng-app="MyApp">
        <head>
            <title>MyApp</title>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

            <!-- Foundation CSS -->
            <link href="/lib/foundation/css/foundation.min.css" rel="stylesheet"/>

            <!-- JQuery UI CSS -->
            <link href="/lib/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>

            <style type="text/css">
                [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
                    display: none !important;
                }
            </style>

            <!-- LESS CSS -->
            <link rel="stylesheet/less" type="text/css" href="/css/style.less" />
            <script type="text/javascript" src="/lib/less/dist/less.min.js"></script>

            <?php $this->assets->ouputJs(); ?>

            ...

and in my ControllerBase, I have this:

    public function beforeExecuteRoute(Dispatcher $dispatcher)
    {
        $this->assets->addJs('/lib/foundation/js/vendor/modernizr.js')
            ->addJs('/lib/jquery/jquery.min.js')
            ->addJs('/lib/angular/angular.min.js')->join(true);
    }

I'm getting errors of call to undefined method of outputJs() and join(). I'm guessing I'm missing a use or am I doing this completely wrong?



85.5k

i noticed something fishy there aswell, i am nto sure what is the "real" fix, but this is how i use my assests

$assetManager->collection('js')
                ->addJs('js' . DS . 'vendor.js')
                ->addJs('js' . DS . 'scripts' . DS . 'Utils.js');

and then in my layout i have 


<?php
            $this->assets->outputJs('js');
        ?>


17.5k

How do you define $assetManager?



85.5k

$this->di->set('assets', function(){

            $assetManager = new \Phalcon\Assets\Manager();

            $assetManager->collection('css')
                ->addCss('css' . DS . 'vendor.css')
                ->addCss('css' . DS . 'bootstrapValidator.min.css');

            $assetManager->collection('js')
                ->addJs('js' . DS . 'vendor.js')
                ->addJs('js' . DS . 'scripts' . DS . 'Utils.js')
                ->addJs('js' . DS . 'bootstrapValidator.min.js')
                ->addJs('js' . DS . 'script.js');

            return $assetManager;
}, true);


17.5k

Grr... Still getting errors. Added in my services.php:

    $di->set('assets',function(){
        $assetManager = new \Phalcon\Assets\Manager();
        return $assetManager;
    });

..and in my controller:

    public function initialize() {
        $assetManager = $this->getDi()->getShared('assets');

        $assetManager->collection('js')->addJs('/lib/foundation/js/vendor/modernizr.js')
            ->addJs('/lib/jquery/jquery.min.js')
            ->addJs('/lib/angular/angular.min.js')->join(true);

        $this->view->setTemplateAfter('layout');
    }

...and in my layout:

    <?php $this->assets->ouputJs('js'); ?>

I'm getting the error: PHP Fatal error: Call to undefined method Phalcon\Assets\Manager::ouputJs() in /opt/www/html/zipline/app/views/layouts/layout.phtml on line 25.

If I print_r $assetManager, I see the js files have been added. Seems to be a problem with the display.



43.9k

Hi,

did you set "assets" service as shared ?



17.5k

It's set up the same way the other services are set up and I access them as above... cache, other custom services, etc.



85.5k

jsut try with $di->setShared('assets', function....);