This repository contains tutorial about how to use angular-ui-tree in your project.
Steps to include angular-ui-tree in your project.
- First follow steps included in Official Guide to download all dependencies. Mainly you have to run
npm install
andbower install
in command prompt / terminal while you are present in your project directory i.e. where you have downloaded angular-ui-tree where bower.json and package.json files are present. - Copy [source](https://github.com/angular-ui-tree/angular-ui-tree/tree/master/source) folder from angular-ui-tree module in your project's plugin directory.
Note: All prerequisite files will be kept in one folder in plugin folder so that they can be used again somewhere else. - Copy `angular-ui-tree.js` from dist folder
- Include source scripts in your page as done in index.html page in src folder
- Then include
script type="text/ng-template">
from any example in Official Guide (if you want to play with examples). - Then give a div an attribute
ui-tree
- Inside above div create an ordered list with attribute
ui-tree-nodes="" ng-model="data"
wheredata
is the name of an array of JSON objects present in current scope which depicts hierarchy. - Then use
ng-repeat
for elements of ordered list and also give themui-tree-node
attribute.
For example :
<div ui-tree id="tree-root"> <ol ui-tree-nodes="" ng-model="data"> <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li> </ol> </div>
- That's it for your html page. Now you have to initialize an array of JSON object in your current scope which stores hierarchy.(As shown in app.js file)
- 🎊 You have completed basic hierarchy using angular-ui-tree 😄