Learn MVC Using Angular Bootstrap Nav Tree

Introduction

This article demonstrates working with MVC using Angular bootstrap nav tree.

Angular Bootstrap Nav Tree

The style is completely bootstrap because the tree is actually just a “nav” list, with a few changes.

  • Added
  • Expend / Collapse
  • Angular animations are used during expand / collapse

The abn-tree directives now work with Bootstrap 2 and Bootstrap 3. You can change the icons used, by specifying them in HTML attributes.

Follow the steps below to use Angular Bootstrap nav tree in Angular JS in MVC

  • Create MVC Project
  • Configure Angular bootstrap nav tree
  • Work in Angular bootstrap nav tree

Create MVC Project

Open Visual Studio 2017.

Angular

Go to New > New > Project. Now, it will open New Project window.

Angular

Select ASP.NET Web Application on Framework 4.5. Enter the name of the project in “Solution name” textbox and click OK button.

Angular

One more window should appear. Select MVC Template in this popup and click OK. Now, we can start the play.

Configure Angular bootstrap nav tree

You can download the plug-in from,

Open the _Layout.cshtml and must refer the .js files from downloaded folder to view this page.

  1. <script src="~/Plugin/angular/angular.min.js"></script>  
  2. <script src="~/Plugin/angular-bootstrap-nav-tree/dist/abn_tree_directive.js"></script>  
  3. <script src="~/Plugin/angular-ui-router/release/angular-ui-router.min.js"></script>  
  4. <link href="~/Plugin/angular-bootstrap-nav-tree/dist/abn_tree.css" rel="stylesheet" />   

Link your Angular configurable file.

  1. <script src="~/App/App.module.js"></script>  
  2. <script src="~/App/App.config.js"></script>  
  3. <script src="~/App/NTController.js"></script>   

Angular Module

You need to include the module as a dependency on your application. 

  1. var uiroute = angular  
  2. .module('uiroute', ['ui.router','angularBootstrapNavTree']);   

If you have any doubts about configuration, visit the following articles.

Work in Angular bootstrap nav tree

This tree control will work when you use the <abn-tree > directive as HTML attribute. 

  1. <abn-tree tree-data="my_data"   
  2.                           tree-control="my_tree"   
  3.                           on-select="my_tree_handler(branch)"  
  4.                           expand-level="2"   
  5.                           initial-selection="Granny Smith">  
  6.   
  7.                 </abn-tree>   

Html Code 

  1. <div ng-controller="NTreeController">  
  2.     <div class="alert alert-info">{{ output }}</div>  
  3.     <div class="row">  
  4.         <div class="col-lg-3 col-sm-6 col-lg-push-3 col-sm-push-6">  
  5.             <div class="well wd-wide">  
  6.                  
  7.                 <abn-tree tree-data="my_data"   
  8.                           tree-control="my_tree"   
  9.                           on-select="my_tree_handler(branch)"  
  10.                           expand-level="2"   
  11.                           initial-selection="Granny Smith">  
  12.   
  13.                 </abn-tree>  
  14.             </div>  
  15.         </div>  
  16.         <div class="col-lg-3 col-sm-6 col-lg-pull-3 col-sm-pull-6">  
  17.             <button ng-click="try_changing_the_tree_data()" class="btn btn-block btn-default btn-sm">Toggle Tree Data</button>  
  18.             <hr />  
  19.             <h5>Tree Control API:</h5>  
  20.             <br />  
  21.             <div class="btn-group btn-group-justified mb">  
  22.                 <a ng-click="my_tree.select_first_branch()" class="btn btn-default btn-sm mb">First Branch</a>  
  23.                 <a ng-click="try_adding_a_branch()" class="btn btn-default btn-sm">Add Branch</a>  
  24.             </div>  
  25.             <div class="btn-group btn-group-justified mb">  
  26.                 <a ng-click="my_tree.select_next_sibling()" class="btn btn-default btn-sm">Next Sibling</a>  
  27.                 <a ng-click="my_tree.select_prev_sibling()" class="btn btn-default btn-sm">Prev Sibling</a>  
  28.             </div>  
  29.             <div class="btn-group btn-group-justified mb">  
  30.                 <a ng-click="my_tree.select_next_branch()" class="btn btn-default btn-sm">Next Branch</a>  
  31.                 <a ng-click="my_tree.select_prev_branch()" class="btn btn-default btn-sm">Prev Branch</a>  
  32.             </div>  
  33.             <div class="btn-group btn-group-justified mb">  
  34.                 <a ng-click="my_tree.expand_branch()" class="btn btn-default btn-sm">Expand</a>  
  35.                 <a ng-click="my_tree.select_parent_branch()" class="btn btn-default btn-sm mb">Parent</a>  
  36.             </div>  
  37.             <div class="btn-group btn-group-justified mb">  
  38.                 <a ng-click="my_tree.expand_all()" class="btn btn-default btn-sm">Expand All</a>  
  39.                 <a ng-click="my_tree.collapse_all()" class="btn btn-default btn-sm">Collapse All</a>  
  40.             </div>  
  41.         </div>  
  42.     </div>  
  43. </div>   

