Frederik Dietz - Recipes with Angular.js

This is your first angular expression: {{ 1 + 2 }}

Tip: You can check out a complete example on github.

Adding the ng-app directive tells Angular to kick in its magic. The expression {{ 1 + 2 }} is evaluated by Angular and the result 3 is rendered. Note that removing ng-app will result in the browser rendering the expression as is instead of evaluating it. Play around with the expression! You can, for instance, concatenate Strings and invert or combine Boolean values.

For reasons of brevity we will skip the boilerplate code in the following recipes.

You want user input to be used in another part of your HTML page.

Use Angulars ng-model directive to bind the text input to the expression.

You can find the complete example on github.

Assigning name to the ng-model attribute and using the name variable in an expression will keep both in sync automatically. Typing in the text input will automatically reflect these changes in the paragraph element below.

Consider how you would implement this traditionally using jQuery: