1. Requirements
2. Main Features
3. Getting started
4. Usage
5. Resources

This extension allows to easily load and embed your AngularJS application from a Yii view.

Requirements ¶

• Yii 1.1 (tested on version 1.1.14)

Main Features ¶

• publish and load AngularJS base script and required modules
• publish and load your AngularJS application assets
• concatenate AngularJS application scripts into a single file
• replace placeholders values on assets publication
• flexible configuration

Getting started ¶

• download the extension
• copy the angularHelper folder from the examples folder to your modules folder and enable it in your configuration file
• open index.php?r=angularHelper/default/index in your browser
• have a look at the source code of the extension (YiiAngularjsHelper.php) and of the example module

Usage ¶

<?php $this->beginWidget('ext.yii-angularjs-helper.YiiAngularjsHelper', array(
        'appName' => 'testApp',
        'hasAppModule' => true,
        'appFolder' => dirname(__FILE__).'/../../angularjs/app1',
        'commonAppScripts' => array(
            dirname(__FILE__).'/../../angularjs/common/config_httpProvider.js',
            dirname(__FILE__).'/../../angularjs/common/config_locationProvider.js',
        ),
        'appScripts' => array('test.js'),
        'appStyles' => array('style.css'),
        'requiredModulesScriptNames' => array('route', 'animate'),
        'customPlaceholders' => array('[:DATETIME]' => date('Y-m-d H:i:s')),
        'scriptsPosition' => CClientScript::POS_HEAD,
        'concatenateAppScripts' => true,
        'debug' => false,
    )
); ?>


<nav>
    <ul class="inline-block-list">
        <li><a href="#!/">Home</a></li>
        <li><a href="#!/page1">Page 1</a></li>
        <li><a href="#!/page2">Page 2</a></li>
    </ul>
</nav>

<div data-ng-view class="view-animate"></div>


<?php $this->endWidget('ext.yii-angularjs-helper.YiiAngularjsHelper'); ?>

Resources ¶

• Project page
• AngularJS homepage