Expressions and Controllers in AJS

Expressions and Controllers in AJS

(A) Expressions in AJS

Link for AJS Expressions Program Examples

• AngularJS expressions are pure JavaScript expressions and output the data where they are used.
• Expressions in AJS are meant to be simple and are primarily used for data binding and simple logic in the view layer of an AngularJS application.
• In AngularJS, expressions are snippets of code that are usually placed within double curly braces ({{ }}).
• Expressions are used to bind data from the controller (or scope) to the view (HTML), allowing dynamic data to be displayed in the UI.
• Syntax : AJS Expressions are written inside double curly braces such as in {{ expression}}.
• The concept of expressions in AJS is used to bind application data to HTML.
• Expressions behave similarly to ‘ng-bind’ directives.
• AngulaJS expression works with numbers, strings, arrays, objects, etc.
  • AJS Expressions are commonly used with AngularJS directives like ng-show, ng-hide, ng-repeat, etc., to control the behavior of the DOM elements. For example –  

(i) <div ng-show=”isLoggedIn”>Welcome, {{ username }}</div>
(ii) <ul><li ng-repeat=”item in items”>{{ item.name }}</li></ul>

• • AJS Expressions are often used to display dynamic data in the view. For example –

(i) <div>{{ uname }}</div>
(ii) <p>{{ user.age }}</p>

• • AJS Expressions can perform arithmetic operations and display the result. For example – 

(i) <p>{{ 50 + 30 }}</p>
(ii) <p>{{ num1 * num2 }}</p>

• • AJS Expressions can concatenate strings. For example – 

(i) <p>{{ ‘Hello, ‘ + uname }}</p>

• • AJS  Expressions can call functions defined in the controller. For example – 

(i) <p>{{ Addition() }}</p>

• • AJS Expressions can access properties of arrays and objects. For example – 

(i) <p>{{ users[0].name }}</p>
(ii) <p>{{ user.address.city }}</p>

• Expressions in AngularJS are limited compared to JavaScript code. They cannot contain control flow statements (such as if statement or for loop), variable assignments, or function definitions. 

(B) Controllers in AJS

Link for AJS Controllers Program Examples

• In AngularJS, controllers are JavaScript functions that are responsible for defining the behavior of a specific part of the application’s UI.
• AJS Controllers are used to initialize the scope (data model) of the view and provide data and behavior to be displayed and interacted with in the HTML.
• AngularJS application mainly relies on controllers and are used to control the flow of data in the application.
• A controller is defined using the ng-controller directive.
• A controller is a JavaScript object that contains attributes/properties, and functions.
• Each controller accepts $scope as a parameter, which refers to the application/module that the controller needs to handle.
• A controller is defined using the controller function provided by the angular object. The controller function takes a name and a function as parameters. For example – 

• Once we’ve defined a controller, we can attach it to a specific part of our application’s UI using the ng-controller directive in the HTML.

<div ng-app=”myApp” ng-controller=”MyController”>
            <!– HTML codes that use MyController definition  –>
</div>

• In the controller function, we can initialize properties on the $scope object. These properties will be available for binding in the HTML. For  example – 

angular.module(‘myApp’, [])
.controller(‘MyController’, function($scope) {
     $scope.message = ‘Hello India’;
});

• Once the properties are initialized on the $scope, they can be accessed and displayed in the HTML using double curly braces ({{ }}) for data binding. For  example – 

<div ng-app=”myApp” ng-controller=”MyController”>
       <p>{{ message }}</p>
</div>

• Controllers can also define functions that handle user interactions, such as button clicks or form submissions. These functions can be called directly from the HTML using AngularJS directives like ng-click. For  example – 

angular.module(‘myApp’, [])
.controller(‘MyController’, function($scope) {
$scope.showMessage = function() {
alert($scope.message);
};
});

——————————————————————————

<button ng-click=“showMessage()”>Show Message</button>  [Codes in HTML]

• Controllers play a crucial role in structuring AngularJS applications, separating concerns, and promoting modularity and maintainability by encapsulating the behavior of specific UI components.