Skip to content

README.md

Latest commit

 

History

History
35 lines (23 loc) · 1.92 KB

README.md

File metadata and controls

35 lines (23 loc) · 1.92 KB

Angular diagnostics

JS apps can be difficult to understand. This small library attempts to help you make some sense of your AngularJS 1.x app.

You get two things:

  1. Component mapper - Visualise the modules and components of your AngularJS app in a D3 node link tree
  2. Event logger - A logger to help you find and understand the events which fly around your AngularJS app via $emit and $broadcast

Using each tool is a pretty manual process but worth it.

1. Component mapper

Getting the data

  • Include ComponentMapperModule (inside angular-component-mapper.js) in your app at the root level
  • Replace 'name_of_root_module' with the name of your app module inside angular-component-mapper.js
  • Uncomment outputModules() or outputModulesAndComponents() depending on what you want to see.
  • Run your app
  • You'll see a JSON representation of your app output in the console. Copy that

If your browser times out it's quite possible that you have circular dependencies. Maybe a sub module has a dependency on your root app module. Try and fix that first.

Using the data

  • Drop the module JSON (generated from outputModules()) into data-modules.json and module / component JSON (generated from outputModulesAndComponents()) into data-components.json
  • Then visit components.html and modules.html as needed
  • Enjoy the D3 magic

If some of the module names are too long, search for a function in components.html or modules.html called shortenName() and make changes as you need.

2. Event logger

  • Include EventListenerModule (inside angular-event-listener.js) in your app at the root level
  • Start your app and slowly (every 2s) click/tap around some regular user journeys. Watch the console output for events being logged per click

In a dirty attempt to group events that result from a user action, any events that are fired more than 2 seconds after a previous event are considered part of a different chain.