Front End, IT, javascript, Uncategorized

(8) AngularJs Modules and Controllers

  • An AngularJS module defines an application.
  • The  module is a container for the different parts of an application (controllers, services, directives, … ).
  • The controller is a JavaScript object. It controls the data of the AngularJs application.
  • Controllers always belong to a module.
  • The scope ($scope) is the binding part between the HTML (view) and the JavaScript (controller).


  • Create a JavaScript file. In the js file you should create the module, create the controller, and register controller with the module, as the following: 

1. To create the module:

                                       var app = angular.module(“myApp”, []);

     2. To create the controller: 

var myController = function ($scope){
$scope.msg = “Learning AngularJs”;
 }

3. To register the controller with the module:

myApp.controller(“myController”, myController);

You can use a minimized code for the three steps, as the following

define the module==>

var myApp = angular.module(“myModule”, []);

define and register the controller==>

myApp.controller(“myController”, function($scope){
$scope.msg=”Learning AngularJs”;
});


  • We should associate the module and the controller with html file.
  • Module name with ng-app ==> ng-app=”myModule”
  • Controller name with ng-controller==> ng-controller=”myController”

 

screenshot-codepen.io-2018-01-21-13-22-47-638
AngularJs Module and Controller

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s