This code snippet introduces 10 basic AngularJS  concepts for beginners by building a very simple application. The application enables users to maintain a to do list with basic add, edit, and remove features. Additional features include sorting, ability to mark each item as complete etc. In this application, following concepts are introduced:

  1. angular.module, ng-app, and ng-controller: setting up the bare-bone structure of an AngularJS application
  2. ng-model: two-way data binding
  3. {{  }}: data binding expression
  4. ng-disabled: enabling/disabling widgets
  5. ng-show: controlling the visibility of widgets
  6. ng-class: controlling the appearance of widgets
  7. ng-click and ng-keypress: handling click and key press events
  8. JSON: woking with JSON objects and collections
  9. ng-repeat: rendering collections
  10. ui-sortable: enabling sorting by dragging

Here is the final result of the application followed by the source code. You can play with the code and create your own version of the app @ jsfiddle.net.

Continue reading