AngularJS Workshop - Coding Serbia 2014

If you are reading this, then you are probably here because one of the trainers has given you this URI. If not, then most of this information may not be of interest to you. Should you be interested in this or similar workshops, please contact our training team (workshop is available in German and English).

URL

http://tinyurl.com/coding-serbia-angularjs

Slides

Introduction

Who we are, what we do and what the workshop is about
JavaScript Basics

Introduction to JavaScript, basic features and common pitfalls. Start here, if you are new to JavaScript or want to learn more about the language of the workshop.
AngularJS Basics

The workshop's tasks focus on AngularJS basics in the beginning. These slides will get you up to speed in no time.

Source Code

In this workshop, we will work on an AngularJS app called the movie database. It is a very simple application that allows you to manage information about movies. You can create, edit and delete movie information.

All the project's sources are available in this GitHub repository: codecentric/coding-serbia-angularjs-workshop. The virtual machine (see below) already has a clone of this repository, so all you need to do is a git pull to get the latest updates. If you install the tools natively without using the virtual machine, you can get a copy of the repository by doing

git clone https://github.com/codecentric/coding-serbia-angularjs-workshop.git

Installation of necessary software

We provide an Ubuntu-based virtual machine that can be run using Oracle VirtualBox. The virtual machine plus installation files for VirtualBox for various operating systems are on the memory stick that you should have received. You can of course also install the necessary software directly on you machine, without using a virtual machine. Since we only have four hours for the workshop the VM might be the easiest option, though.

Using the Virtual Machine

Install VirtualBox, either from the provided memory stick or by downloading it from virtualbox.org. You can also use your system's package manager to install it. VirtualBox versions 4.2.x and 4.3.x and should do fine.

Once VirtualBox is installed you can start VirtualBox and import the virtual machine from the memory stick (agile-javascript-vm.ova): File -> Import Appliance. Follow the wizard until the end and start the virtual machine.

Log in with the ccworkshop account. The password is codecentric. If you open a shell with the provided desktop icon you will be automatically in the project directory, /home/ccworkshop/angularjs-workshop.

Do a git pull, just in case there were updates to the codebase after the virtual machine has been created.

You should now be good to go!

Make sure that you install the guest additions to get the best workshop experience!

Native installation

Installing the required tools natively on your machine might require some time but is an alternative to using the virtual machine.

Providing detailed installation instructions for all the tools is out of scope for this document. Most of the necessary tools feature an excellent documentation that you can refer to should you run into any issues.

git (the version control system)
Node.JS, version 10 (includes npm, a package manager for Node.js). On OS X and Linux you can use NVM (Node Version Manager) instead of installing Node.js directly. NVM allows you to install global modules without super user privileges. To install NVM you need to have git and curl installed.
Once Node.js and npm are installed, you will need to globally install the Grunt command line interface. You can do so by running npm install -g grunt-cli. Depending on your setup, you might need to prepend sudo to get the necessary privileges.
Some code editor that offers basic support for HTML, CSS and JavaScript (syntax highlighting, maybe formatting). Basically you can use any editor you like and are comfortable with. If you don't have strong feelings about your favorite editor or your current editor does not support HTML, CSS and JavaScript very well, here are some recommendations: Sublime Text, Atom Editor or WebStorm.
At last, you will need a relatively new web browser. Chromium derivatives like Google Chrome, Chrome Canary or Chromium itself would be our choice.

Get a copy of the training repository:

git clone https://github.com/codecentric/coding-serbia-angularjs-workshop.git

Workshop Material

So now you have installed all necessary software, you have cloned the movie-database repository and you want to start hacking! Here are some information, you might find useful.

Quickstart Guide

The fastest way to get you working on the movie-database. Explanation of the most important grunt-task grunt dev and more.

Tasks and User Stories

The tasks for the workshop. Starting from some easy ones to make you familiar with AngularJS and NodeJS, up to completely new features like Twitter integration.

Documentation

Documentation of the movie-database internals, configuration, available grunt-tasks.

Useful Links

A list of links to tutorials and reference documentation of the frameworks used in the movie-database project.