You are viewing revision #1 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.
Angular Music Database ¶
PHP version 5.4 at least is required.This is a requirement for RestFullYii extension
- Clone the git repo
- or [download it](https://github.com/drumaddict/angular-music-db/archive/master.zip),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
`) 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
`,(both local and live on server).
- Fill in database info in
`.(both local and live on server).
- Import the tables in your database from the sql file,
`.Optionally you can import the
`,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
`.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.
`, run in your command line
`.This command will read all the dependencies needed for development workflow from the
file.These dependencies will be downloaded innode_modules
is finished,rungrunt install
`.This will install Protractor,an end to end (e2e) test framework for AngularJS.
`.This will read the
file and download inlibs
folder all but four dependencies which are already in that folder:```angular-table```,```angular-ui-router```,```assets```and```toastr.
`has been slightly modified for the purpose of the application,so downloading the original is not an option.
`is 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.
`and 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
and specify the application's base url.For development, this isAPP_BASE_URL = '/music_db_src/'
`.Set your domain.For exmple,if you work in a virtual host (recommended)
`.You can change the credentials,but then you will have to change them on the server side also ,(see
task,set the base URL for both development and production.You'll be OK if you leave the defaults (```music_db_src``` andmusic_db
`).If for some reason you need to move the base source folder
`in a deeper folder,you must include the whole path from the root.
and make sure'templates-main'
module is commented out.Also inloader.js
you should comment outviews
to copy fonts fromlibs\bootstrap
- Last,run simply
(shortcut forgrunt dev
`).This task will compile the
`and the application should load.
- You can now start developing.If you edit the typescript files they will automatically compile to
every time you save,because of a watcher registered ingrunt ts
task._Don't edit the compiledindex.html
file_.If you need to edit the index file,you must editindex.tpl.html
`and then run
- If you take a look inside
`,you will notice that there is only one script tag that loads
Unit Tests ¶
Unit tests are located in
folder.```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.
`.You must specify the domain base url of your virtual host as
`baseUrl:'http://rest.dev'```.Do the same in
to be the application base URL-default is```\music_db_src\```.
You can find some sample tests intest\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
`,and the tests will run.
You can run both unit and e2e test in one go with
` grunt test
Code Coverage ¶
You can get code coverage reports with
`.This task will genarate html code coverage reports in
When you compile the project for production,a
`folder will be generated,sibling to
`.Before you compile for production,you must change
for development,now it has to change to
is also set to
in final require call.Last,run
`.This task will compile the typescript files, compile the
`.Point the browser to
`\music_db `` and the application should load.
It is recommended that you stick with the dependency versions declared in
` 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.