Tutorial Angularjs ng-controller



In Angularjs ng-controller is use for attached controller class to the view. This is key phase Angularjs support MVC (Model-View-Controller) framework.

Controller : ng-controller define controller class name, that calss include Business login of contoller. Contoller class has many function we can call that function on any evern as well.

syntex of ng-controller

<div ng-controller="{{expression}}">

{{expression}} : Name of a globally accessible constructor function

Example

Here is a simple example of ng-controller. Adding, removing, clearing, and show value functions are declared in the controller.

 <!DOCTYPE html>  
 <html>  
   <head>  
     <title></title>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
     <script src="lib/angular/angular.js" type="text/javascript"></script>  
     <script>  
       angular.module("appMod", []);  
       function firstContoller() {  
         this.name = "Nikunj Kansara";  
         this.userinfo = [  
           {name:"Nikunj Kansara", address:"Ahmedabad India", phone:"989898", email:"nikunjkansara@gmail.com"},  
           {name:"Nikunj Kansara", address:"Ahmedabad India", phone:"989898", email:"nikunjkansara@gmail.com"}  
         ]  
       };  
       firstContoller.prototype.showValue = function()  
       {  
         alert(this.name);  
       };  
       firstContoller.prototype.clear = function(content)  
       {  
         content.name = "";  
         content.address = "";  
         content.phone = "";  
         content.email = "";  
       };  
       firstContoller.prototype.remove = function(content)  
       {  
         var index = this.userinfo.indexOf(content);  
         this.userinfo.splice(index, 1);  
       };  
       firstContoller.prototype.add = function()  
       {  
         this.userinfo.push({name:"Nikunj Kansara", address:"Ahmedabad India", phone:"989898", email:"nikunjkansara@gmail.com"});  
       };  
     </script>  
   </head>  
   <body>  
     <div ng-app="appMod">  
       <div id="ctrl-as-exmpl" ng-controller="firstContoller as fc">  
         Name: <input type="text" ng-model="fc.name" />  
         [ <a href="" ng-click="fc.showValue()">show Value</a> ]<br/>  
         <ul ng-repeat="ui in fc.userinfo">  
           <li><label>Name:</label><input type="text" ng-model="ui.name"/></li>  
           <li><label>Address:</label><input type="text" ng-model="ui.address"/></li>  
           <li><label>phone:</label><input type="text" ng-model="ui.phone"/></li>  
           <li><label>email:</label><input type="text" ng-model="ui.email"/></li>  
           <li>[<a href="" ng-click="fc.clear(ui)">Clear</a>] | [<a href="" ng-click="fc.remove(ui)">Delete</a>]</li>  
         </ul>  
         [<a href="" ng-click="fc.add()">Add User</a>]    
       </div>  
     </div>  
   </body>  
 </html>  

Nikunj K

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.