Logo (2)
Elysium Spark Note

Angular.js Programming

  • October 16, 2024
  • Com 0

1. Introduction to AngularJS

Overview of AngularJS:

AngularJS is a JavaScript-based open-source front-end web framework developed by Google. It was initially released in 2010 and is primarily used for building dynamic, single-page applications (SPAs). AngularJS simplifies both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications (RIA).

Some of the features that make AngularJS popular include:

  1. Two-way data binding: Synchronizes data between the model and the view.
  2. Dependency Injection: Facilitates easier testing and development.
  3. Directives: Allows developers to extend HTML with custom attributes and elements.
  4. Routing: Helps in managing navigation and views in single-page applications.

AngularJS differs from Angular (2+), which is a complete rewrite of the original AngularJS and not backward-compatible.

Key Features:

  1. MVC Architecture: AngularJS follows the Model-View-Controller architecture.
  2. Directives: These are special attributes in HTML used to extend the behavior of elements.
  3. Data Binding: Two-way binding allows automatic synchronization of data between the model and the view.
  4. Dependency Injection: AngularJS has a built-in dependency injection subsystem that allows easy management of service instances.
  5. Routing: AngularJS has a powerful routing mechanism that helps manage navigation between different views in a single-page application.
  6. Templating: AngularJS provides a templating engine that allows you to create dynamic views using HTML and AngularJS expressions.

Basic Setup and Installation:

To get started with AngularJS, you need to include the AngularJS library in your project. The easiest way to do this is by adding the following script tag to your HTML file:

Copy Code 


<!DOCTYPE html>
<html>
<head>
  <title>AngularJS Application</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
  <div ng-app="">
    <h1>{{ message }}</h1>
  </div>
  <script>
    function MyController($scope) {
      $scope.message = "Hello, AngularJS!";
    }
  </script>
</body>
</html>

MVC Architecture in AngularJS:

AngularJS implements MVC architecture, which is broken down into three components:

  1. Model: The data of the application.
  2. View: The user interface (UI) of the application, built using HTML.
  3. Controller: JavaScript functions that handle the logic for the application, connecting the model and the view.
Copy Code 


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});

2. AngularJS Directives

Directives in AngularJS are special markers on the DOM element (such as attributes, element names, comments, or CSS classes) that tell AngularJS to do something to that DOM element (like attaching a behavior to it or transforming the DOM element).

Built-in Directives:

  1. ng-app:

The ng-app directive initializes an AngularJS application. It defines the root element for the AngularJS application and is typically used at the <html> or <body> tag.

Copy Code 


<div ng-app="myApp">
  <!-- AngularJS code will be active here -->
</div>
  1. ng-model:

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

Copy Code 


<input type="text" ng-model="name">
<p>{{ name }}</p>
  1. ng-bind:

The ng-bind directive binds the value of an expression to the content of an HTML element.

Copy Code 


<p ng-bind="name"></p>
  1. ng-repeat:

The ng-repeat directive repeats a set of HTML elements once for each item in a collection.

Copy Code 


<ul>
  <li ng-repeat="person in people">{{ person.name }}</li>
</ul>

Custom Directives:

In addition to the built-in directives, AngularJS allows developers to create their own custom directives. A directive can be defined using the directive function.

Copy Code 


app.directive("customDirective", function() {
  return {
    template: "<h1>This is a custom directive!</h1>"
  };
});

In the HTML, the custom directive can be used like this:

Copy Code 


<custom-directive></custom-directive>

Custom directives can also have isolated scopes, allowing them to encapsulate behavior and data.

3. AngularJS Expressions

AngularJS expressions are used to bind data to HTML. They work much like JavaScript expressions but have the following differences:

  • They do not use loops or conditionals.
  • They are executed in the context of the scope object.

Data Binding

AngularJS expressions are often used in double curly braces {{ expression }} to bind data to the view.

Copy Code 


<p>The sum of 1 and 1 is {{ 1 + 1 }}</p>

Expressions vs. JavaScript

  1. No access to global objects: AngularJS expressions cannot access JavaScript global variables such as window, document, or Math.
  2. Safe evaluation: If the expression tries to perform any unsafe actions, AngularJS will stop evaluating and throw an error.
Copy Code 


<p>{{ x * y }}</p>

4. Controllers in AngularJS

