Modifying Material Angularjs Start creating new module / controller

Navigation
0

I got the code from Material Angularjs Start to see how it works, I removed the User controller and I'm trying to program my own Controller, but it's giving a bad error and the layout does not load, I'd like to know what I'm doing wrong, follow the codes:

index.html: 

<body ng-app="starterApp" layout="row" ng-controller="ChartController as chart" >
  <md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
    <md-toolbar class="md-whiteframe-z1">
      <h1>Gráficos</h1>
    </md-toolbar>
    <md-list>
      <md-list-item >
          <md-button >
            ///
          </md-button>
      </md-list-item>
    </md-list>
  </md-sidenav>
<div flex layout="column" tabIndex="-1" role="main" class="md-whiteframe-z2">
    <md-toolbar layout="row" class="md-whiteframe-z1">
      <md-button class="menu" aria-label="Show User List">
        <md-icon md-svg-icon="menu" ></md-icon>
      </md-button>
      <h1>Wolk</h1>
    </md-toolbar>

    <md-content flex id="content">
        <md-icon class="avatar"></md-icon>
        <h2>aa</h2>
        <p>bb</p>

        <md-button class="contact" aria-label="Contact User">
          <md-tooltip>Contact</md-tooltip>
          <md-icon md-svg-icon="share"></md-icon>
        </md-button>
      </md-content>

  </div>
<!-- All -->
<script type="text/javascript" src="./js/generated-all.js"></script>

<!--     <script src="./src/users/Users.js"></script>
<script src="./src/users/UserController.js"></script>
<script src="./src/users/UserService.js"></script> -->

<!-- 
<script src="./src/charts/Charts.js"></script>
<script src="./src/charts/ChartController.js"></script> 
-->

<script type="text/javascript">

      angular
          .module('starterApp', ['ngMaterial', 'charts'])
          .config(function($mdThemingProvider, $mdIconProvider){

              /* $mdIconProvider
                  .defaultIconSet("./assets/svg/avatars.svg", 128)
                  .icon("menu"       , "./assets/svg/menu.svg"        , 24)
                  .icon("share"      , "./assets/svg/share.svg"       , 24)
                  .icon("google_plus", "./assets/svg/google_plus.svg" , 512)
                  .icon("hangouts"   , "./assets/svg/hangouts.svg"    , 512)
                  .icon("twitter"    , "./assets/svg/twitter.svg"     , 512)
                  .icon("phone"      , "./assets/svg/phone.svg"       , 512); */

                  $mdThemingProvider.theme('default')
                      .primaryPalette('brown')
                      .accentPalette('red');

          });

</script>
</body>

Charts.js 

(function(){
  'use strict';

   // Prepare the 'charts' module for subsequent registration of controllers and delegates
    angular.module('charts', [ 'ngMaterial' ]);

})()

ChartController.js 

(function(){
    angular.module('charts')
    .controller('ChartController', ['$scope', function ($scope) {

    }]);
})();

And the error that appears is this:

  

