<!DOCTYPE html> <html> <head> <script src="angular.js"></script> </head> <body ng-app ng-init="firstName = 'John'; lastName = 'Doe';"> <strong>First name:</strong> {{firstName}}<br /> <strong>Last name:</strong> <span ng-bind="lastName"></span> </body> </html>



Every HTML attribute specific to AngularJS is called directive and has a specific role in an AngularJS application.

We say that the HTML page is a template because it's not the final version of what will be rendered by the web browser and visible to the user, but it's in fact just the structure of the web page before it's processed by AngularJS.

The ng-app directive marks the DOM element that contains the AngularJS application.

We initialize a couple of variables firstName and lastName through the ng-init directive.

A data binding can be specified in two different ways:

  • with curly braces: {{expression}}
  • with the ng-bind directive: ng-bind="varName"

We're saying one way data binding because the model values (here the variables represent the model) are automatically assigned to the HTML placeholder elements specified through the data binding notation, but the HTML elements don't change the values in the model (one way).