JumpStart Angular : Model Binding

In last post we saw how to setup local environment for angular. In this post we will learn the MVC capabilities to create a dynamic view. We will create controller & model and bind the model data to views. We will create some sample exercises to demonstrate these.

Controller and Models in angular

  1. ng-controller

    ng-controller directive declares the controller to be used with in its DOM.
    <div ng-controller="myController">
    ::::
    </div>
    Here myController represents a javascript function. A controller can be defined in several ways. The easiest way is to create a JavaScript function and include the scipt in your Html page.
    function myController($scope){
    ::
    ::
    }
    When angular finds a ng-controller directive, it creates a controller instance and injects required services. Among these services $scope is most important. A page can contain several Controllers, even controllers can be nested.
  2. $scope

    $scope is the data model that binds view and controller. $scope defines the executionContext for the DOM elements with in specific ng-controller directive.All of the properties and methods are defined in $scope context.$scope has two primary apis ($watch and $apply) that helps in data-binding. $watch observes the changes in model and triggers a change notification when any model is changed. $apply will apply these changes and updates the view.
    Whenever angular compiles the view template, it finds the ng-model directive and sets a $watch expression on these property. When angular finds an expression {{..}} it executes in $scope context. By default when we declare ng-app directive, it creates a $rootScope.


    Here we have defined name variable in $scope context and email variable in $rootScope. $rootScope is available anywhere with in ng-app. In above example we have injected both $scope and $rootScope into myController.
  3. ng-click

    We have added model and properties to $scope and linked to view. Now lets add some behavior to $scope.Lets add a button to HTML and on click of the button display a message. ng-click directive is used to trigger a click event and we can add a behavior to it.


  4. ng-repeat

    ng-repeat directive is used to repeat over a list of items. Any DOM with ng-repeat will be repeated along with its child DOM. But all expressions with in ng-repeat will be executed in parent context. In below code {{name}} will run in class context. To access individual item we can use {{item.property}}. ng-repeat scope contains some useful variables like $index,$first,$last etc.

Demo 1: Angular calculator

Using above concepts lets create a calculator. ng-repeat will loop through numbers and operators and attaches properties and behaviors.
For live demo visit github page. Find JSFiddle code block as following. Angular minimizes the html code and moves the logic to controller keeping the view clean. I have used underscore js for few of the operations.

Demo 2: ELibrary - Display books

Lets start building our ELibrary application. You can download the module from git-hub. but i would suggest to use the code for reference and try building of your own. You are always welcome to fork the branch and suggest improvements. For live demo visit ELibrary-start Below is the JSFiddle codes.

Exercises

  1. Create a sample registration form and display user information on click of "Register".
  2. Try out other angular events.(like ng-mouseover)
  3. Display a series of students and on click of each student display their details.