AngularJS ui-router

by Shantanu Kulkarni

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
    <div ng-app="myApp" ng-controller="MainCtrl">
        <div ui-view></div>
    </div>

JavaScript

/* myApp module */
    var myApp = angular.module('myApp', ['ui.router'])
    .config(function ($stateProvider) {

        $stateProvider.state('A', {
            url: "/A",
            template: '<div id="chart"></div><a ui-sref="B">NEXT</a>',
            controller: function ($scope) {
            var chartSensorial = c3.generate({
              bindto: '#chart',
                data: {
                    columns: [
                        ['&nbsp;', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                    ],
                    type: 'bar',
                    labels:true
                },
                axis: {
                    rotated: true,
                    x: {
                        type: 'category',
                        categories: ['α A.N', 'NUC', 'LYS', 'PHE', 'LEU', 'ILE', 'CYS', 'MET', 'VAL', 'TYR', 'PRO', 'ALA', 'THR', 'ARG', 'HIS', 'GLY', 'SER', 'GLU', 'ASP'],
                    },
                    y:{
                      label:"Concentración"
                    }
                },
                transition: {
                   duration: 100
                }
            }); 

             setTimeout(function () {
                chartSensorial.load({
                columns: [
                        [5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5]
                    ]
                });
              },100)
            }
        }).state('B', {
            url: "/B",
            template: '<a ui-sref="A">BACK</a>',
            controller: function ($scope) {
                console.log("B");
            }
        });
    })

  .controller('MainCtrl', function ($scope, $state) {
   $state.go("A");
  });