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) {
  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. });
  13. //controller definition for staff educational information
  14. //$scope will have scope within this controller.
  15. appModule.controller('educationInfoController', function ($scope) {
  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