Definition

Controllers in AngularJS are used to build the logic of the application. They are JavaScript functions that are bound to a specific scope. Controllers are defined using the controller method in a module.

Copy Code 


app.controller('myCtrl', function($scope) {
  $scope.name = "AngularJS";
});

Role of Controllers

Controllers are responsible for:

  1. Initializing application data.
  2. Handling events.
  3. Communicating with the services to fetch or send data.

Using $scope Object

The $scope object is an essential part of AngularJS controllers. It allows you to bind variables and functions between the controller and the view.

Copy Code 


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

In the HTML file:

Copy Code 


<div ng-controller="myCtrl">
  <p>{{ message }}</p>
</div>

5. Filters in AngularJS

Built-in Filters:

Filters in AngularJS allow you to format data displayed to the user. Filters can be applied using the pipe (|) symbol.

Common Built-in Filters

  • Currency: Formats a number as currency.
Copy Code 


{{ amount | currency }}
  • Uppercase: Converts a string to uppercase.
Copy Code 


{{ name | uppercase }}
  • Lowercase: Converts a string to lowercase.
Copy Code 


{{ name | lowercase }}
  • Date: Formats a date string.
Copy Code 


{{ date | date:'fullDate' }}
  • LimitTo: Limits an array or string to a specified number of elements/characters.
Copy Code 


{{ text | limitTo:10 }}
  • OrderBy: Orders an array by a specified property.
Copy Code 


 <li ng-repeat="item in items | orderBy:'name'">{{ item.name }}</li>

Custom Filters

Custom filters can be created by registering a filter factory function in a module.

In Java script

Copy Code 


app.filter('reverse', function() {
return function(input) {
return input.split('').reverse().join('');
};
});

 

In the HTML:

 

Copy Code 


<p>{{ 'hello' | reverse }}</p>

  1. Services in AngularJS

Built-in Services

AngularJS comes with several built-in services such as $http, $location, $timeout, $interval, and $window. These services can be injected into controllers, filters, or other services.

Custom Services

Custom services can be created in AngularJS by using the service or factory methods.

javascript

Copy Code 


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

Using the service in a controller:

Copy Code 


app.controller('myCtrl', function($scope, myService) {
$scope.message = myService.sayHello();
});

Dependency Injection

AngularJS uses dependency injection (DI) to inject services, factories, and other dependencies into controllers or services. This ensures that your code is modular, testable, and easy to maintain.

javascript

Copy Code 


app.controller('myCtrl', function($scope, $http) {
$http.get('data.json').then(function(response) {
$scope.data = response.data;
});
})
;

  1. Routing and Views

Setting Up Routes

AngularJS allows you to define routes to different views in your single-page application using the $routeProvider service.

javascript

Copy Code 


app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/home'
});
});

Using $routeProvider

The $routeProvider is used to configure routes in AngularJS. Each route specifies a template and a controller.

Nested Views

AngularJS supports nested views using directives like ng-view. Nested views can help you manage complex application layouts.

html

Copy Code 


<div ng-view></div>

  1. Forms in AngularJS

Form Validation

AngularJS provides built-in validation for forms. It includes validation for required fields, email, number, URL, and custom validation logic.

html

Copy Code 


<form name="myForm">
<input type="email" name="userEmail" ng-model="user.email" required>
<span ng-show="myForm.userEmail.$error.required">Email is required.</span>
</form>

Input Types

AngularJS supports several input types such as text, email, number, date, and more.

Handling Form Submissions

Forms in AngularJS are typically handled by submitting the form data to a controller function. This can be done by attaching the ng-submit directive to the form.

html

Copy Code 


<form ng-submit="submitForm()">
<input type="text" ng-model="name">
<button type="submit">Submit</button>
</form>

  1. Modules in AngularJS

Creating and Using Modules

Modules are containers for different parts of an AngularJS application such as controllers, services, filters, and directives. Modules are created using the angular.module() method.

javascript

Copy Code 


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

Injecting Dependencies

You can inject dependencies into your modules to provide additional functionality. For example, if you want to use routing in your application, you can inject the ngRoute module.

javascript

Copy Code 


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

Module Methods

Modules in AngularJS have several methods like controller(), service(), factory(), directive(), config(), and run(), which allow you to define various components and configurations.

  1. HTTP Communication

