CS142 Project#4 Angular Example

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.

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>