Month: September 2015

Controller in AngularJs (Part 4)

ChandradevLeave a comment

Controller is the heart of angularJs. It provides the logic to control the view behavior. Controller is the mediator between model and view.

Controller should not reference or manipulate the DOM (Document Object Model) directly. Ng-controller directive is used to call the controller in angularJs.

Note: In the below code, I will show how to create controller and how to call controller in view file. For shake of simplicity I have kept all the logic in one html file. I hope you can easily separate the code into Model, View and Controller file.

Sample Code for Controller demo in AngularJs


<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
    
</head>
<body>
 <div ng-app="Myapp" ng-controller="myController">
    FirstName : <input type="text" ng-model="FirstName" > <br /> <br />
    LastName : <input type="text" ng-model="LastName" > <br /> <br />
    Complete Name : {{FirstName + " " + LastName }}
</div>
    <script>
       
   // You can keep this Code in separate model folder in JavaScript file
        var app = angular.module('Myapp', []);

   // You can keep this file under controller folder in JavaScript file.

        app.controller('myController', function ($scope) {
            $scope.FirstName = "Chandradev";
            $scope.LastName = "Sah";
        });
    </script>
</body>
</html>

Controller

Here model is the container for controller and $scope is the glue between controller and View. Controller always belongs to Module.

Other Ways to define the controller 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../../../Angular Sample/Old Script/angular.js"></script>
    <script>
        var MyController = function ($scope) {
          $scope.Name = "Chandradev"
        }
    </script>
</head>
<body ng-app="">
    <div ng-controller="MyController">
       <b> {{Name}}</b>
    </div>
</body>
</html>

Summary:

In this article, we learnt the basic concept of controller in AngularJs.

Directive in AngularJs (Part3)

ChandradevLeave a comment

Directive

Directives are one of the important parts of AngularJs which is used to extend HTML attributes with prefix ng- keyword.

Some of the examples are

The ng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="EmpNames=[ {FirstName: 'Ram',LastName :'Prasad'},
              {FirstName: 'Mohan',LastName :'Sharma'},
              {FirstName: 'Ravi',LastName :'Verma'}
         ]" >
       <ul>

           <li ng-repeat="name in EmpNames">
               {{ name.FirstName +', '+ name.LastName }}
           </li>
       </ul>
    </div>
</body>
</html>

Note: in the above example we have created EmpNames array with FirstName and LastName object. We are looping in the EmpNames array using ng-repeat directive.

Point to remember
ng-app Directive:
1. It is root element of angular Js application.
2. It wills auto-bootstrap the application when a web page is loaded.

Ng-init Directive:

1. It defines the initial values for angularJs application.
Ng-model Directive:
1. It is used to bind the value of HTML control (Input, Select, textarea) to application data.
2. It also provides the type validation for application data (number, email, required).
3. It also provides status and warning message of application data.
4. It provides CSS classes for HTML element.
5. It also bind HTML element to HTML Form.

Ng-repeat Directive:

It is used for displaying data in repeated format from collection of data.

Summary:

In this post we learnt the overview of directive in angularJs.