Expressions

AngularJS expressions are written with double curly braces: {{expression}} or with the ng-bind directive (ng-bind="expression"). They will render data where the expression is written. Another way of saying this is that the expression will be RESOLVED, and will RETURN a RESULT at the expression location. Unlike JavaScript expressions, Angular expressions:

Can be written an INSIDE HTML element
Do not support conditionals (if statement), loops, and exceptions
Support filters

Tthe following expression will result in: Five plus five is 10 and My name is Cornelius Chopin

<div ng-app="">
<p>Five plus five is: {{  5 + 5 }}</p>
<p>My name is: {{"Cornelius" + " " + "Chopin"}}</p>
</div>

Expression Demo 1

The example below requires you to enter data into an input field and as a result requires the ng-model directive:

<div ng-app="">
<p>Enter Your Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>

Expression Demo 2

In a previous demo under the Directives menu, the ng-bind directive was used instead of an expression ({{name}}) but the result is the same.

<div ng-app="">
<p>Enter Your Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>

Directive Demo

NOTE: In the MVC methodology:

The MODEL is the data available for the current view.
The VIEW is the HTML container where the Angular JS application is DISPLAYED using the two methods previously discussed (ng-bind directive or the double curly braces). In the examples above, the view is the <p> tag. Hence, two-way binding is accomplished between the model and the view. When the data model changes, the view change to reflect it AND when the view changes, the data model change to reflect it. The CHANGE happens immediately and automatically to ensure that the model and the view is updated at all times.
You can also use the ng-model directive on HTML control elements to bind the model to the view.
The CONTROLLER is the JavaScript function that controls the data.

TIP: Notice that the ng-model is used to “model” (like a fashion model) the data of the input field.
AngularJS is no different than other JavaScript when it comes to:

Numbers
Strings
Objects
Arrays
Literals, operators, and variables.

Numbers

Using numbers in AngularJS is no different from any other programming language. In the example below, the result will be: Total: $5.

<div data-ng-app="" data-ng-init="quantity=1; price=5">
  <h2>Cost Calculator</h2>
  <p>Quantity: <input type="number" ng-model="quantity"></p>
  <p>Price: <input type="number" ng-model="price"></p>
  <p><strong>Total: $</strong>{{quantity * price}}</p>
</div>

Expression: Number Demo

NOTE: Notices that two text input fields are bound together with the two ng-model directives. If you did not include the data-ng-init directive, the app would still work but you would see NaN displayed (e.g., Total: $NaN).

Strings

Using strings in AngularJS is no different from any other programming language. In the example below, the result will be: Full name: Cornelius Chopin

<div ng-app="" ng-init="firstName='Cornelius'; lastName='Chopin'">
  <p>Full name: {{firstName +  " " + lastName}}</p>
</div>

CAUTION: Notice that the values for the array are in single quotes because double quotes are used to wrap the entire directive.

Expression: String Demo

Objects

Using objects in AngularJS is no different from any other programming language. In the example below, the result will be: Last name: Chopin

<div ng-app="" ng-init="person={firstName:'Cornelius',lastName:'Chopin'}">
  <p>Last name: {{person.lastName}}</p>
</div>

CAUTION: Notice that the values for the person object are in single quotes because double quotes are used to wrap the entire directive.

Expression: Object Demo

Arrays

Using objects in AngularJS is no different from any other programming language. In the example below, the result will be: Day 2 is Tuesday. Remember an array is zero-based indexed so the index of 1 will return the second value in the array.

<div ng-app="" ng-init="workdays = ['Monday','Tuesday','Wednesday','Thursday','Friday']">
  <p>Day 2 is {{workdays[1]}}</p>
</div>

CAUTION: Notice the ng-init value is enclosed is double quotes but the array indexes are enclosed in single quotes.

Expression: Array Demo

Since loops and arrays are "kissing cousins", the ng-repeat directive can be used to iterate through an array to dynamically create a list of items in a collection (array):

<div ng-app="" ng-init="workdays = ['Monday','Tuesday','Wednesday','Thursday','Friday']">
  <p>Days of the work week:</p>
  <ul>
     <li ng-repeat="days in workdays"> {{days}}</li>
  </ul>
</div>

NOTE: The <li> tag is repeated with "days in workdays" for as many time as there are elements in the workdays array--in this case, five times. Where days represents the element that will be resolved in the <li> tag to a day of the week.

Expression: Array and Looping Demo

The ng-repeat directive can also be used to iterate to an array of objects:

<div ng-app="" ng-init="names=[
{firstName:'Cornelius', lastName:'Chopin'},
{firstName:'Sheila', lastName:'Chopin'},
{firstName:'Joshua', lastName:'Chopin'},
{firstName:'Josiah', lastName:'Chopin'},
]">

<p>Family members:</p>
<ul>
  <li ng-repeat="x in names">{{x.firstName + " " +  x.lastName}}</li>
</ul>
</div>

NOTE: While using an array or an array of objects is good for prototyping an application, it is best practice to retrieved the data from a database source.

Expression: Array Of Objects Demo

CSS

Expressions can also be used to change CSS properties values. For example, the code below will allow a user to change the background color to whatever is entered into the input field:

<div ng-app="">
  <p>Type in a valid color</p>
  <input style="background-color:{{myCol}}" ng-model="myCol">
</div>

NOTE: Notice again how the ng-model is used to model the data for the input field. You could set an intial value (e.g. <div ng-app="" ng-init="myCol='red'">. Notice also that the ng-model directive is typically used to model the data for anothher HTML element. However, in this case, it is "modeling" the data for the same HTML element (the <input> element) that it is written in.

<div ng-app="" ng-init="myCol='red'">
  <p>Type in a valid color</p>
  <input style="background-color:{{myCol}}" ng-model="myCol">
</div>

Expression: CSS Demo