Easy Code Stuff: Quick Start To AngularJS Controllers

In AngularJS Controllers Are Java Script Objects.Controllers use To Control The Data In AngularJS Application. In Order To Define The Directive Controller We Have Use The "ng-controller".

To Define Controller We Have To Use The Below Directive.

ng-controller="myController"

Lets Start From The Beginning. Below Codes Uses "ng-init" To Define Variables.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="" ng-init="FName='Nifal'; LName='Nizar'; Qty=2; Price=100">
        <span>Customer Name: {{ FName+ " " + LName}}</span>
        <br/>
        <span>Invoice Total: {{ Qty * Price}}</span>
    </div>
  </body>
</html>

Lets Use A Controller To Get These Details To Our AngularJS HTML Bindings. I'm Going To Name My "ng-app" As "myApp" And "ng-controller" As "myController". So My <div> Going To Be Like Below.

1	<div ng-app="myApp" ng-controller="myController">

So Lets Create A Our Controller Called "myController". This Is Going To Be In Script Section. According To The Developer Practices, There Are Many Ways To Define Controllers. So Lets Have Simple Way Of It.Now Lets Use The Most Basic Way To Create Controller. It's Very Simple

1
2
3

function myController($scope) {

};

According Above Declaration "myController" Is A Simple Function. But It's Takes "$scope" Object As Parameter. You Can Pass Many More Objects, Like "$http" And All. But Now Will Only Go With "$scope".

"$scope" Is The Application Object In AngularJS, Which Contains The Variables And Methods. Now We Will Add All Our Variables, Which We Have Initialized In The "$scope". So Lets Finish The Codes.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myController">
      <span>Customer Name: {{ FName+ " " + LName}}</span>
      <br/>
      <span>Invoice Total: {{ Qty * Price}}</span>
    </div>
    <script type="text/javascript" >
        function myController($scope) {
            $scope.FName = 'Nifal';
            $scope.LName = 'Nizar';
            $scope.Qty = 2;
            $scope.Price = 100;
        }
    </script>
  </body> 
</html>

Now Run And Happy.

Customer Name: Nifal Nizar
Invoice Total: 200

That Was A One Define Controller. But That Is Not A Good Practice. Lets Do In A More Modular Approach. First Of All We Have To Define The Module. Then We Will Add The Controller To It.

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
    $scope.FName = 'Nifal';
    $scope.LName = 'Nizar';
    $scope.Qty = 2;
    $scope.Price = 100;
});

Now Lets See Another Way Of It. In This Way Will Define Controller Separately And Then Add It To The Application.

var app = angular.module('myApp', []);
function myController($scope) {
    $scope.FName = 'Nifal';
    $scope.LName = 'Nizar';
    $scope.Qty = 2;
    $scope.Price = 100;
};
app.controller('myController', myController);

Now Lets See Another Way Of It. In This Way We Will Create A Variable Called "controllers" And We Add All The Controllers To It. Later We Will Add This Controller Variable To The Application.

var app = angular.module('myApp', []);
var controllers = {};

controllers.myController = function ($scope) {
    $scope.FName = 'Nifal';
    $scope.LName = 'Nizar';
    $scope.Qty = 2;
    $scope.Price = 100;
};

controllers.TvController = function ($scope) {
    $scope.Channel = 'FOX';
};

app.controller(controllers);

Hope You Had Good Start With AngularJS Controllers.

Check My Next Article About AngularJS Drop-downs.

Easy Code Stuff

Dec 2, 2015

Quick Start To AngularJS Controllers

No comments:

JWT Token Decode Using Jquery