Learn AngularJs : Episode 2 of 15

Introduction

Revisit Episode 1: Learn AngularJs: Episode 1 of 15 

We'll cover the following topics in this writing.

• AngularJs Module
• Creating Module
• AngularJs Controller
• About Scope
• Creating Controller
• Scope behavior
• ng-repeat Directive with filters example

AngularJs Module

• A detachable and independent code component.
• A (logical) container or collection of various key parts/components like directives, filters, controllers, services and more.
• Does auto-bootstrapping of application.
• Gives better code management and loose coupling.
• Used to do a reasonable breakdown of large size code for better readability.
• Used to avoid declaration of objects at the global namespace.
• Also, plays an important role in dependency injection.
• Can be defined inline or be kept in a separate JavaScript (.js) file.

How to define a module

Mandatory

All AngularJs modules or any other third-party modules need to be registered.

angular.module(): to predefine a function for creating a module.

Syntax

Without dependency



In the preceding syntax, currently there is no dependency but you can specify the dependencies if there will be any.

With dependencies


Note

• You can create single or multiple modules in an application based on application requirements.
• One module can be assigned single or multiple relative controllers.
• Dependent modules can also be appended to any module.

AngularJs Controller

• is a Constructor function, a JavaScript object
• holds the scope (shared object) of a function
• expose function behavior that a View can use
• detachable independent component
• mediator between Model and View (Model <==> Controller <==> View)
• contains business logic
• can be created using ng-controller directive 

About Scope

• include properties for the controller.
• include functions for the controller.
• glue between a controller and a single view.
• expressions are also evaluated against the scope object.
• inherit functionality from $rootScope (we'll learn shortly).

Points to remember

• be careful when using scope
• scope is not a model but a way to access a Model
• refrain to change scope directly from view - advice
• keep scope as read-only inside view - advice
• keep scope write-only inside controller - advice 

How to create a Controller

Syntax

moduleName.controller("controllerName", function($scope){
define variables/properties and assign values
});

Example: Single module and single controller



Example: Single module and multiple controllers

//controller definition for staff personal information
//$scope is predefined and having limit to its controller only
appModule.controller('personalInfoController', function ($scope) {

    //declare dynamic variables and assign values
    $scope.StaffName = 'Abhishek Maitrey';
    $scope.Experience = '12 Years';
    $scope.ContactNumber = '9990-123-456';
    $scope.Email = '[email protected]';
});


//controller definition for staff educational information
//$scope will have scope within this controller.
appModule.controller('educationInfoController', function ($scope) {

    //declare dynamic variables and assign values
    $scope.LastQualification = 'MCA';
    $scope.Stream = 'Computer Science';
    $scope.YearOfPassing = '2000';
    $scope.Grade = 'A';
});

Views to use the controllers

< div ng - controller = "personalInfoController" > < p > Personal Information < br / > -------------------------- < /p>
  Staff Name :<strong> {{StaffName}}</strong > < br / > Relevant Experience: < strong > {
    {
        Experience
    }
} < /strong><br / > Contact Number: < strong > {
    {
        ContactNumber
    }
} < /strong><br / > Email: < strong > {
    {
        Email
    }
} < /strong>
 </div > < div ng - controller = "educationInfoController" > < p > Educational Information < br / > ------------------------------ < /p>
   <!--Used data bining through ng-bind directive for first two values-->
   <!--Used data bining through '{{}}' directive for first two values-->
   Last Qualification :<strong><span
    ng-bind="LastQualification"></span > < /strong><br / > Stream: < strong > < span ng - bind = "Stream" > < /span></strong > < br / > Year of Passing: < strong > {
    {
        YearOfPassing
    }
} < /strong><br / > Grade: < strong > {
    {
        Grade
    }
} < /strong>
   </div >

Output

About the staff

Personal Information
--------------------------
Staff Name : Abhishek Maitrey
Relevant Experience : 12 Years
Contact Number : 9990-123-456
Email : [email protected]

Educational Information
------------------------------
Last Qualification :MCA
Stream : Computer Science
Year of Passing : 2000
Grade : A

Scope behavior and access limit

You must have noticed that the $scope object has been defined in each controller. Every controller must have its own $scope object and this object will be limited to its respective controller.

For example

If you try to use $scope.LastQualification in:

<div ng-controller="personalInfoController">

Then you would not get the desired output against the LastQualification variable because it was defined under the educationInfoController controller.

ngRepeat Directive with Filter

• ng-repeat: a looping construct
• ng-repeat: iterates the collection
• filter: transform the model data 
• filter: appropriate representation to the view

Output

Example of Array, ng-Repeat directive and filter:

ABHISHEK from Noida: India
JACK from New Jersy: USA
PHILIS from London: UK
THIU from Bangkok: Thailand

Next Episodes

Episode 3: A few more directives with examples, creating Custom Directives with examples.

Overall episodes are 15 and the contents are under development