angular.js/docs/content/guide/dev_guide.mvc.understanding_model.ngdoc

@ngdoc overview
@name Developer Guide: About MVC in Angular: Understanding the Model Component
@description

Depending on the context of the discussion in the 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
scope 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($scope) {
             // create property 'foo' on the MyCtrl's scope
             // and assign it an initial value 'bar'
             $scope.foo = 'bar';
         }

* Use an {@link expression angular expression} with an assignment operator in templates:

         <button ng-click="{{foo='bar'}}">Click me</button>

* Use {@link api/ng.directive:ngInit ngInit 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, textarea and other form elements:

         <input ng-model="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/ng.directive:ngRepeat ngRepeater}:

         <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}
new batch of docs 2011-06-06 15:50:35 +00:00			`@ngdoc overview`
			`@name Developer Guide: About MVC in Angular: Understanding the Model Component`
			`@description`

docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`Depending on the context of the discussion in the Angular documentation, the term _model_ can refer to`
new batch of docs 2011-06-06 15:50:35 +00:00			`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).`

docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`In Angular, a model is any data that is reachable as a property of an angular {@link`
docs(scope): rewrite 2012-02-28 20:14:47 +00:00			`scope Scope} object. The name of the property is the model identifier and the value is`
new batch of docs 2011-06-06 15:50:35 +00:00			`any JavaScript object (including arrays and primitives).`

docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`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`
new batch of docs 2011-06-06 15:50:35 +00:00			`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:`

docs(compiler): update the compiler docs 2011-12-14 01:55:31 +00:00			`function MyCtrl($scope) {`
new batch of docs 2011-06-06 15:50:35 +00:00			`// create property 'foo' on the MyCtrl's scope`
			`// and assign it an initial value 'bar'`
docs(compiler): update the compiler docs 2011-12-14 01:55:31 +00:00			`$scope.foo = 'bar';`
new batch of docs 2011-06-06 15:50:35 +00:00			`}`

doc(guide): clean up broken links 2012-05-24 21:49:47 +00:00			`* Use an {@link expression angular expression} with an assignment operator in templates:`
new batch of docs 2011-06-06 15:50:35 +00:00
docs(guide/understanding_model): improve example consistency 2013-05-24 22:36:38 +00:00			`<button ng-click="{{foo='bar'}}">Click me</button>`
new batch of docs 2011-06-06 15:50:35 +00:00
docs(): simplify doc urls we now have two types of namespaces: - true namespace: angular. - used for all global apis - virtual namespace: ng., ngMock., ... - used for all DI modules the virual namespaces have services under the second namespace level (e.g. ng.) and filters and directives prefixed with filter: and directive: respectively (e.g. ng.filter:orderBy, ng.directive:ngRepeat) this simplifies urls and makes them a lot shorter while still avoiding name collisions 2012-06-12 06:49:24 +00:00			`* Use {@link api/ng.directive:ngInit ngInit directive} in templates (for toy/example apps`
new batch of docs 2011-06-06 15:50:35 +00:00			`only, not recommended for real applications):`

docs(links): corrected borken links 2012-03-14 02:36:09 +00:00			`<body ng-init=" foo = 'bar' ">`
new batch of docs 2011-06-06 15:50:35 +00:00
			`Angular creates models implicitly (by creating a scope property and assigning it a suitable value)`
			`when processing the following template constructs:`

doc(guide): various fixes and improvements 2011-07-29 19:45:10 +00:00			`* Form input, select, textarea and other form elements:`
new batch of docs 2011-06-06 15:50:35 +00:00
docs(links): corrected borken links 2012-03-14 02:36:09 +00:00			`<input ng-model="query" value="fluffy cloud">`
new batch of docs 2011-06-06 15:50:35 +00:00
			`The code above creates a model called "query" on the current scope with the value set to "fluffy`
			`cloud".`

docs(): simplify doc urls we now have two types of namespaces: - true namespace: angular. - used for all global apis - virtual namespace: ng., ngMock., ... - used for all DI modules the virual namespaces have services under the second namespace level (e.g. ng.) and filters and directives prefixed with filter: and directive: respectively (e.g. ng.filter:orderBy, ng.directive:ngRepeat) this simplifies urls and makes them a lot shorter while still avoiding name collisions 2012-06-12 06:49:24 +00:00			`* An iterator declaration in {@link api/ng.directive:ngRepeat ngRepeater}:`
new batch of docs 2011-06-06 15:50:35 +00:00
docs(links): corrected borken links 2012-03-14 02:36:09 +00:00			`<p ng-repeat="phone in phones"></p>`
new batch of docs 2011-06-06 15:50:35 +00:00
			`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.`

docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`In Angular, a JavaScript object stops being a model when:`
new batch of docs 2011-06-06 15:50:35 +00:00
docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`* No Angular scope contains a property that references the object.`
new batch of docs 2011-06-06 15:50:35 +00:00
docs(guide): minor grammar fixes 2012-09-26 13:30:55 +00:00			`* All Angular scopes that contain a property referencing the object become stale and eligible for`
new batch of docs 2011-06-06 15:50:35 +00:00			`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}`