AngularJS Frontend:Connecting it with a Yii Backend REST API.Gallery Manager Demo Application.
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.
For best experience,use Chrome.Other browsers may complain here and there.Sorry,no patience to make happy every freaking browser out there!
Download and copy the project files to some public folder in your development environment.
Create an empty
assets folder in project root.
protected/data/angular-yii.sqlfile. Optionally you can import the
user_table.sqlfile to have a register/login functionality in your yii backend.
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.
/index.phpconfigure your local and/or production framework paths.
config/main.phpconfigure your database info.Point to the database you created earlier.
config/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.
uploads\images\thumbnailsfolder structure in project webroot.You can change the names in
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.
npm install -g grunt-cli.
/ng-yiidirectory.In your command line console:
ng-yii/src/scripts/config/constants.jsand configure the constants.Fill in
X_REST_PASSWORDwith same values as those in
config/main.php.Note that it's not mandatory to have the frontend base folder
ng-yiiinside the backend base folder.You can move it to a public location and just configure the
YII_APP_BASE_URLaccordingly,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
Access-Control-Allow-Originand set the domains that you want to allow.
<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>
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
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
folder as an intermediary step)
.temp are cleaned up every time this grunt task runs.In development you will run your app
dev folder.However it is recommended that you exclude
.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.
viewsfolder into a single
views.jsfile that will be used as cache during runtime, thus avoiding http requests to these partials.It will even minify
index.htmlfile.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.
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
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.
The Jasmine framework is used for testing.There are 8 simple demo unit tests in two files.( in
Just point your browser to
/ng-yii/test/runner.html to run the tests.
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
folder will trigger Karma Test Runner and recompile the
Spiros 'drumaddict' Kabasakalis