Angular Workshop

Tuesday, 9:00 AM MDT - STANDLEY II

Angular is a new JavaScript framework from Google. If you are looking into developing rich web applications, Angular is your friend. Angular embraces HTML and CSS, allowing you to extend HTML towards your application, and uses plain JavaScript which makes your code easy to reuse, and test. In this workshop we will start from the ground up, and build our way through a simple application that will let us explore the various constructs, and the familiarize ourselves with some of the new terminology in Angular.

In this workshop we will get down and dirty with Angular. In this workshop we will start with the very basics of how to boostrap our AngularJS application, and work slowly towards making REST-ful AJAX requests to a backend. List of topics include

Bootstrapping an AngularJS application using ng-app
ng-init and the evaluation {{ }} directive
A brief look at $rootScope
ng-model
Controllers, Dependency Injection, and the View-Model (controller as syntax)
Looping using ng-repeat
Forms using ng-form, form validation and submission in AngularJS
Angular provided filters and how to write our own
Factories
Making AJAX requests using $http
Routing and route params using $routeProvider and $routeParams

If time permits we will discuss a few good practices when working with AngularJS applications.

This is a hands on tutorial so bring your laptops!

Workshop Requirements

This session is a workshop. Please come prepared.

Software needed

Java 1.6 or greater
- Please note that if you are running a JVM other than the standard SDK we might run into issues. It's preferred that you have the standard Oracle installation on your machine
FireFox or Google Chrome
Git
- There are downloads available for all major platforms. Note that if you use HomeBrew simply brew install git
Leiningen
- There are downloads available for all major platforms. Note that if you are on a Mac and have HomeBrew installed this is a one-liner
You favorite text editor or JavaScript IDE. Some suggestions are
- SublimeText
- Emacs/VI
- IntelliJ

Test the install

Make sure Git is available on your path

Open up a new terminal window    
$ git --version  
> # Anything greater than 2 will do
> git version 2.1.3

Make sure leiningen is available

$ lein --version
> Leiningen 2.5.1 on Java 1.8.0_40 Java HotSpot(TM) 64-Bit Server VM

Workshop

If you have an account on Github, feel free to fork the repository and then clone it.
Clone the repository on Github
At a terminal, cd into a directory and run git clone git@github.com:looselytyped/angudone-workshop.git. Note that if you did fork the repository under your account your URL will be something like git@github.com:<YOUR-ACCOUNT-NAME>/angudone-workshop.git

Wake up the application

# at the terminal
# cd to where you cloned the repository above. 
$ git checkout master-1.4
$ lein ring server
# This will download a whole bunch of files from Maven Central 
# and will end with
# Started server on port 3000

This should automatically open up your default browser to http://localhost:3000/ (If it does not just go to that URL). You should see a HTML page announcing Angudone

Ensure that the REST endpoints are active
- If you are using FireFox then Right-Click -> Inspect Element (this will open the Inspector) and then go to the Console tab
- If you are using Chrome then Right-Click -> Inspect Element (this will open the Chrome Inspector) and then go to the Console tab (right most)

Both Consoles give you the ability to run JavaScript code. Run the following

http.get("todos")
.success(function(data, status, headers, config) {
    console.log("There are " + data.length + " todos");
}).error(function(data, status, headers, config) {
    console.error("Oh Noes! Something went wrong" + data);
});

You should see a a valid response indicated by There are 0 todos