AngularJs - Creating Controllers

AngularJs Creating Controllers

Creating Controllers

AngularJS Controllers

We have now seen how modules are created and loaded.

Let us now return back to our discussion on Angular controllers, the 'C' component of AngularJS MVC.

Let us see how controllers can be created in Angular and how a controller can be added to an Angular module.

Creating AngularJS Controllers - Demo

Highlights:

Module creation in Angular.

Controller creation in Angular.

Demosteps:

Let us modify the controllers.js file created in the Angular_Demos project, to create a controller which gets registered against controllers module.

CODE/PROGRAM/EXAMPLE

var controllers=angular.module(“controllers”,[]);
controllers.controller("userCtrl", ["$scope", function ($scope) {
        $scope.mobile=1111111111;
        $scope.password=“password”;         
}]);

Using controller in webpage

We have seen how modules can be created and how controllers can be registered to a module in AngularJS.

Let us see how the controller that is registered with the controllers module can be used in an Angular web page.

1) As we saw earlier, the first step to make a component which is registered in a module accessible from a web page, is loading of the module where the controller is registered.

Let us first perform “Module Loading” in 'Automatic' mode. So we need to associate the module to ng-app.

For eg: . This will load automatically load 'app' module and its dependent 'controllers' module, thereby making the userCtrl accessible in the web page.

2) The second step is to use the component in the web page. In the current case, we need to use the controller component which we have created earlier.

The ng-controller directive attaches a controller to a html element.

For eg :

The directive ng-controller will facilitate the instantiation of the mentioned controller, i.e., userCtrl, here.

Let us now see how we can use the userCtrl in the web page.

AngularJS Controllers - Demo

Highlights:

Module creation in Angular

Automatic Module Loading in Angular

Controller invocation/usage in Angular

Demosteps:

4-Controller.html will look like shown below:

Let us now modify 4-Controller.html created earlier, to use the controller userCtrl which we created in the earlier demo step. The initialization of required models will be done by the controller.

CODE/PROGRAM/EXAMPLE

<html ng-app="app">  
<head>   
   <script src="lib/Angular/angular.js"></script>
   <script src="js/controllers.js"></script>
   <script src="js/app.js"></script>
</head>
<body>   
      <div id="div1" ng-controller="userCtrl" style="border: 1px solid red">
    <p><label for="username">Username:</label>
    <input type="text" name="username" ng-model="username" id="username" >
    <span id="displayUsername"> Your username is:<i>{{ username }}</i>  </span></p>
    
    <p><label for="mobile">Mobile:</label> 
    <input type="number" name="mobile" ng-model="mobile"  id="mobile" >
    <span id="displayMobile"> Your mobile number is:<i>{{ mobile }}</i>   </span></p>
    
    <p><label for="password">Password:</label>
        
        <input type="password" id="password" ng-model="password" name="password" /> 
        <span id="displayPassword"> Your entered the password: <i>{{password}}</i>  </span></p>
    </div>
        
</body>
</html>

#angular_Creating_Controllers #angularjs_Creating_Controllers

(New page will open, for Comment)

Not yet commented...