Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Discussion on angularJS controllers

    @tonk379
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 140
    Comment on it

    Welcome to FindNerd. Today we are going to discuss angularJS controllers. A controller in angularJS is nothing but a regular javascript object which provides attributes, properties and functions to the angularJS application. In angular application controller plays with data and controls the flow of the data. We can defin the controller by a javascript constructor function. We pass the scope as an argument in constructor function. ng-controller directive is used to add the controller to the DOM.

     

    1. // Basic Example
    2.  
    3. <div ng-app = "" ng-controller = "findnerdController">
    4.    ...
    5. </div>
    6.  
    7. <script>
    8.    function findnerdController($scope) {
    9.       $scope.findnerd = {
    10.          address: "Doon IT Park",
    11.          city: "Dehradun",
    12.          
    13.          fullAddress: function() {
    14.             var findnerdObject;
    15.             findnerdObject = $scope.findnerd;
    16.             return findnerdObject.address + " " + findnerdObject.city;
    17.          }
    18.       };
    19.    }
    20. </script>

     

    In above code we have attached the controller findnerd in DOM and created the controller using scope as argument. We have defined two properties address and city, we have also defined a function to return the full address. $scope.findnerd is also a property. You can create a separate file for the controller and add this file to HTML file or you can also define the controller on same HTML file.

     

    Controller in separate file

     

    1. // findnerd.js
    2.  
    3. var findnerdApp = angular.module('findnerdApp',[]);
    4.  
    5. findnerdApp.controller('findnerdController', ['$scope', function($scope) {
    6.   $scope.findnerd = {
    7.          address: "Doon IT Park",
    8.          city: "Dehradun",
    9.          
    10.          fullAddress: function() {
    11.             var findnerdObject;
    12.             findnerdObject = $scope.findnerd;
    13.             return findnerdObject.address + " " + findnerdObject.city;
    14.          }
    15.       };
    16.  
    17. }]);

     

    1. <div ng-app = "findnerdApp" ng-controller = "findnerdController">
    2. Company address: <textarea rows="10" cols="17" ng-model = "findnerd.address"></textarea><br>
    3. Company city: <input type = "text" ng-model = "findnerd.city"><br>
    4. <br>
    5. You have entered: {{findnerd.fullAddress()}}
    6. </div>

    You can type the address and city in textarea and input field respectively and they will show combined address using fullAddress function.

     

    Scope inheritance example

     

    1. <html ng-app>
    2. <head>
    3.     <title>Demo</title>
    4.     <script type="text/javascript" src="js/lib/angular.min.js"></script>
    5.     <script type="text/javascript" src="js/controllers/findnerd.js"></script>
    6.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    7.     <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
    8. </head>
    9. <body>
    10. <div class="findnerd">
    11.   <div ng-controller="primaryController">
    12.     <p>CTO {{empId}}, {{CTO}}   {{salary}}!</p>
    13.  
    14.     <div ng-controller="baseController">
    15.       <p>CTO {{empId}}, {{CTO}}   {{salary}}!</p>
    16.  
    17.       <div ng-controller="secondaryController">
    18.         <p>CTO {{empId}}, {{CTO}}   {{salary}}!</p>
    19.       </div>
    20.     </div>
    21.   </div>
    22. </div>
    23.  
    24. <style>
    25.  
    26.  
    27. div.findnerd div {
    28.   padding: 10px;
    29.   border: solid 2px blue;
    30. }
    31.  
    32.  
    33. <style>
    34.  
    35. <body>
    36. </html>

     

    1. // findnerd.js
    2. var findnerdApp = angular.module('scopeInheritance', []);
    3. findnerdApp.controller('primaryController', ['$scope', function($scope) {
    4.   $scope.CTO = 'Arvind khanna';
    5.   $scope.empId = 'E34';
    6.   $scope.salary = 120000;
    7. }]);
    8. findnerdApp.controller('baseController', ['$scope', function($scope) {
    9.   $scope.CTO = 'Sonia mahania';
    10.   $scope.empId = 'E54';
    11. }]);
    12. findnerdApp.controller('secondaryController', ['$scope', function($scope) {
    13.   $scope.CTO = 'Mona hasan';
    14.   $scope.empId = 'E52';
    15.   $scope.salary = 90000;
    16. }]);

     

    In above example we have defined one controller inside other controller. There are three main controller. Top controller is primary, inside primary controller base controller and inside base controller we have secondary controller. We are trying to display CTO names, salaries and employee ids using findnerd controller.

     

    Thank you for being with us!

    Controllers in AngularJS angularJs controller wroking create controller in angularJS Discussion on controllers in angularJS
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: