exhtml
1/5/2018 - 2:02 PM

Angular binding

// 1. BINDING: 
// https://docs.angularjs.org/guide/databinding
// Binding allows us to automatically synchronize data between our views and our models
// allowing our models to be the "single-source-of-truth" in our application.


// Create a text input that has an ng-model attribute of "message"
<div ng-app>
  <input type="text" ng-model="message"> //ng-model binds a variable from an input field to a scope variable
  <p>{{ message }}</p>
</div>
//*Ampliar angular expressions: https://docs.angularjs.org/guide/expression


// Another way to use binding in Angular applications is to use the ng-bind directive.
// is used as an element so our expressions will be hidden from the users 
// until they are ready to be displayed (avoid the flashing of {{}} when loading contents)
// The downside is that the entire inner text of the element gets replaced
// with what the expression returns
<p ng-bind="message"></p>

//
// One-Time Binding
// the data is only read once from the source, then the data between the source and the view
// are no longer synchronized. Much less resource intensive way of displaying static data 
// or data that only needs to be read once
<input type="text" ng-model="message" ng-init="message = 'hello'">
<p ng-bind="::message === 'hello'"></p>

//
// ng-init evaluates the given expression once when the element is initialized. 
// *ng-init shouldn't be used regularly! you should be initializing your variables in your controllers