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.0.7 monochromatic-rainbow (2013-05-22)

Bug Fixes

• $browser: should use first value for a cookie. (3952d35a, #2635)

• $cookieStore: $cookieStore.get now parses blank string as blank string (cf4729fa)

• $location: back-button should fire $locationChangeStart (dc9a5806, #2109)

• $parse: Fix context access and double function call (7812ae75, #2496)

• dateFilter: correctly format ISODates on Android<=2.1 (f046f6f7, #2277)

• jqLite: correct implementation of mouseenter/mouseleave event (06f2b2a8, #2131)

• angular.copy/angular.extend: do not copy $$hashKey in copy/extend functions. (6d0b325f, #1875)

• i18n: escape all chars above \u007f in locale files (695c54c1, #2417)

• Directives:

  • ngPluralize: handle the empty string as a valid override (67a4a25b, #2575)
  • select: ensure empty option is not lost in IE9 (4622af3f, #2150)
  • ngModel: use paste/cut events in IE to support context menu (363e4cbf, #1462)
  • ngClass: should remove classes when object is the same but property has changed (0ac969a5)

• PhoneCat Tutorial: renamed Testacular to Karma (angular-phonecat)

<a name="1.1.4"></a>