An Overview of Modules & Controllers in AngularJs

An overview of Modules & Controllers in AngularJs
(This is the third post in my series on the AngularJS; check out my initial piece covering
‘An intro to AngularJS’ and ‘Data-binding methods in AngularJS’.)
Before having a look at AngularJS’ components, terms and terminologies, let’s make sure
everyone is on the same page. If not then you can go through our previous blogs “Introduction to
AngularJs” and “Data-binding methods in AngularJS” to have a clear understanding of binding
technique and when/where these can be used for a better result.
When we talk about AngularJS, we come across many new terms and terminologies such as
Angular module controller, and others. So why these modules and controllers are called building
blocks of an Angular application. And what are the use cases.
First thing first, let’s start with the main objective of this post. Do not worry when you will complete
this blog, you will have an intermediate level of expertise on AngularJS modules & controllers.
In the previous AngularJS Tutorial, titled Data-binding in AngularJS, you might have noticed the
source code similar to the one mentioned below:
angular.module(name, [requires], [configFn]);
Parameter
name: name of the module.
requires: is an optional parameter, if mentioned the new module get created. If not, an existing
module is being retrieved.
configFn: is an optional parameter, execute function on module load
The universal way to create or register the module with Angular is Parameter. It has a suite of
services, controllers, services, configuration & directives. In other words, you can consider it as a
main() function to initialize and get chained with variable and methods for an application.
Sample code:
Var MyNewapp = angular.module(“MyNewApp”, []);

Code simplification: We are using an Angular object to create the module. Here you will also find
two parameters of angular.module, the first parameter is the name of a module and second refers
to a blank array.
Remember, there could be a scenario when your custom module will be dependent on another
module. In that situation, you can pass that module over Angular module function as a parameter
and utilize their resources.
Use: To bootstrap an Angular application, declare ng-app name on your page.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app =”myApp ">
<p>Myself {{ firstname }}</p>

</div>
</body>
</html>
/*New App Declaration*/

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "Jaywant Topno";
});
</script>
<script src="https://gist.github.com/xaiwant/12e7f9e4973d03e696bb131c4eb9e1eb.js"></script>
In above source code, the <div ng-app =”myApp "> section will start bootstrapping
(initializing/ resource gathering) process. It tells the browser that this is an Angular app. Here you
can also see <p> tag have {{firstname}}. Browser will look for Angular variable and print the value
in the view.
Now let’s move to the controller (new app declaration). A controller is nothing but a JavaScript
constructor function, which is responsible for building a model (data) so that the same data could
be displayed in a view. It has the ability to perform some operation or initializing the variable or
getting the data from endpoint URL.
In other words, when you work on Decouple website, the job of a controller is to get the data from
web services. Hope this information is clear and helpful. Let’s view the basic syntax code and
explanation of code.
Syntax:
var ControllerName = function ($scope) {
/* variable initialization goes here */
}
Explanation: In the above source code, we are creating an anonymous function and assigning
back to a variable. Note that it has one parameter, called $scope, which is an angular object pass
to the controller. ControllerName is the name of the controller. Using the AngularJS Data binding
methods, we can fetch the data in the view. Here we are also assigning ValueA property to
$scope object.
$scope.ValueA = "100 INR";
Once controller has been created. The next step would be to Register the controller with the
newly created module (myApp).
Syntax:
Module object.Controller(“NewControllerName”, Controller-Function)
Sample:
Myapp.controller(“'myCtrl'”, function($scope) {
$scope.firstname = "Jaywant Topno";
});
Follow the above steps, to:
1. Create a controller and register it for the app.

2. Avoid unnecessary variable storage by declaring and then referring.
var NewApp = angular.module("NewApp,[]");
var NewController = function ($scope) {
}
var newApp.controller("NewController",NewController);
or
var NewApp = angular.module("NewApp,[]");

var newApp.controller("NewController", function ($scope) {
}
);
<script src="https://gist.github.com/xaiwant/99e46b89c457eb1e73971398eccb9d73.js"></script>
In case the name of controller gets changed then you need to make same changes in the view
also. Else view won’t be able to recognize your variable.
Sample code:
var ControllerName = function ($scope) {

}
Or
Var NewApp. Controller("NewController", function ($scope) {
}
<script src="https://gist.github.com/xaiwant/1d3f5ff510b6749df41c718ebd5b1d7e.js"></script>
So far we have created a module, a controller and registered that newly created controller.
Now let’s have a look how to pull up model to view using ng-app and ng-controller.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app ="NewApp">
<p>Myself {{ firstName }}</p>

</div>
<div ng-controller =" NewController ">
<p>Myself {{ ValueA }}</p>

</div>
</body>
</html>
<script src="https://gist.github.com/xaiwant/8f363eea536546cf33757f8319e597b6.js"></script>
Points to remember:
1. View data won’t work outside scope until the controller is declared in self <div> directory.
2. Create and register controller within single code to reduce unwanted memory allocation.
Phew! That was quite a ride. Remember, before building an application, it is necessary to have an
intermediate level knowledge of AngularJS. Modules and controllers are building blocks of a newly
created module where controller helps to initialize variable and perform an operation. Further,
using ng-app we can tell the view to use specific app and ng-controller for scope of the variable.
GitHub source code: https://github.com/xaiwant/AngularJS-Modules-Controllers

An Overview of Modules & Controllers in AngularJs - Valuebound

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

An Overview of Modules & Controllers in AngularJs - Valuebound

Uploaded by

Copyright:

Available Formats

angular.module(name, [requires], [configFn]);

Var MyNewapp = angular.module(“MyNewApp”, []);

Use: To bootstrap an Angular application, declare ng-app name on your page.

<div ng-app =”myApp ">

<p>Myself {{ firstname }}</p>

/New App Declaration/

$scope.ValueA = "100 INR";

Module object.Controller(“NewControllerName”, Controller-Function)

1. Create a controller and register it for the app.

var NewApp = angular.module("NewApp,[]");

var ControllerName = function ($scope) {

<p>Myself {{ firstName }}</p>

<div ng-controller =" NewController ">

<p>Myself {{ ValueA }}</p>

GitHub source code: https://github.com/xaiwant/AngularJS-Modules-Controllers

You might also like