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
MandatoryAll 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
- moduleName.controller("controllerName", function($scope){
- define variables/properties and assign values
- });
Example: Single module and single controller
Example: Single module and multiple controllers
-
-
- appModule.controller('personalInfoController', function ($scope) {
-
-
- $scope.StaffName = 'Abhishek Maitrey';
- $scope.Experience = '12 Years';
- $scope.ContactNumber = '9990-123-456';
- $scope.Email = '[email protected]';
- });
-
-
-
-
- appModule.controller('educationInfoController', function ($scope) {
-
-
- $scope.LastQualification = 'MCA';
- $scope.Stream = 'Computer Science';
- $scope.YearOfPassing = '2000';
- $scope.Grade = 'A';
- });
Views to use the controllers
- < 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 >
OutputAbout 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:
- <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 EpisodesEpisode 3: A few more directives with examples, creating Custom Directives with examples.
Overall episodes are 15 and the contents are under development
Sonu ChaudharyPosted Mar 18, 2016, 2:39 AM
hi,Abhishek Maitrey you explain very well
Satish Kumar VadlavalliPosted Apr 28, 2015, 12:55 AM
Great article, and Thanks for sharing :)
Abhishek MaitreyPosted Apr 26, 2015, 9:20 PM
Thanks Virendar. You have commented through FB. I don't use FB for any technical activity.
Karthik Muthu KaruppanPosted Apr 23, 2015, 11:21 AM
good one
Jitendra KumarPosted Apr 21, 2015, 5:31 AM
Nice one.
NitinPosted Apr 21, 2015, 1:56 AM
Very well explained
Guest UserPosted Apr 21, 2015, 1:43 AM
Good Abhishek ! I liked the way you've planned series
Ashish NakilPosted Apr 21, 2015, 1:42 AM
Thank You Sir For Sharing :)
Ramchand RepallePosted Apr 21, 2015, 1:25 AM
Good one..
Santhakumar MunuswamyPosted Apr 20, 2015, 2:10 PM
Thanks for nice article
Rahul Kumar SaxenaPosted Apr 20, 2015, 1:58 PM
Good Work..
Shridhar SharmaPosted Apr 20, 2015, 12:17 PM
nice article.