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
  1. moduleName.controller("controllerName"function($scope){  
  2. define variables/properties and assign values  
  3. });  
Example: Single module and single controller



Example: Single module and multiple controllers
  1. //controller definition for staff personal information  
  2. //$scope is predefined and having limit to its controller only  
  3. appModule.controller('personalInfoController'function ($scope) {  
  4.   
  5.     //declare dynamic variables and assign values  
  6.     $scope.StaffName = 'Abhishek Maitrey';  
  7.     $scope.Experience = '12 Years';  
  8.     $scope.ContactNumber = '9990-123-456';  
  9.     $scope.Email = '[email protected]';  
  10. });  
  11.   
  12.   
  13. //controller definition for staff educational information  
  14. //$scope will have scope within this controller.   
  15. appModule.controller('educationInfoController'function ($scope) {  
  16.   
  17.     //declare dynamic variables and assign values  
  18.     $scope.LastQualification = 'MCA';  
  19.     $scope.Stream = 'Computer Science';  
  20.     $scope.YearOfPassing = '2000';  
  21.     $scope.Grade = 'A';  
  22. });  
Views to use the controllers
  1. < div ng - controller = "personalInfoController" > < p > Personal Information < br / > -------------------------- < /p>  
  2.   Staff Name :<strong> {{StaffName}}</strong > < br / > Relevant Experience: < strong > {  
  3.     {  
  4.         Experience  
  5.     }  
  6. } < /strong><br / > Contact Number: < strong > {  
  7.     {  
  8.         ContactNumber  
  9.     }  
  10. } < /strong><br / > Email: < strong > {  
  11.     {  
  12.         Email  
  13.     }  
  14. } < /strong>  
  15.  </div > < div ng - controller = "educationInfoController" > < p > Educational Information < br / > ------------------------------ < /p>  
  16.    <!--Used data bining through ng-bind directive for first two values-->  
  17.    <!--Used data bining through '{{}}' directive for first two values-->   
  18.    Last Qualification :<strong><span   
  19.     ng-bind="LastQualification"></span > < /strong><br / > Stream: < strong > < span ng - bind = "Stream" > < /span></strong > < br / > Year of Passing: < strong > {  
  20.     {  
  21.         YearOfPassing  
  22.     }  
  23. } < /strong><br / > Grade: < strong > {  
  24.     {  
  25.         Grade  
  26.     }  
  27. } < /strong>  
  28.    </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:
  1. <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


Similar Articles