Error: [$ injector: modulerr]    link $ injector / modulerr? p0 = starterApp & p1 =% 5B% 24injector% 3Amodulerr% 5D% 20http% 3A% 2F% 2Ferrors.angularjs.org% 2F1.3.15% 2F% 24injector% 2Fmodulerr% 3Fp0% 3Dcharts% 26p1% 3D% 255B% 2524injector% 253Anomod% 255D% 2520http% 253A% 252F% 252Ferrors.angularjs.org% 252F1.3.15% 252F 252F 25% 252Fnomod% 253Fp0% 253Dcharts% 252F% 252F% 253F% 253F% 253F% 253F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 253F% 252F% 253F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 253A459% 253A580% 252F% 252A% 252F% 252F% 253F% 253F% 253F% 253F% 253F% 252F% 252F% 252F% 252 Flocalhost% 253A8080% 252Farget% 252Fjs% 252Fgenerated-all.js% 253A473% 253A46% 250Ar% 2540http% 253A% 252F% 252Flocalhost% 253A8080% 252Ftarget% 252Fjs% 252Fgenerated-all.js% 253A445% 253A300% 250Ag% 2540http% 253A% 252F% 252Flocalhost% 253A8080% 252Farget% 252Fjs% 252Fgenerated-all.js% 253A472% 253A399% 250Ag% 252F% 253C% 2540http% 253A% 253A8080% 252Farget% 252Fjs% 252Fgenerated-all.js% 253A473% 253A63% 250Ar% 2540http% 253A% 252F% 252F% 252A% 252F% 252F% 252F% 252F% 253A445% 253A300% 252Flocalhost% 253A8080% 252Farget% 252Fjs% 252Fgenerated-all.js% 253A472% 253A399% 250Aab% 2540http% 253A% 252F% 252Flocalhost% 253A8080% 252Farget% 252Fjs% 252Fgenerated-all.js% 253A476% 253A135% 250Auc% 253A% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252% 252F% 252% 252% 2540http% 253A% 252F% 252Flot% 253A8080% 252Farget% 252Fs% 252Fgenerated-all.js% 253A455% 253A429% 253A688% 253A429% 250An.Callbacks% 252F % 252Fg% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252F% 252% 252F% 252F% 252F% all.js% 253A27030% 250A.ready% 253A% 252F% 253A% 252F% 252A% 252F% 252A% 252F% 252F% 252F% 252F% 252F% 252Fgenerated-all.js% 253A2% 253A29721% 2A% 2F% 3F% 3F% 2F% 3F% 3F% 3F% 40http% 3A% 2F% 2Flocalhost% 3A8080% 2Ftarget% 2Fjs% 2Fgenerated-all.js% 3A473% 3A320% 0Ar% 40http% 3A% 2F% 2Flocalhost% 3A8080% 2Ftarget% 2Fjs% 2Fgenerated-all.js% 3A445% 3A300% 0Ag% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F%% 2F% js% 3A473% 3A6345% 3A% 2F% 2Flocalhost% 3A8080% 2Ftarget% 2Fjs% 2Fjs% 2Fjs% nerated-all.js% 3A472% 3A399% 0Aab% 2F% 2Flocalhost% 3A8080% 2Farget% 2Fjs% 2Fgenerated-all.js% 3A476% 3A135% 0Auc% 2Fd% 40http% 3A% 2Farget% 2Fjs% 2Fgenerated-all.js% 3A455% 3A381% 0Auc% 40http% 3A% 2F% 2Flocalhost% 3A8080% 2Ftarget% 2Fjs% 2Fgenerated-all.js% 3A456% 3A179% 0AJd% 40http% 3A% 2F% 2Flocalhost% 3A8080% 2Farget% 2Fjs% 2Fgenerated-all.js% 3A455% 3A1% 0A% 40http% 3A% 2F% 2Flocalhost% 3A8080% 2Ftarget% 2Fjs% 2Fgenerated-all.js% 3A688% 3A429% 0An.Callbacks% 2Fj% 40http% 3A% 2F% 2Flocalhost% 3A8080% 2Ftarget% 2Fjs% 2Fgenerated-all.js% 3A2% 3A26920% 0An.Callbacks% 2Fk.fireWith% 40From% 3A% 2F% 2Flocalhost% 3A8080% 2Ftarget% 2Fjs% 2Fgenerated-all.js% 3A2% 3A27738% 0A.ready% 40Http% 3A% 2F% 2Flocalhost% 3A8080% 2Ftarget% 2Fjs% 2Fgenerated-all.js% 3A29530% 0AI% 40http% 3A% 2F% 2Flocalhost% 3A8080% 2Ftarget% 2Fjs% 2Fgenerated- all.js% 3A2% 3A29721% 0A

    
asked by anonymous 17.07.2015 / 21:48

1 answer

1

The line that loads chart.js and chartController.js is commented on 

<!-- 
 <script src="./src/charts/Charts.js"></script>
 <script src="./src/charts/ChartController.js"></script> 
-->

And soon there's a Javascript that tries to inject the chart module. 

<script type="text/javascript">

  angular
      .module('starterApp', ['ngMaterial', 'charts']) // <- Está tentando injetar o módulo
      .config(function($mdThemingProvider, $mdIconProvider){

          /* $mdIconProvider
              .defaultIconSet("./assets/svg/avatars.svg", 128)
              .icon("menu"       , "./assets/svg/menu.svg"        , 24)
              .icon("share"      , "./assets/svg/share.svg"       , 24)
              .icon("google_plus", "./assets/svg/google_plus.svg" , 512)
              .icon("hangouts"   , "./assets/svg/hangouts.svg"    , 512)
              .icon("twitter"    , "./assets/svg/twitter.svg"     , 512)
              .icon("phone"      , "./assets/svg/phone.svg"       , 512); */

              $mdThemingProvider.theme('default')
                  .primaryPalette('brown')
                  .accentPalette('red');

      });

</script>

Take the comment and try again.

    
17.07.2015 / 22:38
How to put an image on the site through link How to remove white space that appears only when I close the window [closed]