This will be a 5-Part series to showcase how easy and fun it is to write an AngularJS application. It is a first article of the series where I’m going to give you an overview of the whole application and the utilities we’ll need to get going.
The application we’ll build is called an eLearning player – a building block for more conventional eLearning courses to be run on created with authoring tools. You can learn more about it on upsidelearning and wikipedia. Such players basically consist of different kinds of templates/activities backed by XML/JSON data (produced by Authoring Tools).
These are some of the tools we’ll use to make the development more enjoyable and sexy. I’m not going to fill this post with all the installation stuff so visit below sites and have it installed for you.
- Yeoman – The Workflow Tool
I assume that you have setup above mentioned tools so lets create a scaffold for our application. Type following commands in a terminal:
$ mkdir eShell && cd eShell $ yo angular Error angular Invalid namespace: angular (or not yet registered). Registered: 4 namespace(s). Run with the `--help` option to list them.
In case you get above error, run following commands:
$ sudo npm install generator-angular $ sudo npm install generator-karma $ yo angular Would you like to include Twitter Bootstrap? (Y/n) Y If so, would you like to use Twitter Bootstrap for Compass (as opposed to vanilla CSS)? (Y/n) Y Would you like to include angular-resource.js? (Y/n) Y Would you like to include angular-cookies.js? (Y/n) n Would you like to include angular-sanitize.js? (Y/n) Y
Finally, run following command as per the instruction to install the required dependencies.
$ sudo npm install && bower install $ grunt server
If you see, Allo, Allo in a browser that means we’ve achieved our first target. Good Job!!!
Karma Testrunner Setup
In case you want Karma to suit your need, you can simply edit karma.conf.js and karma-e2e.conf.js. Mainly we need to change a port, runnerPort (if ports are in use) and browsers to run tests against. By default, it’s Chrome.
// Karma configuration // base path, that will be used to resolve files and exclude basePath = './'; // enable / disable watching file and executing tests whenever any file changes autoWatch = true;
Finally, run below command which should capture browsers for testing as per karma.conf and will evaluate all tests on every file save (in your choice of IDE).
$ karma start
Checkout Part 2.