Skip to content

Instantly share code, notes, and snippets.

@prpatel
Created October 12, 2015 17:57
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save prpatel/7184dfd6d0fd3f8e605f to your computer and use it in GitHub Desktop.

Angular Workshop

Summary

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.

Workshop requirements

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

You are all set! See you soon!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment