AngularJS Expressions and Modules

Ravi Vishwakarma 1221 24 Jun 2024 Updated 24 Jun 2024

AngularJS Expressions are code snippets usually placed in bindings within the HTML template to bind data to the view. They can be written inside double curly braces {{ expression }} or directly in directives.

Basic Syntax: Interpolation: {{ expression }}

Example: <p>{{ 5 + 5 }}</p> would display 10.

Directives: ng-bind: Another way to bind data.

Example: <p ng-bind="message"></p>

Expressions vs JavaScript:

AngularJS expressions are like JavaScript expressions, but they are safe to use in HTML.
They do not support control flow statements like if, for, etc.
They can include literals, operators, and variables.

Examples:

Mathematical operations: {{ 1 + 1 }}
String concatenation: {{ "Hello " + name }}
Function calls: {{ myFunction() }}
Object access: {{ user.name }}

AngularJS Modules

AngularJS Modules are containers for different parts of an application. They help in separating the application into reusable parts and in organizing code.

Creating a Module: Use angular.module to create a new module.

Example: var app = angular.module('myApp', []);

Adding Dependencies: You can specify dependencies on other modules.

Example: var app = angular.module('myApp', ['ngRoute', 'ngResource']);

Components of a Module:

Controllers: Define the behavior of a particular scope.

app.controller('myCtrl', function($scope) {
    $scope.greeting = 'Hello, World!';
});

Services: Share data and behavior across the application.

app.service('myService', function() {
    this.sayHello = function() {
        return 'Hello!';
    };
});

Directives: Teach HTML new tricks by extending its functionality.

app.directive('myDirective', function() {
    return {
        template: 'This is a custom directive'
    };
});

Filters: Format data displayed to the user.

app.filter('capitalize', function() {
    return function(input) {
        return input.charAt(0).toUpperCase() + input.slice(1);
    };
});

Factories: Similar to services but can return any value.

app.factory('myFactory', function() {
    return {
        greet: function() {
            return 'Hello, World!';
        }
    };
});

Example of AngularJS Application

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        // Define a module
        var app = angular.module('myApp', []);

        // Define a controller
        app.controller('myCtrl', function($scope) {
            $scope.message = 'Hello, AngularJS!';
            $scope.updateMessage = function(newMessage) {
                $scope.message = newMessage;
            };
        });

        // Define a service
        app.service('myService', function() {
            this.getGreeting = function() {
                return 'Hello from service!';
            };
        });

        // Define a directive
        app.directive('myDirective', function() {
            return {
                template: '<h1>Custom Directive</h1>'
            };
        });

        // Define a filter
        app.filter('reverse', function() {
            return function(input) {
                return input.split('').reverse().join('');
            };
        });
    </script>
</head>
<body ng-app="myApp">

    <div ng-controller="myCtrl">
        <p>{{ message }}</p>
        <input type="text" ng-model="message">
        <button ng-click="updateMessage('New Message!')">Update Message</button>
    </div>

    <div my-directive></div>

    <p>{{ 'AngularJS' | reverse }}</p>
</body>
</html>

blog

AngularJS Expressions and Modules

AngularJS Modules

Leave a Comment