AngularJS Up and Running Lesson 2: Directives and Expressions

In AngularJS , Directives and Expressions form the crux of what you can show on the web page by applying a specific behaviour on the DOM elements and expressions power the page by processing the logic given in the double curly braces and outputting the result where they are used.
In simple terms, when you use a directive on a DOM element and the compiler matches these directive ( or instruction) internally it alters the behavior of the element to suit you instruction.
From Data Binding by using ngbind, or dividing your application in modules or instructing code as controller to altering DOM element behaviour to Events there is a truck load of inbuilt directives.
Or you can always create you own directives.
Lets see an example, and dissect some of the directives.
  1. <html>
  3. <head>
  4. <title> Directives</title>
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  7. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  8. </head>
  10. <body>
  11. <div class="jumbotron">
  12. <h1>Directives and Expression</h1>
  13. </div>
  15. <div ng-app = ""
  16. ng-init = "teams = [{city:'Manchester',name:'Manchester United'},
  17. {city:'London',name:'Arsenal'},
  18. {city:'Aston',name:'Aston Villa'},
  19. {city:'Madrid',name:'Real Madrid'},
  20. {city:'Barcelona',name:'Barcelona'}]"
  21. class="container">
  23. <div class="panel panel-default">
  24. <label for="email">Email address:</label>
  25. <input type = "text" ng-model = "name" class="form-control"></p>
  26. <p>Your Email is : <span ng-bind = "name"></span>.</p>
  27. </div>
  29. <p>Check out some of my favourite EPL teams:</p>
  31. <div class="panel panel-default">
  32. <ol class="list-group">
  33. <li ng-repeat = "team in teams" class="list-group-item">
  34. {{ 'City: ' + team.city + ', Team: ' + team.name }}
  35. </li>
  36. </ol>
  38. </div>
  39. <input type="checkbox" ng-model="hideMe"/> Hide it
  41. <div class="panel panel-default">
  42. <div ng-hide="hideMe">
  44. I will be hidden once U click the check box!
  46. </div>
  47. </div>
  49. <br/>
  50. <button ng-click="name='some@email.com'" class="btn btn-success">Put Some Email ID </button>
  52. </div>
  54. <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  56. </body>
  57. </html>

In the above code we have some directives, lets go one by one and see what they do:
a)  ng-init : It initialises a variable, here in the code an array is being filled with some default values.
b) ng-model : Binds a field’s data with an property, and updates it on the view as and when the fields value is updated.
c) ng-bind : Its another way of binding and displaying the fields value on the page, beside you can always use {{}}.
d) ng-repeat :Remember the enhanced for loop in Java, this directive loops through the array and gets one element from it and gives you the value to play with.
e) ng-hide and ng-click are directives which control and work with events and one hides and part of the page and the other reacts to a click respectively.

This are just some of the directives to get your curiosity up and running ( and getting your feet wet) you will be working with these a lot once you jump into AngularJS.

Comments

Post a Comment