# CS142 Project#4 Angular Example

Update the motto:

This page is an example of Angular view template processing. It runs with the controller located in `components/example/exampleController.js`. It looks like standard HTML that is extended annotations that are processed by Angular.

### Scope to template binding

Note angular replaces "`{{propertyName}}`" with the value of propertyName in the controller's scope. (i.e. $scope.propertyName).

The controller sets the scope's property `name` (see the assignment to `$scope.name` in `exampleController.js`) from the model in the DOM which has a value of "{{name}}" so:

    <p>My name is "{{name}}".</p>

should render as:

My name is "{{name}}".

### Two-way Binding

Angular also supports two-way binding where input into the template is pushed into the scope variable. For example the following code will create an input box where the characters show up in the scope property `textInput`

    <label>Input some text: <input type="text" ng-model="textInput"></label>

renders as:

Input some text:

and characters typed into the box will appear in the scope variable `textInput` which currently has a value of "{{textInput}}".

### Conditional DOM elements

Angular supports conditional templates so the code:

    <p>A paragraph will appear between this paragraph</p>
    <p ng-if="textInput">This text will appear when textInput is truthy. testInput === {{textInput}}</p>
    <p>... and this one when some characters are typed.</p>

will show the middle paragraph only if some characters have been entered into `textInput`. Give it a try by entering some characters in the text box above.

A paragraph will appear between this paragraph

This text will appear when textInput is truthy. testInput === {{textInput}}

... and this one when some characters are typed.

### Event input

Angular handles events by evaluating JavaScript (like DOM event handlers). The following code will call the scope function `buttonClick` when the button in pushed.

    <p>Test button click. <span ng-if="buttonWasClicked">Last button clicked was: {{buttonWasClicked}}</span></p>
    <button ng-click="buttonClick('one')">Call buttonClick function with one</button>
    <button ng-click="buttonClick('two')">Call buttonClick function with two</button>

Test button clicks. Last button clicked was: {{buttonWasClicked}}