AngularJS Tutorial 4: Explain about AngularJS modules and Controllers


What is module and how to create a module
---This is like a main method for the AngularJs applications
----This is the container for all directives, filters, containers, Services and others.

Example -  var myApplication = angular.module("MyModule", []);


What is controller and how to create a controller?
Controller is nothing but javascript class to build a model for the view.
Example:         var myController = function ($scope) {
            $scope.name = "Ranga";
        }
     
How to register a controller with the module
        myApplication.controller("myController",myController)

How to use the module with controller ?
<body ng-app="MyModule">

    <div ng-controller="myController">
        <input type="text" ng-model="name" /><br />
        {{name}}

    </div>
</body>



Full Example: 
<!DOCTYPE html>
<html>
<head>
    <script src="angular.min.js"></script>
    <meta charset="utf-8" />
    <script>
        var myApplication = angular.module("MyModule", []);

        var myController = function ($scope) {
            $scope.name = "Ranga";
        }

        myApplication.controller("myController",myController)

    </script>


</head>
<body ng-app="MyModule">

    <div ng-controller="myController">
        <input type="text" ng-model="name" /><br />
        {{name}}

    </div>
</body>
</html>   
Output: 


If you have any queries or suggestions, please feel free to ask in comments section.
Share this post :

Post a Comment

Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.

 
Support : Ranga Rajesh Kumar
Copyright © 2012. ASP.NET Examples - All Rights Reserved
Site Designed by Ranga Rajesh Kumar