diff options
| author | Igor Minar | 2011-06-06 08:50:35 -0700 |
|---|---|---|
| committer | Igor Minar | 2011-06-06 22:52:02 -0700 |
| commit | 7f1e2e48467f80cc083d24b44f088620e4e7bcb6 (patch) | |
| tree | 731a91366c5780985be6d4c5ddbe34e307d5cb70 /docs/content/guide/dev_guide.mvc.understanding_model.ngdoc | |
| parent | 5533e48dead5cff3107e72ee80bf0f19df77c1e9 (diff) | |
| download | angular.js-7f1e2e48467f80cc083d24b44f088620e4e7bcb6.tar.bz2 | |
new batch of docs
Diffstat (limited to 'docs/content/guide/dev_guide.mvc.understanding_model.ngdoc')
| -rw-r--r-- | docs/content/guide/dev_guide.mvc.understanding_model.ngdoc | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc b/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc new file mode 100644 index 00000000..15d8bcb2 --- /dev/null +++ b/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc @@ -0,0 +1,96 @@ +@workInProgress +@ngdoc overview +@name Developer Guide: About MVC in Angular: Understanding the Model Component +@description + + +Depending on the context of the discussion in angular documentation, the term _model_ can refer to +either a single object representing one entity (for example, a model called "phones" with its value +being an array of phones) or the entire data model for the application (all entities). + + +In angular, a model is any data that is reachable as a property of an angular {@link +dev_guide.scopes Scope} object. The name of the property is the model identifier and the value is +any JavaScript object (including arrays and primitives). + + +The only requirement for a JavaScript object to be a model in angular is that the object must be +referenced by an angular scope as a property of that scope object. This property reference can be +created explicitly or implicitly. + + +You can create models by explicitly creating scope properties referencing JavaScript objects in the +following ways: + + +* Make a direct property assignment to the scope object in JavaScript code; this most commonly +occurs in controllers: + + + function MyCtrl() { + // create property 'foo' on the MyCtrl's scope + // and assign it an initial value 'bar' + this.foo = 'bar'; + } + + +* Use an {@link dev_guide.expressions angular expression} with an assignment operator in templates: + + + <button ng:click="{{foos='ball'}}">Click me</button> + + +* Use {@link api/angular.directive.ng:init ng:init directive} in templates (for toy/example apps +only, not recommended for real applications): + + + <body ng:init=" foo = 'bar' "> + + +Angular creates models implicitly (by creating a scope property and assigning it a suitable value) +when processing the following template constructs: + + +* Form input, select, and textarea elements: + + + <input name="query" value="fluffy cloud"> + + The code above creates a model called "query" on the current scope with the value set to "fluffy +cloud". + + +* An iterator declaration in {@link api/angular.widget.@ng:repeat ng:repeater}: + + + <p ng:repeat="phone in phones"></p> + + + The code above creates one child scope for each item in the "phones" array and creates a "phone" +object (model) on each of these scopes with its value set to the value of "phone" in the array. + + +In angular, a JavaScript object stops being a model when: + + +* No angular scope contains a property that references the object. + + +* All angular scopes that contain a property referencing the object become stale and eligible for +garbage collection. + + +The following illustration shows a simple data model created implicitly from a simple template: + + +<img src="img/guide/about_model_final.png"> + + + + +## Related Topics + + +* {@link dev_guide.mvc About MVC in Angular} +* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component} +* {@link dev_guide.mvc.understanding_view Understanding the View Component} |