Modifying Material Angularjs Start by creating new module/controller

Asked

Viewed 66 times

0

I took the code of Material Angularjs Start to see how it works, I removed the User controller and I am trying to program my own Controller, but this giving a huge error and the layout does not load, I would like to know what I am 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 comes up is this:

Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr? P0=starterApp&p 1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Fmodulerr%3Fp0%3Dcharts%26p1%3D%255B%2524injector%253Anomod%2520http%253A%252F%252Ferrors.angularjs.org%252F1.3.15%252F%2524injector%252Fnomod%253Fp0%253Dcharts%250AR%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A444%253A417%250AOd%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A459%253A412%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A459%253A53%250AOd%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A459%253A1%250Ag%252F%253C%2540http%253A%252Flocalhost%253A8080%252target%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%252Ftarget%252Fjs%252Fgenerated-all.js%253A472%253A399%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A473%253A63%250Ar%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgeneratedall.js%253A445%253A300%250Ag%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A472%253A399%250Aab%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A476%253A135%250Auc%252Fd%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A455%253A381%250Auc%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgeneratedall.js%253A456%253A179%250AJd%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A455%253A1%250A%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A688%253A429%250An.Callbacks%252Fj%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A2%253A26920%250An.Callbacks%252Fk.fireWith%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A2%253A27738%250A.ready%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgenerated-all.js%253A2%253A29530%250AI%2540http%253A%252F%252Flocalhost%253A8080%252Ftarget%252Fjs%252Fgeneratedall.js%253A2%253A29721%250A%0AR%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Ftarget%2Fjs%2Fgenerated-all.js%3A444%3A417%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Ftarget%2Fjs%2Fgenerated-all.js%3A473%3A320%0Ar%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fjs%2Fgenerated-generated-all.js%3A445%3A300%0Ag%40http%3A%2F%2Flocalhost%3A8080%2Ftarget%2Fjs%2Fgenerated-all.js%3A472%3A399%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fjs%2Fgenerated-all.js%3A473%3Ar%40http%3A%2Flocalhost%3A8080%2Fjs%2Fjs%2FFgenerated-all.js%3A445%3A300%0Ag%40http%3A%2F%2Flocalhost%3A8080%2Ftarget%2Fjs%2Fgenerated-all.js%3A472%3A399%0Aab%40http%3A%2F%2Flocalhost%3A8080%2Ftarget%2Fjs%2Fgenerated-all.js%3A476%3A135%0Auc%2Fd%40http%3A%2Flocalhost%3A8080%2Fjs%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%2Ftarget%2Fjs%2Fgenerated-all.js%3A455%3A1%0A%40http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fjsall.js%3A688%3A429%0An.Callbacks%2Fj%40http%3A%2F%2Flocalhost%3A8080%2Ftarget%2Fjs%2Fjs%2Fgenerated-all.js%3A2%3A26920%0An.Callbacks%2Fk.fireWith%40http%3A%2F%2Flocal%3A8080%2Fhost%2Fjs%2Fjs%generated-all.js%3A2%3A27738%0A.ready%40http%3A%2F%2Flocalhost%3A8080%2Ftarget%2Fjs%2Fjs%2Fgenerated-allall.js%3A2%3A29530%0AI%40http%3A%2F%2Flocalhost%3A8080%2Ftarget%2Fjs%2Fgenerated-all.js%3A2%3A29721%0A

angularjs

1 answer

1


The line that loads Chart.js and chartController.js is commented

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

And then 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.

  • Afffff... the touchpad of my notebook is half loco and it made me keep pasting code without knowing it... all week this messing me up! Nice that you had someone else to help! Thank you very much!

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.