• Stars
    star
    161
  • Rank 233,470 (Top 5 %)
  • Language
    JavaScript
  • Created over 11 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Library for aspect-oriented programming with AngularJS.

Travis CI Join the chat at https://gitter.im/mgechev/angular-aop

Online demo

If you prefer learning by doing (trial and error), come right this way.

API

AngularAOP allows you to apply aspect-oriented programming in your AngularJS applications.

If you notice that you have cross-cutting concerns you can isolate them in individual services and apply them as follows:

myModule.config(function ($provide, executeProvider) {
  executeProvider.annotate($provide, {
    ServiceToWove: [{
      jointPoint: JOINT_POINT,
      advice: ADVICE_NAME,
      methodPattern: /Special/
      argsPattern: [/arg1/, /arg2/]
    }, {
      jointPoint: JOINT_POINT
      advice: ADVICE_NAME
    }]
  });
});

The joint-points supported in the current version of the framework are:

  • after - the advice will be invoked after the target method
  • afterResolveOf - the advice will be invoked after the promise returned by target method has been resolved and after the resolve callback attached to the promise is invoked
  • aroundAsync - the advice will be invoked before the target method was invoked and after the promise returned by it was resolved
  • around - the advice will be invoked before the target method was invoked and after it was invoked
  • beforeAsync - the target method will be called after the promise returned by the advice was resolved
  • before - the target method will be invoked after the advice
  • onRejectOf - the advice will be invoked when the promise returned by the target method was rejected
  • onResolveOf - the advice will be invoked after the promise returned by the target method was resolved but before the resolve callback attached to the promise is invoked
  • onThrowOf - the advice will be called if the target method throws an error

For additional information about Aspect-Oriented Programming and AngularAOP visit the project's documentation and this blog post.

Change log

v0.1.0

New way of annotating. Now you can annotate in your config callback:

DemoApp.config(function ($provide, executeProvider) {
  executeProvider.annotate($provide, {
    ArticlesCollection: {
      jointPoint: 'before',
      advice: 'Logger',
      methodPattern: /Special/,
      argsPatterns: [/arg1/, /arg2/, ..., /argn/]
    }
  });
});

v0.1.1

Multiple aspects can be applied to single service through the new way of annotation:

DemoApp.config(function ($provide, executeProvider) {
  executeProvider.annotate($provide, {
    ArticlesCollection: [{
      jointPoint: 'before',
      advice: 'Logger',
    }, {
      //aspect 2
    }, {
      //aspect 3
    }, ... , {
      //aspect n
    }]
  });
});

Note: In this way you won't couple your target methods/objects with the aspect at all but your target service must be defined as provider.

v0.2.0

Added forceObject property to the rules. This way issues like #12 will not be reproducable since we can force the framework to wrap the target's method, insted of the target itself (in case the target is a function with "static" methods").

Issues fixed:

  • Once a function is wrapped into an aspect its methods are preserved. We add the target to be prototype of the wrapper, this way using the prototype chain the required methods could be found.

v0.2.1

Added tests for:

  • Before async joint-point
  • On resolve joint-point

Add JSCS and update Gruntfile.js

v0.3.1

  • deep config property, which allows adding wrappers to prototype methods
  • Fix forceObject

v0.3.1

  • Wrap the non-minified code in build in IIFE (Issue 15)
  • Single 'use strict'; at the top of the IIFE

v0.4.0

  • Add the joint-point names as constants to the executeProvider, so now the following code is valid:
myModule.config(function ($provide, executeProvider) {
  executeProvider.annotate($provide, {
    ServiceToWove: [{
      jointPoint: executeProvider.ON_THROW,
      advice: ADVICE_NAME,
      methodPattern: /Special/
      argsPattern: [/arg1/, /arg2/]
    }, {
      jointPoint: executeProvider.BEFORE,
      advice: ADVICE_NAME
    }]
  });
});
  • Add more tests

v0.4.1

  • Special polyfill for IE9 of Object.setPrototypeOf.

Roadmap

  1. joinpoint.proceed()
  2. Use proper execution context inside the target services. This will fix the issue of invoking non-woven internal methods.
  3. More flexible way of defining pointcuts (patching $provide.provider might be required)

Known issues

Circular dependency

This is not issue in AngularAOP but something which should be considered when using Dependency Injection.

Note that if the $injector tries to get a service that depends on itself, either directly or indirectly you will get error "Circular dependency". To fix this, construct your dependency chain such that there are no circular dependencies. Check the following article, it can give you a basic idea how to procceed.

Contributors

mgechev david-gang Wizek slobo christianacca peernohell
mgechev david-gang Wizek slobo christianacca peernohell

License

AngularAOP is distributed under the terms of the MIT license.

More Repositories

1

javascript-algorithms

💻 JavaScript implementations of computer science algorithms
JavaScript
7,836
star
2

angularjs-style-guide

