Controller in AngularJS

Bài đăng này đã không được cập nhật trong 3 năm

Controller in AngularJS

With this article, I want to show you guy about controller in angularjs, It is very important to understand about controller in AngularJS. I will show you guy what is the neccessary with controller in angularjs, why do you need it ?

What is controller ?

In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope.

When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.

If the controller has been attached using the controller as syntax then the controller instance will be assigned to a property on the new scope.

How to use controller

Sometime I really wonder and difficult to understand how to use controller in angularJs, but I have some idea for you guy. Need to use:

Set up the initial state of the $scope object.

Typically, when you create an application you need to set up the initial state for the Angular $scope. You set up the initial state of a scope by attaching properties to the $scope object. The properties contain the view model (the model that will be presented by the view). All the $scope properties will be available to the template at the point in the DOM where the Controller is registered.

The following example demonstrates creating a HelloController, which attaches a greeting property containing the string "Hello World" to the $scope:

<!DOCTYPE html>
<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
        <div ng-app="myApp" ng-controller="HelloController">
           Say hello: {{hello}}
        </div>
        <script>
            var myApp = angular.module('myApp', []);
              myApp.controller('HelloController', ['$scope', function($scope) {
                $scope.hello = 'hello world';
            }]);
        </script>
    </body>
</html>

Result of example is:

editor .png

Add behavior to the $scope object.

With other hand that i want to show you it is in order to react to events or execute computation in the view we must provide behavior to the scope. We add behavior to the scope by attaching methods to the $scope object. These methods are then available to be called from the template/view.

The following example uses a Controller to add a method, which doubles a number, to the scope:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
        <div ng-app="myApp" ng-controller="CompareController">
          Compare your number with 2 <input ng-model="num">Result: {{double(num)}}
        </div>
        <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('CompareController', ['$scope', function($scope) {
          $scope.double = function(value) {
             if (value >= 2){
               return "More than or equal 2";
             } else if (value < 2) {
               return "Less than 2";
             } else {
               return "Please input your value";
             }
          };
        }]);
        </script>
    </body>
</html>

But please recongize that you need to careful about using controller in angular:

Share code or state across controllers — Use angular services instead.
Manage the life-cycle of other components (for example, to create service instances).

Nested Controllers

With angularJS also use nested technich in controller, you can image with simple problem:

HumanController > MaleController > StudentController

Example:

File: example.html

 <div class="Human">
  <div ng-controller="HumanController">
    <p>I am a {{human}}!</p>
    <div ng-controller="MaleController">
      <p>I am a {{man}}!</p>
      <div ng-controller="StudentChildController">
        <p>I am a {{student}}</p>
      </div>
    </div>
  </div>
</div>

File: app.js

 var myApp = angular.module('scopeInheritance', []);
myApp.controller('HumanController', ['$scope', function($scope) {
      $scope.human = 'Human';
}]);
myApp.controller('MaleController', ['$scope', function($scope) {
      $scope.man = 'man';
}]);
myApp.controller('StudentChildController', ['$scope', function($scope) {
      $scope.student = 'student';
}]);

Conclusion

In this article we’ve discussed only about controller is the greate thing for you to begin with angularjs and with my next article I will show you guy about Scope in angularJs.

Documentation

W3 School AngularJS

AngularJS