Angular Music Database
_PHP version 5.4 at least is required.This is a requirement for RestFullYii extension _
- Clone the git repo
email@example.com:drumaddict/angular-music-db.git- or download it,and copy it to your local server's public folder.Let's assume it's the webroot
- Specify your local development domain in index.php,(constant
LOCAL_DOMAIN) so that the configuration file can differentiate between local and production environment.For example,you can fill in database info for both environments and the script will figure it out,assuming your virtual host does'nt have the same domain name as your real host.
- Hook up your Yii framework path in
index.php,(both local and live on server).
- Fill in database info in
config/console.php.(both local and live on server).
- Import the tables in your database from the sql file,
protected/data/music_db.sql.Optionally you can import the
user_table.sql,but this is related to the Yii application,not the one page application.
- Verify that the Yii app is installed and responding (navigate to webroot
- Change directory to
\music_db_src.This is the angular application source folder.
- Install node.js
- Install Grunt CLI with
npm install -g grunt-cli
- Install Bower globally with
npm install -g bower.Bower is a package manager that will handle most of the frontend dependencies.
music_db_src, run in your command line
npm install.This command will read all the dependencies needed for development workflow from the
package.jsonfile.These dependencies will be downloaded in
npm installis finished,run
grunt install.This will install Protractor,an end to end (e2e) test framework for AngularJS.
bower install.This will read the
bower.jsonfile and download in
libsfolder all but four dependencies which are already in that folder:
angular-tablehas been slightly modified for the purpose of the application,so downloading the original is not an option.
angular-ui-routeris a special build of Angular UI-Router when the version was 0.2.0 and supports keyframe CSS3 animations,which don't work for some reason with later versions.Last,I use a modified version of Toastr which exports it as window global.
music_db_src\libs\spinjs\spin.jsand comment (remove) this line at the top of the file
else if (typeof define == 'function' && define.amd) define(factory),
so that spin exports as a window global.
- This is it.You are ready to start development.
- Make sure you are always in
js/config/Constants.tsand specify the application's base url.For development, this is
APP_BASE_URL = '/music_db_src/'.Set your domain.For exmple,if you work in a virtual host (recommended)
DOMAIN='rest.dev'.You can change the credentials,but then you will have to change them on the server side also ,(see
envtask,set the base URL for both development and production.You'll be OK if you leave the defaults (
music_db).If for some reason you need to move the base source folder
music_db_srcin a deeper folder,you must include the whole path from the root.
App.tsand make sure
'templates-main'module is commented out.Also in
loader.jsyou should comment out
grunt copy:fontsdevto copy fonts from
- Last,run simply
grunt dev).This task will compile the
app.js.Now point your browser to
\music_db_srcand the application should load.
- You can now start developing.If you edit the typescript files they will automatically compile to
app.jsevery time you save,because of a watcher registered in
grunt tstask.Don't edit the compiled
index.htmlfile.If you need to edit the index file,you must edit
index.tpl.htmland then run
grunt compileindex,to regenerate the new
- If you take a look inside
index.html,you will notice that there is only one script tag that loads
Unit tests are located in
test\karma-unit.conf.js is the configuration file and you don't need to change anything in it,at least for starters.There is a sample unit test for Resource.Resource is the class that makes all API calls to Yii.The test uses AngularJS's $httpBackend to fake a backend.To run the unit tests,in your command line,run
End To End (e2e) Tests
Make sure you have Java Runtime installed in your machine.
test\protractor.conf.js.You must specify the domain base url of your virtual host as
baseUrl:'http://rest.dev'.Do the same in
params.BASE_URL to be the application base URL-default is
You can find some sample tests in
test\e2e.Make sure the data used in these tests is actual data in the database.Protractor acts like a robot,it will start the browser and perform actions like a real user,(navigate to a url,click a button, etc).See Protractor API for more details.When you have everything set up and ready,run
grunt test:e2e,and the tests will run.
You can run both unit and e2e test in one go with
You can get code coverage reports with
grunt test:coverage.This task will genarate html code coverage reports in
When you compile the project for production,a
music_dbfolder will be generated,sibling to
music_db_src.Before you compile for production,you must change
\music_db_src\ for development,now it has to change to
env task,make sure
env.prod.BASEURL is also set to
templates-main module,and in
views in final require call.Last,run
grunt prod.This task will compile the typescript files, compile the
music_db.Point the browser to
\music_db and the application should load.
It is recommended that you stick with the dependency versions declared in
bower.json as the application is fine tuned to use these.This is specially true with code that is under rapid development like angular-ui-router and Protractor.
Please consider that my instructions are based on my Windows7 development environment,I guess most of it is valid no matter what your environment is.
Angular Music Database is released under the WTFPL license.This means that you can literally do whatever you want with this software.