Post
Ask Question

Angular From Basic To Expert - Day Three

Introduction

In the previous articles, AngularJS from basic to expert Day One and Day Two, we have learned what AngularJS is. We saw some basics of AngularJS, learned AngularJS expression and directives, and used AngularJS in our demo application.

You can check the previous articles here -

In this article of AngularJS from basic to expert day three, we will learn the following.

  • Module in AngularJS
  • Model in AngularJS
  • Controller in AngularJS

So, I will explore them one by one and also, will continue with our AngularJS demo application which we have used in the previous articles.

The below image displays the basic architecture of enterprise architecture of AngularJS application.

Module in AngularJS

Module functions as a container in the Angular JS application which contains different parts of the application. Module contains Controllers, services, filters, directories etc. for an Angular JS application. Also, we can say that a module defines an Angular JS application. As we have seen that ng-app define an Angular JS application and we used ng-app in our previous demo, but we used ng-app=” “. Now, we will create Module and use that with ng-app.

How to create module

The angular.module method is used to create a module in AngularJS.

Example

var angApp = angular.module("MyERPDemoApp", []);

Now, we can use angApp to create different things like controllers, services etc.(That we will see ahead).

How to use module

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
  4. <script>  
  5.     //Creating module.  
  6.     var angApp = angular.module("MyERPDemoApp", []);  
  7. </script>  
  8. <!--Using module by adding the name in the ng-app directive. -->  
  9.   
  10. <body ng-app="MyERPDemoApp"> {{5+5}} </body>  
  11.   
  12. </html>  
Here above, in the script tag, we have created a module by using angular.module method and named as MyERPDemoApp, and then, we used that in ng-app directive.

Model in AngularJS

The main use of the model in the AngularJS application is to hold and bind the application data to the HTML view. Model binds the property to DOM element given in the current scope. The ng-model directives are used for the model to bind the data to HTML DOM elements with application data.

In our previous application, we have used ng-model like below.

  1. <p>First Name: <input type="text" ng-model="firstName"></p>  
  2. <p>Last Name: <input type="text" ng-model="lastName"></p>  
  3.    string expression example with directives:  
  4. <span >full Name: {{ firstName + " " + lastName }} </span></br>  
Here, we are using ng-model with firstName and lastName property for text boxes. Then, displaying those properties in AngularJS expression.

{{ firstName + " " + lastName }}

Now, whatever a user types in firstName and lastName text box, that displays in the full name.


arvind singh baghel anjs aoutput

Controller in AngularJS

Controller is the business logic in the AngularJS application. It holds and passes data to the application view and vice-versa. A controller is the collection of JavaScript functions written in AngularJS form. It is a JavaScript object container that contains properties, attributes, methods. Controller takes input from the HTML view work on that data, and also returns the result to the view. I can say that Controller can act same as the controller in ASP.Net MVC or same as ASP.Net code behind, but with some more enhance feature and advantages.

How to create controller

The modulename.controller method is used to create a controller.

Example

  1. var angApp = angular.module("MyERPDemoApp", []);  
  2. ang.App.controller('UserController', function($scope)   
  3. {  
  4.     $scope.welcomenote = "Welcome to Angular JS world";  
  5. });  
  6. OR  
  7. angular.module("MyERPDemoApp", []).App.controller('UserController', function($scope) {  
  8.     $scope.welcomenote = "Welcome to Angular JS world";  
  9. });  
How to use Controller

 

ng-controller directive used to add specific controller in the view by passing the controller name in the ng-controller directive.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
  4. <script>  
  5.     //Creating module with name MyERPDemoApp.  
  6.     var angApp = angular.module("MyERPDemoApp", []);  
  7.     //Creating controller with name UserController.  
  8.     angApp.controller('UserController', function($scope) {  
  9.         $scope.welcomenote = "Welcome to Angular JS world";  
  10.     });  
  11. </script>  
  12. <!--Using module by adding the name in the ng-app directive. -->  
  13. <!--Adding UserController with the help of ng-controller directive. -->  
  14.   
  15. <body ng-app="MyERPDemoApp" ng-controller="UserController"> {{ welcomenote }} </body>  
  16.   
  17. </html>  
The above code will display the welcome note on the screen. But generally in the large enterprise application the controllers exist in the external js files and add that file in the view with the script tag.

Example

<script src="UserController.js"></script>

Find the attachment for the application, creating a controller in the external JS file, and adding that file in the HTML View.

Summary

In this article, we have covered Module and defined ng-module, Model used ng-model and created and defined Controller in AngularJS and we have seen how to create them and how to use them with the examples.

So, in the next article, Day Four, I will cover Databinding in AngularJS, Scopes in AngularJS.

<<Click here for previous part


Similar Articles