AngularJS Frontend:Connecting it with a Yii Backend REST API.Gallery Manager Demo Application.

35 followers

This wiki article has not been tagged with a corresponding Yii version yet.
Help us improve the wiki by updating the version information.

AngularJS Frontend:Connecting it with a Yii Backend REST API.Gallery Manager Demo Application.

By Spiros Kabasakalis

Overview

A Gallery Manager demo application with Yii REST backend and AngularJS frontend. The application is more involved than the typical introductory todo demo used in js frameworks. It is recommended that you have a basic knowledge of AngularJS,Grunt,and require.js before you dive into the source code.

Live Demo

GitHub Repository

Features

  • Upload pictures with name and description and choose collections to which they belong.
  • Create collections and choose their pictures.
  • Pictures and collections share a MANY_MANY relationship.
  • Create,Update and Delete images and collections.
  • View a gallery of the images,filtered by selected collection.

For best experience,use Chrome.Other browsers may complain here and there.Sorry,no patience to make happy every freaking browser out there!

Setup

Download and copy the project files to some public folder in your development environment. Create an empty assets folder in project root.

Backend

  • Create a new database and import the image,collection,collection-image tables found in protected/data/angular-yii.sql file. Optionally you can import the user_table.sql file to have a register/login functionality in your yii backend.
  • Define your local development domain in /index.php
defined('LOCAL_DOMAIN') or define('LOCAL_DOMAIN','[localhost or Virtual Host]');

This will make your config.php functional both in local development and production environment.

  • In/index.php configure your local and/or production framework paths.
  • Inconfig/main.php configure your database info.Point to the database you created earlier.
  • Inconfig/main.php,in params array fill in the RESTusername and RESTpassword fields.They are used for basic REST authentication. Note:These credentials are sent from the client with custom headers,so your server must allow this.
  • Create an uploads\images\thumbnails folder structure in project webroot.You can change the names in ng-yii\src\scripts\config\constants.js,and protected\models\Image.php.

Frontend

You will need Command line tools so it would be ideal if you could use these in your IDE. For example in PHPStorm you can configure Command line tools in Settings/IDE Settings/Command Line Tool Support.

  • Install node.js (at least v0.8.1) with npm (Node Package Manager).
  • Install Grunt node package globally.In your command line console: npm install -g grunt-cli.
  • Install project dependencies (node packages):go to /ng-yii directory.In your command line console: npm install.
  • Open ng-yii/src/scripts/config/constants.js and configure the constants.Fill in X_REST_USERNAME,X_REST_PASSWORD with same values as those in config/main.php.Note that it's not mandatory to have the frontend base folder ng-yii inside the backend base folder.You can move it to a public location and just configure the YII_APP_BASE_URL accordingly,if you are using a relative url. You must serve the frontend from the same domain where the backend resides,or else you may run into security issues. In case you have to use a different domain include in your .htaccess file Access-Control-Allow-Origin and set the domains that you want to allow.
  • In your .htaccess file:(already included)
<IfModule mod_headers.c>
#Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Headers "Content-Type, Authorization,
X_REST_USERNAME,X_REST_PASSWORD,X-Requested-With"
Header always set Access-Control-Allow-Methods "POST, GET,PUT,DELETE, OPTIONS"
  </IfModule>

Compiling

The frontend source files reside in /ng-yii/src folder.These are the files that you edit in your IDE.There are three main grunt-tasks configured in Gruntfile.js that compile the src folder:

  • grunt default(or just grunt) will compile any html templates in your src folder and and then copy all files to a dev folder inside ng-yii.(using a temporary .temp folder as an intermediary step).dev and .temp are cleaned up every time this grunt task runs.In development you will run your app in dev folder.However it is recommended that you exclude dev and .temp folders from your IDE project directory structure, so that they don't appear in your IDE.You don't want to edit files by mistake in there only to find out that they have been deleted when you ran the task.

  • grunt dev is essentially the same as grunt default with the extra addition that it will watch for src file changes and re-compile on the fly.

  • grunt prod is the powerhouse task that really shows the power of grunt as an optimization/automation/workflow tool.This task will squash the whole scripts folder structure and all js plugins into a single javascript file and then minify it.It will do the same for all the css files. It will optimize any images found in img folder.It will bake all the partial html files in views folder into a single views.js file that will be used as cache during runtime, thus avoiding http requests to these partials.It will even minify index.html file.All the compiled files will be moved to a ng-yii/prod folder,ready for deployment. For reasons already explained,make sure you don't edit anything in prod (unless you debug of course) because the folder is cleaned up every time the task is ran.

Running the app.

Provided you use a LAMP stack in your localhost,just point your browser to dev or prod folder,after you have compiled the source. Optionally you can start a local node.js server with grunt server in command line and then point your browser to http://localhost:3005/ . The compiled app in dev folder will run.If you use a non-localhost virtual host domain for your yii backend you must take care of the cross domain security issue already mentioned above.

