Introduction

Revisit Episode 1: Learn AngularJs: Episode 1 of 15

We'll cover the following topics in this writing.

AngularJs Module
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
AngularJs Controller
About Scope
Points to remember
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


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