📚 Community-driven set of best practices for AngularJS application development
4,984
star
3

revive

🔥 ~6x faster, stricter, configurable, extensible, and beautiful drop-in replacement for golint
Go
4,764
star
4

angular-seed

🌱 [Deprecated] Extensible, reliable, modular, PWA ready starter project for Angular (2 and beyond) with statically typed build and AoT compilation
TypeScript
4,572
star
5

angular-performance-checklist

⚡ Cheatsheet for developing lightning fast progressive Angular applications
4,027
star
6

google-interview-preparation-problems

leetcode problems I solved to prepare for my Google interview.
JavaScript
3,124
star
7

codelyzer

Static analysis for Angular projects.
TypeScript
2,446
star
8

angularjs-in-patterns

AngularJS in patterns - this repository provides different look into AngularJS. It contains information where different design patterns are used inside the framework or any Angular application.
JavaScript
1,956
star
9

ngrev

Tool for reverse engineering of Angular applications
TypeScript
1,553
star
10

mk.js

Canvas implementation of basic fighting game which allows multiplayer over the network.
JavaScript
1,504
star
11

angular2-style-guide

[Deprecated] Community-driven set of best practices and style guidelines for Angular 2 application development
1,203
star
12

injection-js

Dependency injection library for JavaScript and TypeScript in 5.1K. It is an extraction of the Angular's ReflectiveInjector which means that it's well designed, feature complete, fast, reliable and well tested.
TypeScript
1,149
star
13

jscapture

Screen recording and capturing with pure client-side JavaScript.
JavaScript
797
star
14

tiny-compiler

A tiny evaluator and compiler of arithmetic expressions.
JavaScript
768
star
15

ngx-quicklink

Quicklink prefetching strategy for the Angular router
TypeScript
749
star
16

guess-next

🔮 Demo application showing the integration of Guess.js with Next.js
JavaScript
526
star
17

aspect.js

JavaScript library for aspect-oriented programming using modern syntax.
TypeScript
474
star
18

angular-webrtc

Demo for my blog post at http://goo.gl/LCOSsI
ApacheConf
307
star
19

switching-to-angular2

TypeScript
285
star
20

memo-decorator

Decorator which applies memoization to a method of a class.
TypeScript
256
star
21

js-vnc-demo-project

Demo project for the class Advanced JavaScript at the department mathematics and informatics in Sofia University.
JavaScript
186
star
22

is-esm

🌳 CLI tool which checks if a package is distributed in ECMAScript module format. Helps you reason if the package is tree-shakable.
JavaScript
184
star
23

angular-immutable

Simple directive, which allows binding to Immutable.js collections.
JavaScript
166
star
24

ngast

Parser for Angular projects.
TypeScript
164
star
25

tslint-angular

Recommended tslint configuration for Angular applications.
161
star
26

ngx-hover-preload

🖱 Preload Angular lazy-loaded routes on mouse over
TypeScript
160
star
27

mk-tfjs

Play MK.js with TensorFlow.js
JavaScript
156
star
28

ReactChat

WebRTC chat with ReactJS
JavaScript
153
star
29

ngworld

Generate a Minecraft/Christmas-like world out of an Angular application.
TypeScript
142
star
30

scalable-architecture-demo

TypeScript
134
star
31

github-contributors-list

Node.js script, which outputs all the contributors for given open GitHub project
JavaScript
133
star
32

ngresizable

Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (2 and beyond).
TypeScript
117
star
33

angular2-hot-loader

[NOT MAINTAINED] Angular 2 hot loader
TypeScript
115
star
34

light-angularjs

Light AngularJS implementation for my slides "Lightweight AngularJS"
JavaScript
110
star
35

movement.js

Gesture recognition with JavaScript and HTML5.
JavaScript
106
star
36

angular-vnc

VNC client implemented with AngularJS and Yeoman
JavaScript
99
star
37

ngx-tfjs

🤖 TensorFlow.js bindings for Angular
TypeScript
95
star
38

real-world-bazel

The real world Angular example app moved to Bazel
TypeScript
90
star
39

angular-transitions

Pre-defined set of CSS3 transformation which can be used with ng-view, ui-view, ng-repeat, ng-show, ng-hide. Both the 1.1.5 and 1.2.0 APIs are supported.
CSS
90
star
40

angular-tfjs-demo

A demo application with TensorFlow.js bindings for Angular.
TypeScript
85
star
41

angular2-ngc-rollup-build

Simple build for "Hello world!" Angular 2 application with ngc and rollup.
HTML
81
star
42

angular2-github-app-bootstrap

Exercise for building simple Angular 2 apps
JavaScript
79
star
43

blog.mgechev.com

My personal blog.
JavaScript
70
star
44

dotfiles

My dot files.
Shell
67
star
45

react-reorderable

Simple react sortable component (for more advanced cases use react-dnd).
JavaScript
63
star
46

