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>
Leave Comment