In the 2nd day of AngularJS article series, we are going to learn key players of AngularJS. Before moving to key players/concepts of AngularJS, please read my previous article:
The following are the main key players or key concepts of AngularJS:
*Data binding
- Module
- Data Binding
- Routes
- Controller
- View
- $Scope
- Directives
- Filters
- Factory/Service
Now, we will learn about all the key players or key concepts of AngularJS one by one.
Module
AngularJS supports modular approach. Some applications have a main method which start, instantiate or bootstraps the application. So, AngularJS don’t have main method to bootstrap an application so the module tell how an application should be bootstrapped. Modules are nothing but a container for the different parts of your application like – controllers, filters, services, directives, etc.
Next, we are going to learn how to create a module and how to use that for creating controller with simple example. Actually it was difficult for me to understand the concept by just reading, that’s why the best thing to understand the concept is to implement it or hands on example of the concept to understand better.
So we are going to do some hands on.
The following are the steps to create a module and use in HTML template:
- Open notepad or notepad++ as an editor.
- If you gone through the first article Introduction to AngularJS – Day 1, I used same example and saved file with extension .html.
- <!DOCTYPE html>
- <html ng-app>
-
- <head>
- <title>Module in AngularJS Demo</title>
- <script src="Scripts/angular.min.js"></script>
- </head>
-
- <body> </body>
-
- </html>
- Now, our template is ready next to create a module and use in the above example.
- Create a module in same file or create a separate javascript (.js) file. For that add the following code,
- <!DOCTYPE html>
- <html ng-app="myApp">
-
- <head>
- <title>Module in AngularJS Demo</title>
- <script src="Scripts/angular.min.js"></script>
- </head>
-
- <body ng-controller="greetController">
- <h2>{{ greet }}</h2>
- <script type="text/javascript">
-
- var app = angular.module("myApp", []);
-
- app.controller("greetController", function ($scope)
- {
- $scope.greet = 'Welcome to C# Corner!';
- });
- </script>
- </body>
-
- </html>
- Now understanding the above code, in above code I created a module in same file. Created module like the following:
-
- var app = angular.module("myApp", []);
- This is creating controller using the object of the module we have created like the following:
-
- app.controller("greetController", function ($scope) {
- $scope.greet = 'Welcome to C# Corner!';
- });
The concept of ‘$scope’ we are going to see in coming days. We have a created one property using the ‘$scope’. The ‘greet’ property is bind using the {{expression}} or you can use ’ng-bind’ directive to bind the property. This property bind in HTML </h2> tag.
- The following image shows all the concept how to create a module, controller and how to use in application.
![controller]()
- Now save the changes and open the file in browser to see the output, after you open the file in browser you can see the following,
![browser]()
Great, your first AngularJS module example created successfully!
Summary
I hope that beginners as well as students understand the concept of Module in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!
Thanks for reading. Learn and share it!