Angular Controller 

  1. var treedata_geography = [  
  2.             {  
  3.                 label: 'North America',  
  4.                 children: [  
  5.                     {  
  6.                         label: 'Canada',  
  7.                         children: ['Toronto''Vancouver']  
  8.                     }, {  
  9.                         label: 'USA',  
  10.                         children: ['New York''Los Angeles']  
  11.                     }, {  
  12.                         label: 'Mexico',  
  13.                         children: ['Mexico City''Guadalajara']  
  14.                     }  
  15.                 ]  
  16.             }, {  
  17.                 label: 'South America',  
  18.                 children: [  
  19.                     {  
  20.                         label: 'Venezuela',  
  21.                         children: ['Caracas''Maracaibo']  
  22.                     }, {  
  23.                         label: 'Brazil',  
  24.                         children: ['Sao Paulo''Rio de Janeiro']  
  25.                     }, {  
  26.                         label: 'Argentina',  
  27.                         children: ['Buenos Aires''Cordoba']  
  28.                     }  
  29.                 ]  
  30.             }  
  31.         ];   

Click F5 button to Run the application. Now, it will open the browser where you can see the result. It will load geographic data and on-select change, shows the selected result on top of the page.

Output 1

Angular

Angular Controller

  1. var treedata_avm = [  
  2.           {  
  3.               label: 'Animal',  
  4.               children: [  
  5.                   {  
  6.                       label: 'Dog',  
  7.                       data: {  
  8.                           description: 'man\'s best friend'  
  9.                       }  
  10.                   }, {  
  11.                       label: 'Cat',  
  12.                       data: {  
  13.                           description: 'Felis catus'  
  14.                       }  
  15.                   }, {  
  16.                       label: 'Hippopotamus',  
  17.                       data: {  
  18.                           description: 'hungry, hungry'  
  19.                       }  
  20.                   }, {  
  21.                       label: 'Chicken',  
  22.                       children: ['White Leghorn''Rhode Island Red''Jersey Giant']  
  23.                   }  
  24.               ]  
  25.           }, {  
  26.               label: 'Vegetable',  
  27.               data: {  
  28.                   definition: 'A plant or part of a plant used as food, typically as accompaniment to meat or fish, such as a cabbage, potato, carrot, or bean.',  
  29.                   data_can_contain_anything: true  
  30.               },  
  31.               onSelect: function (branch) {  
  32.                   $scope.output = 'Vegetable: ' + branch.data.definition;  
  33.                   return $scope.output;  
  34.               },  
  35.               children: [  
  36.                   {  
  37.                       label: 'Oranges'  
  38.                   }, {  
  39.                       label: 'Apples',  
  40.                       children: [  
  41.                           {  
  42.                               label: 'Granny Smith',  
  43.                               onSelect: apple_selected  
  44.                           }, {  
  45.                               label: 'Red Delicous',  
  46.                               onSelect: apple_selected  
  47.                           }, {  
  48.                               label: 'Fuji',  
  49.                               onSelect: apple_selected  
  50.                           }  
  51.                       ]  
  52.                   }  
  53.               ]  
  54.           }, {  
  55.               label: 'Mineral',  
  56.               children: [  
  57.                   {  
  58.                       label: 'Rock',  
  59.                       children: ['Igneous''Sedimentary''Metamorphic']  
  60.                   }, {  
  61.                       label: 'Metal',  
  62.                       children: ['Aluminum''Steel''Copper']  
  63.                   }, {  
  64.                       label: 'Plastic',  
  65.                       children: [  
  66.                           {  
  67.                               label: 'Thermoplastic',  
  68.                               children: ['polyethylene''polypropylene''polystyrene'' polyvinyl chloride']  
  69.                           }, {  
  70.                               label: 'Thermosetting Polymer',  
  71.                               children: ['polyester''polyurethane''vulcanized rubber''bakelite''urea-formaldehyde']  
  72.                           }  
  73.                       ]  
  74.                   }  
  75.               ]  
  76.           }  
  77.       ];  
  78.   
  79. cope.try_changing_the_tree_data = function () {  
  80.           if ($scope.my_data === treedata_avm) {  
  81.               $scope.my_data = treedata_geography;  
  82.           } else {  
  83.               $scope.my_data = treedata_avm;  
  84.           }  
  85.           return $scope.my_data;  
  86.       };  

 You can load the data dynamically in nev tree. When you click on toggle tree data, it shows the description of label.

Output 2

Angular
Angular

Angular Controller
 

  1. $scope.try_adding_a_branch = function () {  
  2.             var b;  
  3.             b = tree.get_selected_branch();  
  4.             return tree.add_branch(b, {  
  5.                 label: 'New Branch',  
  6.                 data: {  
  7.                     something: 42,  
  8.                     'else': 43  
  9.                 }  
  10.             });  
  11.         };   

You can add the new branch on that tree in any of the nodes.

Output 3

Angular

Note

Other events are already predefined.

Conclusion

In this article, we have learned creating MVC application using Angular Bootstrap nav tree. If you have any queries, please tell me via comments section. Your comments are very valuable.

Happy Coding!