angular
Advanced tools
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.
Package description
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.
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 {}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.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 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
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.
The version number of this module reflects the version of AngularJS it provides.
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.
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();
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
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'
FAQs
HTML enhanced for web apps
We found that angular demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.
Product
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.