0

I am trying to create an app using angularJs 1.5, currently trying to properly architect my app, so far its been very fun and interesting.

I have two components, one of them is for a "chart" and the other component is a "dashboard". The chart is suppose to be a part of the dashboard but I am not sure how to embed chart in such a way that the dashboard becomes resposible for loading the chart and its related files like template, controller, style sheets etc.

index.html

<html>

  <head>
    <style>
      td{
        border: 1px solid black;
      }
    </style>
  </head>  

  <body ng-app="hellosolarsystem">
    <a ui-sref="dashboardPage" ui-sref-active="active">Dashboard</a>
    <a ui-sref="about" ui-sref-active="active">About</a>
    <ui-view></ui-view>

    <script src="//npmcdn.com/angular@latest/angular.js"></script>
    <script src="//npmcdn.com/angular-ui-router@1.0.0-alpha.4/release/angular-ui-router.js"></script>

    <script src="hellosolarsystem.js"></script>
    <script src="components/about.js"></script>
    <script src="components/dashboardPage.js"></script>

  </body> 
</html>

hellosolarsystem.js

angular.module('hellosolarsystem', ['ui.router'])
.config(function($stateProvider) {
    // An array of state definitions
    var states = [{
            name: 'dashboardPage',
            url: '/dashboardPage',
            // Using component: instead of template:
            component: 'dashboardPage'
        },
        {
            name: 'about',
            url: '/about',
            component: 'about'
        }
    ]
    // Loop over the state definitions and register them
    states.forEach(function(state) {
        $stateProvider.state(state);
    });
});

components/mychart.js

angular.module('hellosolarsystem').component('mychart', {
     templateUrl: 'components/mychart.html',
})

components/mychart.html

<div>
  <h3> This is my chart component </h3>
</div>

components/dashboardPage.js

angular.module("hellosolarsystem")
.component("dashboardPage", {
    templateUrl: 'components/dashboardPage.html',
    bindings: {},
    controller: function($element){

    }
});

components/dashboardPage.html

<table style="width:100%">
  <tr>
    <td>
        <!-- this is where I will show my chart -->
        <mychart></mychart>
    </td>
  </tr>
  <tr>
    <td> Another chart component will be here </td>
  </tr>
</table>

Here is a sample plnkr made to demonstrate my problem https://plnkr.co/edit/alQtd5azr16hKbwwWoN5?p=preview

How do I get dashboard to load chart and its files ?

The expected outcome I am hoping for is

enter image description here

Flying Gambit
  • 1,238
  • 1
  • 15
  • 32
  • what are you trying to do? – Sangram Badi Nov 10 '16 at 11:33
  • @Sam Trying to make the dashboard responsible for loading the chart.js file instead of me having to specify them in the index.html file – Flying Gambit Nov 10 '16 at 11:37
  • I am trying to get dashboard to load the chart component so that the logical flow of data becomes easy to understand. – Flying Gambit Nov 10 '16 at 12:38
  • From what I know, you will always need to load your JS files in HTML. If you want your Dashboard to be responsible of loading the Chart, then put your chart script in your dashboard html. But you'd rather put it in your index.html ... Once both are loaded, use dependencies correctly and you should be good. –  Nov 10 '16 at 14:53
  • @trichetriche Thanks, I want to keep that as a last resort. Also I found some lead on the problem here http://stackoverflow.com/questions/20578731/how-to-lazy-load-non-angular-javascript-files-using-angularjs . – Flying Gambit Nov 11 '16 at 06:00
  • @trichetriche Do we also have to load css for individual components in the index.html file ? – Flying Gambit Nov 11 '16 at 06:25
  • Ok, found a way to load css files in templates https://github.com/castillo-io/angular-css. Its similar to `styleUlrs` in Angular 2 – Flying Gambit Nov 11 '16 at 08:38
  • @FlyingGambit The CSS needs to be imported in the `head` tag so yeah, I guess you will have to import them in your index.html file ... –  Nov 14 '16 at 08:38

0 Answers0