Tests.

The Jasmine framework is used for testing.There are 8 simple demo unit tests in two files.( in ng-yii/test/scripts/services). Just point your browser to /ng-yii/test/runner.html to run the tests.

Karma (ex-Testacular):Test Runner.

Karma is a test runner which works with any js testing framework. In a nutshell,the usefulness of this command line tool is that it can run tests in the browser automatically every time you edit your source code, so that you always know on the spot if your new additions break something. To start the Karma server,in command line grunt karma:unit.After that,a new command grunt dev.Any changes in your src folder will trigger Karma Test Runner and recompile the dev folder.

Cheers!

Spiros 'drumaddict' Kabasakalis

Acknowledgement

AngularFun by Cary Landholt.

Resources

Total 15 comments

#16935 report it
Castea at 2014/04/14 09:26am
upload multiple image at once

any idea upload multiple image at once? Thanks

#16866 report it
whatif at 2014/04/04 07:04pm
Solution to Error 401 (Unauthorized)

@flyshoppa

Check the " _accessRules() " in your controller and allow authorization to proper user.

Example:

public function _accessRules() {
        return array(
            array('allow', // allow all users to perform 'index' and 'view' actions
                'actions' => array('index', 'view'),
                'users' => array('*'),
            ),
            array('allow', // allow authenticated user to perform 'admin'actions
                'actions' => array('admin'),
                'users' => array('@'),
            ),
            array('allow', // allow authenticated user to perform 'create' and 'update' actions
                'actions' => array('create', 'update', 'delete'),
                'expression' => array($this, 'checkOwner'),
            ),
            array('deny', // deny all users
                'users' => array('*'),
            ),
        );
    }
#16865 report it
flyshoppa at 2014/04/04 05:38pm
Error 401 (Unauthorized)

hi and thanks for the demo...however I could not manage to get it working. The frontend states: http://localhost:8000/angular-yii-master/api/imageRest 401 (Unauthorized)

What am I doing wrong? Davide

#16767 report it
Fire at 2014/03/26 02:54am
Why do you compile?

Hi Spiros, I am wondering why you compile the app? Can you explain why you are doing so?

#16766 report it
Fire at 2014/03/26 02:35am
hi there, backend admin passwrd?

Hi Spiros, I am trying to use the demo on my local machine - but dont know the backend password - can you tell me what it is

#16673 report it
mahdi1986 at 2014/03/18 01:52am
Great

Thnks Man,this is very good wiki

#13942 report it
elviskudo at 2013/07/09 12:59am
Awesome!

That's cool man, awesome, great!

#13753 report it
bonnie at 2013/06/22 12:56pm
Different domain issue.

Am trying to access when on a different domain and what am get is Error!Status: undefined .Message from server: undefined. Does anyone has the same issue. Please help.

#13427 report it
bonnie at 2013/05/29 12:03am
This is what I have been looking for.

Thanks very much for your effort to come up with this example. This is the most advance of all I have seen from my google search. I have been playing with angularjs and yii restful backend but I have not been luck to set up headers but your example gives me what I need now will continue on what I have been working on. Thanks much.

#13408 report it
Daniel Galvan at 2013/05/27 03:50pm
Excelent!!!

Thank you very much for sharing.

#13405 report it
drumaddict at 2013/05/27 01:55pm
@seenivasan

Thanks for kind words.Unfortunately my Ember/Yii demo is now not functional with the new Ember version.These guys keep changing the API very often.Makes me very uncomfortable when it comes to trusting this framework.Now that I have seen how awesome AngularJS I would never go back to Ember.

#13404 report it
drumaddict at 2013/05/27 01:50pm
@werner Uploads folder

Thanks for noticing this.I had these empty folders in my project but they did'nt make it to the github repository for some reason.So yes,one needs to create them.I updated the wiki and README files.

#13401 report it
jwerner at 2013/05/27 10:53am
Images Uploads Folder

Very nice demo, thanks a lot!!!

In order to make uploading images work, you need to manually create the uploads folder hierarchy in your web root:

webroot
+- css
+- protected
+- uploads   <======
   +- images
      +- thumbnails

Regards,

Joachim

#13400 report it
seenivasan at 2013/05/27 10:49am
Aweful!

Nice Demol! Sometime back you created a wiki and a demo on Ember.js with YII as back end. Now we have one on Angular+YII. With the lot of curiosity to test one of these, I need some advice from you. I just started to learn Ember.js without Ember Data using YII as JSON provider. Many Thanks in Advance.

#13380 report it
ruderbytes at 2013/05/26 10:15pm
Great!

Wow that so cool... thanks for your sharing

Leave a comment

Please to leave your comment.

Write new article