KONA Quick Starter Employees list

Getting Started offline

This is the first quick starter app between angular.js and kona.

All randomly generated photos are copyrighted under a Creative Commons BY-NC-SA 2.0 license. These photos were hand picked from Greg Peverill-Conti's 1,000 faces project.

http://randomuser.me/ http://creativecommons.org/licenses/by-nc-sa/2.0/deed.en http://www.flickr.com/photos/gregpc/

Prerequisites

You need git to clone the kona-employees-list repository. You can get git from http://git-scm.com/.

We also use a number of node.js tools to initialize and test kona-employees-list. You must have node.js and its package manager (npm) installed. You can get them from http://nodejs.org/.

Clone kona-employees-list

Clone the kona-employees-list repository using git:

git clone https://github.com/sjcotto/KQuickStarter-
cd kona-employees-list

If you just want to start a new project without the kona-employees-list commit history then you can do:

git clone --depth=1 https://github.com/angular/kona-employees-list.git <your-project-name>

The depth=1 tells git to only pull down one commit worth of historical data.

Install Dependencies

We have two kinds of dependencies in this project: tools and angular framework code. The tools help us manage and test the application.

• We get the tools we depend upon via npm, the node package manager.
• We get the angular code via bower, a client-side code package manager.

We have preconfigured npm to automatically run bower so we can simply do:

npm install

Behind the scenes this will also call bower install. You should find that you have two new folders in your project.

• node_modules - contains the npm packages for the tools we need
• app/bower_components - contains the angular framework files

Note that the bower_components folder would normally be installed in the root folder but kona-employees-list changes this location through the .bowerrc file. Putting it in the app folder makes it easier to serve the files by a webserver.

Run the Application

We have preconfigured the project with a simple development web server. The simplest way to start this server is:

npm start

Now browse to the app at http://localhost:8000/app/index.html.

Directory Layout

app/                    --> all of the source files for the application
  app.css               --> default stylesheet
  bower_components/     --> dependencies
  controllers/
    mainController.js
    editController.s
  app.js                --> main application module
  index.html            --> app layout file (the main html template file of the app)
  index-async.html      --> just like index.html, but loads js files asynchronously
karma.conf.js         --> config file for running unit tests with Karma

Updating Angular

Previously we recommended that you merge in changes to kona-employees-list into your own fork of the project. Now that the angular framework library code and tools are acquired through package managers (npm and bower) you can use these tools instead to update the dependencies.

You can update the tool dependencies by running:

npm update

This will find the latest versions that match the version ranges specified in the package.json file.

You can update the Angular dependencies by running:

bower update

This will find the latest versions that match the version ranges specified in the bower.json file.

Loading Angular Asynchronously

The kona-employees-list project supports loading the framework and application scripts asynchronously. The special index-async.html is designed to support this style of loading. For it to work you must inject a piece of Angular JavaScript into the HTML page. The project has a predefined script to help do this.

npm run update-index-async

This will copy the contents of the angular-loader.js library file into the index-async.html page. You can run this every time you update the version of Angular that you are using.

Running the App during Development

The kona-employees-list project comes preconfigured with a local development webserver. It is a node.js tool called http-server. You can start this webserver with npm start but you may choose to install the tool globally:

sudo npm install -g http-server

Then you can start your own development web server to serve static files from a folder by running:

http-server -a localhost -p 8000

Alternatively, you can choose to configure your own webserver, such as apache or nginx. Just configure your server to serve the files under the app/ directory.

Contact

For more information on AngularJS please check out http://angularjs.org/ FOr more information on KONA Cloud please check out http://konacloud.io