gaurishanker / angular-ui-tree

This repository contains tutorial about how to use angular ui tree in your project .

angular-ui-tree 🎉

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 and bower 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" where data is the name of an array of JSON objects present in current scope which depicts hierarchy.


• Then use ng-repeatfor elements of ordered list and also give them ui-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 😄