devtools-vnc

VNC client for Chrome Devtools
JavaScript
61
star
47

cli-builders-demo

Demo showing how to develop a builder using the Angular CLI Architect API.
TypeScript
59
star
48

ngx-flamegraph

Flame graph for stack trace visualization written in Angular
TypeScript
57
star
49

electron-typescript-boilerplate

Electron TypeScript starter (intended mostly for personal projects). Fork of https://github.com/szwacz/electron-boilerplate.
JavaScript
54
star
50

angular-ivy-demo

Demo repository showing how ivy allows significant API simplification.
TypeScript
53
star
51

mlx

Data-driven bundling
TypeScript
48
star
52

optimizing-an-angular-application

Code for my ngconf talk "Optimizing an Angular Application".
TypeScript
48
star
53

ngx-gh

Automatic deployments to GitHub pages directly from the Angular CLI 🚀
TypeScript
45
star
54

data-adapter

Data adapter useful in data serialization when talking with external services.
TypeScript
45
star
55

react-pstate

Persistence of the state of ReactJS component
JavaScript
43
star
56

hybrid-rendering

TypeScript
42
star
57

playground

Initial experience with different programming languages
JavaScript
40
star
58

bazel-demo

Simple demo for building a TypeScript project with Bazel.
TypeScript
40
star
59

angular-hybrid-rendering

TypeScript
39
star
60

plainvm

plainvm allows you to control multiple virtual machines which are distributed among many hosts through your browser.
JavaScript
38
star
61

gemini-angular-drawing-demo

TypeScript
38
star
62

angular2-simple-build

Simple build for "Hello world!" Angular 2 application.
TypeScript
37
star
63

versionable-collections

Collection optimized for AngularJS 1.x one-way bindings
JavaScript
33
star
64

typed-calc

Interpreter for simply typed lambda calculus implemented in JavaScript λ
JavaScript
33
star
65

ngx-circular-player

Circular player for Angular
TypeScript
32
star
66

swagger-typescript-fetch-api

Swagger codegen for TypeScript Fetch API.
HTML
32
star
67

angular2-stripe-demo

TypeScript
30
star
68

blobreader

Simple interface for reading blobs sequentially
JavaScript
28
star
69

ts-rpc

RPC protocol with services defined via TypeScript interfaces.
TypeScript
27
star
70

performance-patterns

TypeScript
27
star
71

podcast

Website of the Programming Podcast
TypeScript
26
star
72

dots

Implements the wildcard file matching in Go used by golint, go test etc.
Go
25
star
73

ng-tutorial

Platform for AngularJS interactive tutorials
JavaScript
25
star
74

purely-fast

TypeScript
25
star
75

ELang

Simple programming language created for educational purpose
Java
24
star
76

gently-js

Module which returns the offensive words in a string. A soft reminder to be nicer to each other ❤️.
JavaScript
23
star
77

angular-realworld-example-app-qucklink

TypeScript
22
star
78

optimizing-apps-angular-demo

Demo application for my talk on optimizing Angular apps
TypeScript
21
star
79

ngmigrate

Automated migration of <template> to <ng-template> for Angular 4+
JavaScript
20
star
80

dynamic-route-creator

[DEPRECATED] Demo for dynamically defining routes in Angular 2
TypeScript
19
star
81

guess-js-angular-demo

TypeScript
18
star
82

lazy-loading-routes-angular2

WARNING: Uses deprecated APIs.
JavaScript
18
star
83

angular2-hot-loader-demo

Demo of the Angular 2 hot loader prototype
TypeScript
18
star
84

guess-js-react-demo

JavaScript
17
star
85

angular2-rollup-build

Simple build for "Hello world!" Angular 2 application with rollup.
HTML
17
star
86

getting-started-with-angular

Code for the second edition of the book "Switching to Angular 2", with title "Getting started with Angular".
TypeScript
17
star
87

svg-design-patterns

This repository contains UML class diagrams of some design and architectural patterns.
17
star
88

kitty-cinema

HTML
16
star
89

programming-podcast-samples

TypeScript
16
star
90

react-di-demo

Demo for my blog post "Implementing Angular's Dependency Injection in React. Understanding Element Injectors."
JavaScript
16
star
91

code-splitting-web-dev

TypeScript
15
star
92

react-drag

JavaScript
15
star
93

ivy-library-distribution-demo

TypeScript
14
star
94

angular-bazel-hello-world

Simple Angular app with Bazel configuration
HTML
13
star
95

viewchildren-contentchildren-demo

TypeScript
12
star
96

photos.mgechev.com

Website for my personal photography.
TypeScript
12
star
97

top-packages

TypeScript
12
star
98

v8-sorting-test

Testing the sorting performance of Google's V8 JavaScript engine.
Perl
12
star
99

immutable-differ

Work in progress.
TypeScript
11
star
100

guess-angular

TypeScript
11
star