Using $http for AJAX Calls

The $http service is used to communicate with a remote server via the browser’s XMLHttpRequest object or via JSONP.

javascript

Copy Code 


app.controller('myCtrl', function($scope, $http) {
$http.get('https://api.example.com/data')
.then(function(response) {
$scope.data = response.data;
});
});

$http Methods

The $http service has several methods:

  • $http.get(): Used to make a GET request.
  • $http.post(): Used to make a POST request.
  • $http.put(): Used to make a PUT request.
  • $http.delete(): Used to make a DELETE request.

Error Handling

You can handle errors in $http requests by chaining the .catch() method to handle failed requests.

javascript

Copy Code 


$http.get('https://api.example.com/data')
.then(function(response) {
$scope.data = response.data;
})
.catch(function(error) {
console.log('Error occurred:', error);
});

  1. AngularJS Events

Event Handling

AngularJS allows you to handle DOM events like clicks, keypresses, and changes using the ng-click, ng-keypress, and ng-change directives.

html

Copy Code 


<button ng-click="handleClick()">Click me</button>

Using $scope.$on, $scope.$emit, and $scope.$broadcast

AngularJS provides a way to handle custom events with the $scope.$on, $scope.$emit, and $scope.$broadcast methods. These methods allow communication between different parts of your application.

  • $scope.$on(): Listens for a specific event.
  • $scope.$emit(): Emits an event upwards in the scope hierarchy.
  • $scope.$broadcast(): Broadcasts an event downwards to all child scopes.

javascript

Copy Code 


scope.$on('customEvent', function(event, args) {
console.log('Event received:', args);
});
$scope.$emit('customEvent', { message: 'Hello' });

  1. Two-way Data Binding

Explanation of Two-way Data Binding

Two-way data binding is one of AngularJS’s core features. It allows changes in the model to reflect automatically in the view, and vice versa.

html

Copy Code 


<input type="text" ng-model="name">
<p>{{ name }}</p>
When the user types something in the input field, the paragraph element updates automatically without needing to manually update the view.

Binding with ng-model

The ng-model directive is used to create a two-way binding between the model and the view.

html

Copy Code 


<input type="text" ng-model="username">

  1. Custom Directives

Creating Custom Directives

Custom directives are one of the most powerful features of AngularJS, allowing you to create reusable components.

javascript

Copy Code 


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

Isolating Scope

In some cases, you may want to isolate the scope of a directive to avoid interfering with the parent scope.

javascript

Copy Code 


app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
message: '@'
},
template: '<p>{{ message }}</p>'
};
});

  1. AngularJS Animation

Animating with ngAnimate

AngularJS has an ngAnimate module that enables animations when certain directives are used (e.g., ng-show, ng-hide, ng-repeat).

To use animations, you need to include the ngAnimate module in your application:

javascript

Copy Code 


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

CSS and JavaScript-based Animations

You can create animations using CSS or JavaScript. For CSS animations, AngularJS adds and removes CSS classes during the different phases of the animation.

css

Copy Code 


.fade-in {
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.fade-in.ng-enter {
opacity: 1;
}

  1. Testing in AngularJS

Unit Testing with Karma and Jasmine

AngularJS applications can be tested using the Karma test runner and the Jasmine testing framework. You can write unit tests for your controllers, services, and directives.

Here’s a simple unit test for a controller:

javascript

Copy Code 


describe('MyController', function() {
beforeEach(module('myApp'));
var $controller;
beforeEach(inject(function(_$controller_) {
$controller = _$controller_;
}));
it('should initialize the name variable', function() {
var $scope = {};
var controller = $controller('myCtrl', { $scope: $scope });
expect($scope.name).toEqual('AngularJS');
});
});

End-to-End Testing with Protractor

For end-to-end testing, AngularJS uses Protractor, a testing framework built on top of WebDriverJS that automates browser interactions for testing user interfaces.

javascript

Copy Code 


describe('My AngularJS App', function() {
it('should have a title', function() {
browser.get('index.html');
expect(browser.getTitle()).toEqual('My AngularJS App');
});
});

This AngularJS provides a comprehensive guide to the framework, covering key concepts and functionalities. It helps both beginners and advanced developers with essential topics such as directives, controllers, routing, services, and testing in AngularJS.