Menu
I was wondering if I could receive some advice on visually representing a system built in VS with angular code controlling the font end.
I would ideally like to find something that can produce something similar to project dependency graph we find through VS ultimate tool or NDepend.
I know of quite a few .NET code and project visualisation tools, but am having a real struggle finding a suitable one for Angular JS
Is this a potential community project right here? Anyone want to collaborate on the/an approach as I believe this will help both existing developers and new developers to further grasp Angular and how it traverses systems on both the smaller and larger scales.
I would love to hear how others might have visually represented code dependencies in angular.
So. To conclude - Are there any existing tools to visualise angular dependencies in a project environment or does anyone want to collaborate to create one? Thanks for reading and hope this finds everyone well and in good health. Gruffy :)
750
Angular is a very opinionated and robust framework. As a result, Angular apps generally have bigger bundle sizes when compared to apps written using other JavaScript frameworks like React. The Angular framework comes with a lot of useful libraries already included within it, such as RxJs and Zone.
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.
Views are almost like their own virtual DOM. Each view contains a reference to a corresponding section of the DOM. Inside a view are nodes that mirror what is in the this section. Angular assigns one view node per DOM element. Each node holds a reference to a matching element.
Once you click on the Terminal option, the Visual Studio Code console will open as shown in the below image. Now type the command ng new MyAngularApp in the console and press enter to create the angular project as shown in the below image. The ng new command will create a new angular project.
Try the AngularJS Graph chrome extension : http://angularjs-graph.org/
My experience was that it "worked" out of the box, as in the visualisation rendered without any configuration on OSX. I am still coming to grips with how practically useful it is, but it certainly looks cool.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
