Post
Ask Question

Controller And Modules In Angular

Introduction

In this article, we will see controllers and the modules in AngularJS. And also, we will work with some examples. The topics we are going to discuss in this article are listed below.

  • Angular CLI
  • Angular expression
  • Module
  • Controller
  • Examples

Angular CLI

It’s a command line interface that is used to scaffold and build Angular apps using NodeJS style modules. It’s easy to create an application that already works. The working with Angular CLI is known as generator programs.

Angular expression

Angular expressions are the same as JavaScript expressions as they contain literals, operators, and variables. Angular expressions are inside the double curly braces. They are known as head directives.

For example, the following code is used to add to two numbers.

  1. <!Doctype html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
  6. </head>  
  7.   
  8. <body>  
  9.     <div ng-app> Sum:{{15+30}} </div>  
  10.     <div> Sum:{{15+30}} </div>  
  11.   
  12.     <body>  
  13.   
  14. </html> 

After running this application, the output will be like below.

Sum:45
Sum:{{15+30}}

Angular

Because, in the first division, we included the ng-app directives that are manipulated by Angular whereas, in the second div, it is same as a normal statement. Suppose, we use the ng-app in the HTML tag, the output of the application will be like below.

Sum:45
Sum:45

JavaScript object

Now, let us work with AngularJS with the JavaScript object. The code is shown below.

  1. <div>  
  2.    {{ {name:’navi’,age:’23’}.age}}  
  3. </div>  

 The output will be,

23

In this, consider that the ng-app is used with in the HTML tag.

Arrays

Now, while working with arrays, the arrays are same as in the JavaScript. Consider the following example.

  1. <div> {{ [‘Mumbai’,’Chennai’,’Delhi’][1]}} </div>  

The output will be,

Chennai

Modules

Module is a controller for the different parts of our application, filter, directive etc. Modules are equivalent to the Main()method of an Angular application. Modules declaratively specify how the Angular application should be bootstrapped. The following steps are used to create a module in AngularJS.

It’s easy to create to create a module in AngularJS,

  1. Var sample=angular. Module(“test”,[]);  

 

  • Here, test is the module name
  • [ ] is the dependent.

Module can be dependant on other modules too.

Controller

Controller is a JavaScript function. The controller is used to build a model for the view to display. The model is nothing but it’s a data. In a real world application, it is used to retrieve data from the database. To create a controller is easy. Just follow the steps given below.

  1. Var c = function($scope) {  
  2.     $scope.message = ”Welcome”;  
  3. }  

Attaching the message property to the Controller

Register the controller to the module

  1. Sample.controller(“c”, function($scope) {  
  2.     $scope.message = ”welcome”;  
  3. });  

Conclusion

 In this article, we learned about Controllers and Modules in AngularJS. In my next article, we will learn some other topics in AngularJS.


Similar Articles