mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 07:40:22 +00:00
f16150d5f1
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
71 lines
2.9 KiB
Text
71 lines
2.9 KiB
Text
@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
|
|
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="{{foos='ball'}}">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}
|