Home > Developer > Web Develop
modelIn 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".
In ngRepeater the iteration declaration:
<p ng-repeat="phone in phones"></p>
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.
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:
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:
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.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:
spice string model called.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:
ngControllerDirectives are used (implicitly) to create scopes for templates. and use the controller specified in the directive spicyCtrl to enhance 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:
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.
ViewIn 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
