Introductory Angular Lab

The following challenges are designed to introduce you to Angular:

  • Setting up an angular application
  • Rendering data
  • Creating a module
  • Creating controllers
  • Passing values between the controllers and views
  • Two-way data-binding & view-models

Setup

For each challenge, open the corresponding index.html page in your browser. E.g. challenge_1/index.html

On each challenge page, follow the instructions to setup angular. Then move on to the exercises.

You will need to make changes in index.html and app.js.

Keep your Chrome Developer Console open, and make sure you're working in the correct file!

Challenges

  1. Rendering Data in Angular
  2. Using Controllers to hide logic
    • Render data about yourself
    • Render data about your class
  3. Two-Way Data-binding
    • Play with view-models (ng-model)
    • Create a simple calculator
    • Create a loan interest calculator

Licensing

All content is licensed under a CC­BY­NC­SA 4.0 license. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.