Of Stack

Angular Enterprise Development Detailed Explanation of MVC Controller

  • 2021-07-22 08:52:31
  • OfStack

1. Controller in MVC

The controller of AngularJS is mainly used to connect the model and view in one. Most business logic operations are placed in the controller corresponding to the view. Of course, if we can put business logic into the back-end REST service, we can develop lightweight AngularJS applications.

When it comes to business logic used in multiple controllers, it needs to be put into a common service, and then the changed service is injected into the controller used in the business logic.

2. Understand the controller

In the controller of AngularJS, the constructor will have $scope Parameter. When 1 controller passes through ng-controller Directive to DOM, which instantiates a new controller object and then calls the constructor of the specified controller. 1 new sub-scope ( scope The constructor that will be created and passed to the controller as an injectable parameter is $scope .

If the controller uses controller as Syntax is attached to DOM, the controller instance is assigned to the new $scope range. And one more attribute with the same name as as, and then point to this attribute, which is convenient for us to access.

3. The role of the controller

3.1 Initialize the model in the controller (add attributes)

After you create a controller and attach it to an DOM element, AngularJS creates a child scope. The sub-scope holds the data model of the corresponding controller. Child scopes can be passed through $scope To get. 


<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>AngularJS Controller Demo</title>
  <script type="text/javascript" src="angular.min.js">

  </script>
  <script src="app.js" charset="utf-8"></script>
</head>

<body ng-controller="MainController">
  <p>{{username}}</p>
  <p>{{age}}</p>
</body>

</html>


(function () {
  'use strict';
  angular.module("myApp", [])
    .controller('MainController', ['$scope', function ($scope) {
      $scope.username="leeli";
      $scope.age=28;
    }]);
})();

3.2 Attaching Behavior (Adding Events or Methods) to a Controller

The behavior is attached by adding a method or event to the $scope Object in order to use the modification method in the corresponding view of the controller. There are also many ways to deal with business, which are also attached to the $scope Object.
ng-click The corresponding event method is defined in controller as addItem So on the view we can use the addItem Method.

On the view ng-click , ng-model And ng-repeat They are all built-in instructions of AngularJS, which will be introduced in detail in subsequent blogs.

4. Controller scope

Because the controller is attached to the DOM element, there is a view with multiple controllers. Controllers can be juxtaposed or nested.

4.1 Controller juxtaposition in view

Each controller starts from the node with DOM element, and creates a sub-control domain at the end of the node corresponding to the closing label. In a single controller, $scope Object can only access and call properties and methods within the scope of the controller.

4.2 Controller Nesting in Views

By default, AngularJS cannot find an attribute in the current scope and will look it up in the parent scope. That is, the child controller inherits the objects in the parent controller. However, the child scope has the same properties as the parent scope, and the child uses its own scope. At this time, the child scope can access the properties of the parent scope through $parent . Similar to the prototype chain mode of JavaScript itself.

5. What is ControllerAs

Provided by AngularJS $scope Method to deal with Controller. The code is as follows: 


<div ng-app="myApp">
 <div ng-controller="MainController">
  <p>Hello {{ name }}</p>
 </div>
</div>

var app = angular.module('myApp', []);
app.controller('MainController', ['$scope',function($scope) {
 $scope.name = "world.";
}]);

AngularJS provides a way to handle the scope alias of Controller, which is actually to bind Model directly to the instance of Controller.

The code is as follows: 


<div ng-app="myApp">
 <div ng-controller="MainController as mainCtrl">
  <p>Hello {{ name }}</p>
 </div>
</div>

var app = angular.module('myApp', []);
app.controller('MainController', function() {
 this.name = "world.";
});

There are three advantages to handling Controller in this way:

1 The definition of Controller no longer depends on $scope, and Controller is an ordinary function definition, so the code has nothing to do with the framework. Assuming that the AngularJS framework is not used one day, the code here can be reused and transplanted.

2 test is more friendly, and developers do not need to simulate 1 $scope

3 Enhance the readability of the code. In controller parallel and nested demo, we use curly braces on the view to include name, userName and other attributes. If there are multiple controllers in parallel or multiple levels nested, it is sometimes difficult to distinguish which controller properties are used on the view, and you can use the ControllerAs To avoid this problem.

Related articles: