Click here to Skip to main content
15,064,140 members
Articles / Web Development / HTML
Tip/Trick
Posted 20 Apr 2015

Tagged as

Stats

13K views
11 bookmarked

Easy Learning of AngularJs: Episode 2 of 15

Rate me:
Please Sign up or sign in to vote.
4.93/5 (16 votes)
20 Apr 2015CPOL3 min read
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)

Share

About the Author

Abhishek Maitrey
Technical Lead
India India
Project Manager in MNC. Having 12 years of corporate experience mostly in Microsoft Technologies. Developer by passion. A happy husband and father of two lovely kids.
Like writing, association of professionals, leadership, public speaking.

Comments and Discussions

 
Questionepisode4 Pin
Member 1273257513-Sep-16 19:29
MemberMember 1273257513-Sep-16 19:29 
GeneralMy vote of 5 Pin
WesMcGJr13-May-15 5:27
MemberWesMcGJr13-May-15 5:27 
GeneralRe: My vote of 5 Pin
Abhishek Maitrey14-May-15 15:39
MemberAbhishek Maitrey14-May-15 15:39 
GeneralRe: My vote of 5 Pin
Abhishek Maitrey19-Sep-15 0:12
MemberAbhishek Maitrey19-Sep-15 0:12 
SuggestionGreat Pin
Rahul D.27-Apr-15 0:10
MemberRahul D.27-Apr-15 0:10 
GeneralRe: Great Pin
Abhishek Maitrey28-Apr-15 6:47
MemberAbhishek Maitrey28-Apr-15 6:47 
GeneralIt's starting to make sense now Pin
Sean McPoland21-Apr-15 17:48
MemberSean McPoland21-Apr-15 17:48 
GeneralRe: It's starting to make sense now Pin
Abhishek Maitrey22-Apr-15 2:33
MemberAbhishek Maitrey22-Apr-15 2:33 
GeneralMy vote of 5 Pin
Sachin Mahandule21-Apr-15 3:16
professionalSachin Mahandule21-Apr-15 3:16 
GeneralRe: My vote of 5 Pin
Abhishek Maitrey21-Apr-15 3:32
MemberAbhishek Maitrey21-Apr-15 3:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.