Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Easy Learning of AngularJs: Episode 2 of 15

4.93/5 (16 votes)
20 Apr 2015CPOL3 min read 16.4K   120  
Easy Learning of AngularJs : Episode 2 of 15

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

Image 1

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

With dependencies

Image 2

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

C#
moduleName.controller("controllerName", function($scope){
define variables/properties and assign values
});
Example: Single module and single controller

Image 3

Example: Single module and multiple controllers
C#
//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

HTML
<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

Image 4

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)