Model
model
In Angularjs, the word can either represent a (for example, a phones
value called model
, it is a number that contains multiple phone
arrays), or it can represent the entire data model in the application, depending on the context in the Angularjs document we are discussing.
In Angularjs, a model is any of the desirable properties of a Angularjs scope object. The name of the property is the identifier of the model. Its value can be any JavaScript object (including arrays and original objects).
The only requirement to turn a JavaScript object into a model is that the object must be a property reference to the Angularjs scope. This reference can be created both explicitly and implicitly.
You can explicitly create a scope property that references a JavaScript object as follows:
-
Assigns an object directly to the scope object property in JavaScript code, which is common in controllers:
function myctrl ( $scope ) {//create property ' foo ' on the Myctrl ' s scope //and assign it an Initial value ' Bar ' $scope .= ' bar ' ; /span>
To use an expression in a template:
<button ng-click="{{foos=‘ball‘}}">Click me</button>
Use directives in Templates ngInit
(only for instances, not recommended for use in real-world applications):
<body ng-init=" foo = ‘bar‘ ">
When working with a template structure such as the following, ANGULARJS creates the model implicitly (by creating a property of a scope object and assigning the appropriate value to it).
From input, select, textarea, or other form elements:
<input ng-model="query" value="fluffy cloud">
The above code creates a named model in the current scope query
, and the value is set to "Fluffy cloud".
The above code phones
creates a sub-scope for each item in the array. and a named object (model) is created in the respective scope phone
, and its value is set to the current value in the array.
Controller
In Angularjs, a controller is a JavaScript function that is used to enhance a scope instance other than the root scope. When you or Angularjs itself scope.$new
creates a new sub-scope object, there is an option that allows you to pass it as a parameter to the controller. This enables the ANGULARJS to associate the controller with this scope, enhancing the behavior of the scope.
The controller is used for:
- Sets the initial state of the scope object.
- Adds behavior to a scope object.
Set the initial state for the Action object:
In general, when you create an app, you need to set the initial state for its scope.
Angularjs sets the initial state of the scope by invoking the Controller's constructor on the scope object, which is, in a sense, the same as using JavaScript's Apply method. This means that ANGULARJS does not create an instance of the controller type (it does not use the new method to invoke the Controller constructor). The controller is always called on an existing scope object.
You can set the initial state of the initial scope by creating a model property. Like what:
function GreetingCtrl ($scope) {$scope. Greeting = ' hola! ';}
The GreetingCtrl controller creates a model that can be called in a template greeting
.
Adding behavior to scope objects
The behavior of a Angularjs scope object is represented by a scoped method. These methods can be called in a template or in a view. These methods interact with the model of the application and can change the model.
As we said in the chapter of the model, any object (or primitive type) is assigned to a scope and becomes a model. Any method assigned to a scope can be called in a template or view, and can be invoked through an expression or an ng
event instruction. (e.g., Ngclick)
How do we use the controller correctly?
In general, a controller should not do too much work. It should contain only the business logic of a single view.
The most common practice of maintaining a single controller is to extract work that is not part of the controller into the service, and then use the services in the controller through dependency injection. This is discussed in detail in the section on Dependency injection services.
Do not use the controller to do the following things:
- The controller should only care about the business logic. DOM Operations (presentation logic) often make testing difficult. Putting any representation logic into the controller will significantly increase the difficulty of testing the business logic. The ANGULARJS provides for
dev_guide.templates.databinding
automatic DOM manipulation. If you need to manipulate the DOM manually, pull the logic out of the presentation layer into the instruction.
- Format the input-you should use the Angularjs form control to implement formatting.
- Format the output-you should use the ANGULARJS filter to implement:
- Instantiate a component or control the life cycle of other components (such as creating an instance of a service).
You can use the display to scope.$new
relate the controller to the scope object, or implicitly through the ngController
command or $route
service.
Finally, we use examples to explain the controller:
To illustrate how the Angularjs controller component works, let's create a small application that has the following components:
- A template with two buttons and a message
- A
spice
string model called.
- A controller with two methods is Spicyctrl. These two methods are used to set
spice
the value.
<body ng-controller= "Spicyctrl" > <button ng-click= "chilispicy ()" >Chili</button> <button Ng-click= "Jalapenospicy ()" >Jalapeño</button> <p>the food is {{spice}} spicy!</p></body> function = ' very 'function() { = ' chili 'function() { = ' jalapeño ';}}
The message in the template (the contents of the P element) contains a spice
binding to the model whose initial string is "very". This spice model will be set to chili or jalapeno, depending on which button is clicked. The message is 数据绑定
automatically updated. The following are some of the things to note in the example:
ngController
Directives are used (implicitly) to create scopes for templates. and use the controller specified in the directive spicyCtrl
to enhance the scope.
- Assigning a new property to the scope object creates or updates the model.
- The methods used in the controller can be called in the template (in the BODY element or in the child element).
- The old version of Angularjs (before 1.0RC) automatically adds a method to the scope object prototype, and now it won't. All methods must be manually added to the scope.
The Controller method can accept parameters such as:
<body ng-controller= "Spicyctrl" > <input ng-model= "customspice" value= "wasabi" > <button ng-click= " Spicy (' chili ') ">Chili</button> <button ng-click=" spicy (customspice) ">custom spice</button> <p>the food is {{spice}} spicy!</p></body>function= ' very 'function (Spice) { = Spice;}}
in the SpicyCtrl
controller, only a method called spicy is defined, which accepts a parameter called Spice. The template associated with this controller passes a constant in the first button event chili
to the method in the controller, passing a model property in the second button.
Example controller inheritance:
Controller inheritance in Angularjs is scoped-based inheritance, such as:
<body ng-controller= "Mainctrl" > <p>good {{timeOfDay}}, {{name}}!</p> <div ng-controller= " Childctrl "> <p>good {{timeOfDay}}, {{name}}!</p> <p ng-controller=" Babyctrl ">good {{TimeOfDay}} {{Name}}!</p></body>function Mainctrl ($scope) {$scope. TimeOfDay = ' Morning ' = ' Nikki ' Span style= "color: #000000;" >;} function Childctrl ($scope) {$scope. Name = ' Mattie '
Notice how we nested our instructions in the template ngController
. This template structure allows Angularjs to create four scopes for a view:
- Root scope
- The Mainctrl scope, which contains the model TimeOfDay and model name.
- Childctrl scope, which inherits the timeofday of the upper scope, and the name is replicated.
- Babyctrl scopes, which replicate the name in TimeOfDay and Childctrl defined in Mainctrl.
Controller inheritance and model inheritance are the same principle.
Note: Regular prototype inheritance does not work for the controller. Because, as we mentioned earlier, the controller is not instantiated directly, but is called on the scope object.
View
In Angularjs, the view refers to the DOM after the browser is loaded and rendered, and in Angularjs, based on the template, controller, and model information.
In Angularjs's implementation of MVC, the view is known to model and controller. The view knows the two-way binding of the model, and the view knows by instruction that the controller, such as ngController
and ngView
instructions, can also be known through bindings, such as {{someControllerFunction()}}
. In these ways, the view can invoke methods in the corresponding controller.
Come on!
Angularjs Development Guide 11:angularjs Model,controller,view detailed