angular

What is angular?

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.

What are angular's main functionalities?

Component-based Architecture

Angular uses a component-based architecture where the application is divided into small, reusable components. Each component has its own HTML template, CSS styles, and TypeScript logic.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello, {{name}}!</h1>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
}

Two-way Data Binding

Two-way data binding allows for automatic synchronization of data between the model and the view. This means that any changes in the model are reflected in the view and vice versa.

<input [(ngModel)]="name">
<p>Hello, {{name}}!</p>

Dependency Injection

Dependency Injection (DI) is a design pattern used to implement IoC (Inversion of Control). It allows a class to receive its dependencies from an external source rather than creating them itself. Angular's DI system makes it easy to manage dependencies and promote reusability.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return ['data1', 'data2', 'data3'];
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  template: `<ul><li *ngFor="let item of data">{{item}}</li></ul>`
})
export class DataComponent implements OnInit {
  data: string[];
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

Routing

Angular's Router enables navigation from one view to the next as users perform application tasks. It allows for defining routes and associating them with components, enabling deep linking and navigation.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

// In app.module.ts
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [AppRoutingModule],
  // other imports
})
export class AppModule {}

Other packages similar to angular

react

React is a JavaScript library for building user interfaces, maintained by Facebook. Unlike Angular, which is a full-fledged framework, React is a library that focuses on the view layer only. It uses a virtual DOM for efficient updates and is often paired with other libraries for state management and routing.

vue

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be incrementally adoptable, meaning you can use as much or as little of Vue as you need. Vue is known for its simplicity and ease of integration with other projects and libraries.

svelte

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Svelte writes code that updates the DOM when the state of your app changes.

README

angular

AngularJS provided as a CommonJS module. Compiled with jsdom when running in Node. Useful for client-side apps built with Browserify and for testing AngularJS code in Node without depending on a browser.

Versioning

The version number of this module reflects the version of AngularJS it provides.

Why

For client-side apps using Browserify, this module provides a way for them to use AngularJS without shimming.

Having a version of AngularJS that works outside the browser could also be convenient for many reasons. The primary motivation was around testability and modularity of AngularJS related projects. For developers utilizing the CommonJS standard and Browserify to build AngularJS projects and ecosystems, the hope is that this module will greatly simplify their workflow.

As egghead.io has shown, testing simple views and directives is a great way to ensure the pieces of your app are working as intended. Unfortunately, testing this way usually requires running your code in a real browser via something like Karma, because AngularJS assumes window and document are both available. Additionally, AngularJS (via angular-mocks.js) only exposes the inject method shown in the egghead.io videos if window.jasmine is defined.

This module allows you to test AngularJS views and directives using any testing framework and runner you like, from Mocha to Nodeunit to tape.

This module also aims to make it much easier to create AngularJS directives, modules, and other components that can be independently published to and versioned on npm and/or their own repositories.

Examples

The inject method referenced above is really just a shortcut to $injector.invoke, but $injector is only available from within AngularJS. Fortunately, there are two ways to get a reference to Angular's injector from outside of AngularJS code.

// this will return a fresh instance of injector each time it's called
// if your code is not running in a browser you must use this method
var injector = angular.injector(['ng']);

// provided only as an FYI, the following method WILL NOT WORK outside a web browser
// this will return the injector singleton for the application in which <element> is defined.
// for code that runs in a browser you could just use document if ng-app is defined on <html>
// otherwise you can use any element that is a descendent of the tag your app is defined/bootstrapped on
var injector = angular.element(<element>).injector();

Testing view compilation

var angular = require('angular'),
	inject = angular.injector(['ng']).invoke,
	num;

inject(function ($rootScope, $compile) {
	var el = angular.element('<div>{{ 2 + 2 }}</div>');
	el = $compile(el)($rootScope);
	$rootScope.$digest();
	num = +el.html();
});

// num === 4

Testing event handling

var angular = require('angular'),
	inject = angular.injector(['ng']).invoke,
	answer;

inject(function ($rootScope) {
	$rootScope.$on('foo', function (e, val) {
		answer = val;
	});
	$rootScope.$broadcast('foo', 'bar')
});

// answer === 'bar'

Changelog

1.1.1 pathological-kerning (2012-11-26)

Note: 1.1.x releases are considered unstable. They pass all tests but we reserve the right to change new features/apis in between minor releases. Check them out and please give us feedback.

Note: This release also contains all bug fixes available in 1.0.3.

Features

• $cacheFactory: cache.put now returns the added value (168db339)
• $http: Allow setting withCredentials on defaults (209b67df, #1095)
• $resource: support custom headers per action (fbdab513, #736)
• $sanitize: support telephone links (04450c48)
• FormController: add ability to reset a form to pristine state (733a97ad, #856)
• jqLite: add triggerHandler() (650fd933)
• linky filter: allow optional 'target' argument (610927d7, #1443)
• angular-mocks: support mocha in angular mocks (92558fe4)
• ngModel: support ngTrim attribute on input (d519953a)
• scenario: add dblclick method to the ngScenario dsl (8cb9c99e)
• CSP: update to the latest CSP api (af7e0bd0, #1577)

Bug Fixes

• $http:
  • config.param should expand array values properly (see breaking change notes below) (79af2bad, #1363)
  • prevent CORS preflight checks by removing X-Requested-With from header defaults (see breaking change notes below) (3a75b112, #1004)
  • prevent CORS preflight checks by not setting X-XSFR-TOKEN header for cross domain requests (see breaking change notes below) (fce100a4, #1096)

Refactorings

• $evalAsync: have only one global async queue (331cd5a8)

Breaking Changes

• Due to fix for #1363 it's possible but unlikely that $http will start generating different URLs for requests. This affects only cases when a request is made with a parameter, value of which is an array. If the server relied on the buggy behavior then either the backend should be fixed or a simple serialization of the array should be done on the client before calling the $http service.

• Due to fix for #1004 the X-Requested-With header is not set by $http service any more. If anyone actually uses this header it's quite easy to add it back via:

    myAppModule.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
    }]);
  

• Due to fix for #1096 X-XSFR-TOKEN header is no longer send for cross domain requests. This shouldn't affect any known production service. If we are wrong, please let us know ;-)

<a name="1.0.3"></a>