Hello everybody,
who follows my blog.
Today I want to share with you hierarchical tree view example which displays data as name implies in hierarchical way. There are plenty of tools that display data in hierarchical way with help of AngularJS, but not so many which has implemented lazy loading. Another part which is not common with implementation is joing AngularJS with server side API.
So if you ever find need to display some hierarchic information with lazy loading, you can consider my code as some kind of base, which you can extend.
Some details
As backend I have the following:
-
MS SQL
-
C# with Entity framework
-
Web api
As frontend I have the following:
-
AngularJS
-
AngularJS component.
-
Also I've added some modifications, which allows lazy loading.
If you want download source code and immediately execute it, I will disappoint you. First you'll need to create MS SQL database. Please in MS SQL create database “HierarchyDemo”. In the downloaded code you'll see file “hierarchy.xls”. You can import data from it into table “Hierarchy” and then use it.
Here is screenshot of how tree looks during loading:
The code can be downloaded from here