Easy Learning of AngularJs: Episode 2 of 15

• Download source - 47.6 KB

Revisit Episode 1: Click here

Introduction

We'll cover the following topics in this article:

• 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 reasonable breakdown of large size code for better readability
• Used to avoid declaration of objects at 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() – Use this predefined function for creating a module

Syntax

Without dependency

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

With dependencies

Note

• You can create single or multiple modules in an application based on application requirement.
• 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 function
• Exposes function behavior that View can use
• Detachable independent component
• Mediator between Model and View (Model<==> Controller <==> View)
• Contains business logic
• Can be created using ng-controller directive

What About Scope?

• Include properties for controller
• Include functions for controller
• Glue between a controller and a single view
• Expressions also get evaluated against scope object
• Inherit functionality from $rootScope (we'll learn about this shortly)

Points to Remember

• Be careful while using scope
• Scope is not a model but a way to access model
• Refrain from changing scope directly from view - advice
• Keep scope as read-only inside view - advice
• Keep scope write-only inside controller - advice

How to Create 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 = 'support@domain.com';
});

//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 : support@domain.com
Educational Information
------------------------------
Last Qualification :MCA
Stream : Computer Science
Year of Passing : 2000
Grade : A

Scope Behavior and Access Limit

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

For example: If you'll try to use $scope.LastQualification in <div ng-controller="personalInfoController">, you should not get the desired output against LastQualification variable because it was defined under educationInfoController controller.

ngRepeat Directive with Filter

• ng-repeat - a looping construct
• ng-repeat - iterates the collection
• filter - transforms 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

Source code is available with this article.

Next Episodes

Episode 3: Few more directives with examples, creating Custom Directives with example

There are 15 episides in all and the contents are under development.