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.
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}}. The 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 decoupled 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 the 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 ValueAproperty to $scope object.
$scope.ValueA = "100 INR";
Once the 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 with the app.
2. Avoid unnecessary variable storage by declaring and then referring.
In case the name of controller gets changed then you need to make the similar changes in view also. Else view won’t be able to recognize your variable.
Sample code:
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.
Points to remember:
1. View data won’t work outside scope until the controller is declared in the 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 the scope of the variable.
Resources:
留言列表
