Models and controllers-initial stages

About MVVM

Developing ANGULARJS for client applications absorbs the traditional MVC fundamentals. The MVC (Model-view-controll) design pattern may mean different things to different people, and Angularjs does not implement MVC in the traditional sense, much closer to MVVM.

The MVVM pattern is the abbreviation for the Model-view-viewmode pattern. Consists of a view, a view model (ViewModel), a model, and three parts that implement UI logic, rendering logic and state control, and separation of data from business logic.

Model will interact with ViewModel (via $scope object) and will listen to the model changes. These can be sent and rendered by view, and the HTML will show your code. View can be dominated by $routeprovider objects, so you can link and organize your view and controller in depth, turning them into navigation URLs. Angualrjs also provides a stateless controller that can be used to initialize and control $scope objects.

Model, like the MVC pattern, models are used to encapsulate data related to the business logic of an application and how to handle the data. It has the right to direct access to the data, such as access to the database, model does not depend on view and ViewModel, that is, the model does not care how it will be displayed or how it is manipulated, nor does it contain any interface-related logic that the user uses.

ViewModel is an object that provides special data and methods to maintain the specified view. ViewModel is an object of $scope and exists only in ANGUARJS applications. $scope is just a simple JS object that uses a simple API to detect and broadcast state changes.

The controller is responsible for setting the initial state and parameterized $scope method to control the behavior. The controller that needs to be noted does not save the state or interact with the remote service.

View is the HTML that is generated after ANGULARJS parsing and after rendering and binding. This section helps you create the architecture of your Web App. $scope has a reference to the data, the controller defines the behavior, the view handles the layout, and the interaction.

There are several benefits of using the MVVM pattern:

1. Low coupling: View can be independent of the model changes and modifications, a viewmodel can be bound to different view, when the view changes when the model can be unchanged, when the model changes when the view can be unchanged.

2. reusability: You can put some view logic inside the ViewModel, so that many views reuse this view logic.

3. Independent development: Developers can focus on business logic and Data Development (ViewModel). Designers can focus on the design of the interface (View).

4. Testability: The interface (View) can be tested against ViewModel.

Controller

The ANGULARJS controller controls the data for the ANGULARJS application and is a regular JavaScript object.

The Ng-controller directive is used to define the application controller, and at the same time creates a new scope associated with the corresponding DOM element.

The so-called scope is an object that points to the application model, which is the execution environment of the expression, the scope is hierarchical, and the corresponding DOM is almost the same, the scope can monitor expressions and pass events and inherit properties from the parent scope.

Every ANGULARJS application has an absolute root scope. However, there may be multiple child scopes. An app can have multiple scopes, because some directives generate new sub-scopes, and when new scopes are created they are added to the parent scope as child scopes, which makes the scope a tree structure that is one with the corresponding DOM structure.

Controller properties

Now let's use the Ng-controller directive to create a simple controller definition, as follows:

2. <div Ng-app= "" ng-controller="Mycontroller">
4. <p> Please enter a name:<input type="text" ng-model=" Person.name "> </p>
6. <p>Hello <span ng-bind="Person.name"></span> </p >
8. </div>
12. <script>
14. function mycontroller($scope) {
16. $scope. Person = {
18. Name: "World"
20. };
22. }
24. </script>

As mentioned above, we created a JavaScript object with the Ng-controller directive--mycontroller with the name attribute, what is the parameter $scope, and what does it mean?

Now we're going to answer the Mycontroller object parameter--$scope.

$scope is to link a DOM element to an object on the controller that provides an execution context that is bound to a DOM element (and its child elements). It is also a JavaScript object that points to all the HTML elements and execution contexts within the application scope. The scope is that the data attributes of the $scope are associated to the DOM and can be obtained when debugging is required.

To explicitly create a $scope object, we are going to put a controller object on the DOM element, using the Ng-controller Directive attribute.

All $scope follow the stereotype inheritance, which means they all have access to the parent $scope, and for any property and method, if the ANGULARJS is not found on the current $scope, it will go to the parent $scope to find, if not found on the parent $scope, will continue to backtrack upward, All the way up to $rootscope, this $rootscope is the top $scope, which corresponds to the DOM element that contains the Ng-app directive attribute, meaning that the DOM associated with the root scope is where the NG-APP directive is defined.

In other words, with $scope, we can manipulate any object data we want to get in the scope.

Controller method

The controller declares not only the property but also the method, as follows:

2. <div Ng-app= "" ng-controller="Mycontroller">
4. Your Name:
6. <input type="text" ng-model="username">
8. <button ng-click="SayHello ()"> greeting </button>
12. {{Greeting}}
14. </div>
18. <script>
20. function mycontroller($scope) {
22. $scope. Username = ' world ';
24. $scope. SayHello = function() {
26. $scope. Greeting= ' Hello ' + $scope. Username + '! ' ;
28. };
30. }
32. </script>

Refer to the above code, quickly try to use the Controller Method!

Of course, if the need for development conditions, we can also write the controller in the external file, as the above example how to do it, very simple, the following simple reference:

1. <script src="Mycontroller.js"></script>

Models and controllers-initial stages