angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) .controller('AppCtrl', function ($scope, $mdSidenav) { $scope.toggleLeft = buildToggler('left'); function buildToggler(componentId) { return function() { $mdSidenav(componentId).toggle(); }; } }); 
 <html lang="en" > <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Angular Material style sheet --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css"> </head> <body ng-cloak> <!-- Your HTML content here --> <div ng-controller="AppCtrl" layout="column" style="height: 500px;" ng-cloak="" class="sidenavdemoCustomSidenav" ng-app="MyApp"> <section layout="row" flex=""> <md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop="" md-whiteframe="4"> <md-toolbar class="md-theme-indigo"> <h1 class="md-toolbar-tools">Disabled Backdrop</h1> </md-toolbar> <md-content layout-margin=""> <p> This sidenav is not showing any backdrop, where users can click on it, to close the sidenav. </p> <md-button ng-click="toggleLeft()" class="md-accent"> Close this Sidenav </md-button> </md-content> </md-sidenav> <md-content flex="" layout-padding=""> <div layout="column" layout-align="top center"> <p> Developers can also disable the backdrop of the sidenav.<br> This will disable the functionality to click outside to close the sidenav. </p> <div> <md-button ng-click="toggleLeft()" class="md-raised"> Toggle Sidenav </md-button> </div> </div> </md-content> </section> </div> <!-- Copyright 2016 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. --> <!-- Angular Material requires Angular.js Libraries --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script> <!-- Angular Material Library --> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script> <!-- Your application bootstrap --> </body> </html>

writes error Error: [$ controller: ctrlreg] http://errors.angularjs.org/1.6.9/ $ controller / ctrlreg? p0 = AppCtrl I can not understand what the problem is

  • I suspect that it is impossible to do an app in the app, it is looking for a controller in BlankApp , and does not find it - Artem Gorlachev
  • @ArtemGorlachev and how correctly - Vadim
  • Clean BlankApp everywhere) - Artem Gorlachev
  • @ArtemGorlachev removed such a mistake then - Vadim
  • angular.js: 88 Uncaught Error: [$ injector: modulerr] errors.angularjs.org/1.6.9/$ - Vadim

1 answer 1

material.svgAssetsCache not connected (it may not need to be connected at all):

 angular.module('MyApp', ['ngMaterial', 'ngMessages']) .controller('AppCtrl', function($scope, $mdSidenav) { $scope.toggleLeft = buildToggler('left'); function buildToggler(componentId) { return function() { $mdSidenav(componentId).toggle(); }; } }); 
 <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Angular Material style sheet --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css"> </head> <body ng-cloak ng-app="MyApp"> <!-- Your HTML content here --> <div ng-controller="AppCtrl" layout="column" style="height: 500px;" ng-cloak="" class="sidenavdemoCustomSidenav"> <section layout="row" flex=""> <md-sidenav class="md-sidenav-left" md-component-id="left" md-disable-backdrop="" md-whiteframe="4"> <md-toolbar class="md-theme-indigo"> <h1 class="md-toolbar-tools">Disabled Backdrop</h1> </md-toolbar> <md-content layout-margin=""> <p> This sidenav is not showing any backdrop, where users can click on it, to close the sidenav. </p> <md-button ng-click="toggleLeft()" class="md-accent"> Close this Sidenav </md-button> </md-content> </md-sidenav> <md-content flex="" layout-padding=""> <div layout="column" layout-align="top center"> <p> Developers can also disable the backdrop of the sidenav.<br> This will disable the functionality to click outside to close the sidenav. </p> <div> <md-button ng-click="toggleLeft()" class="md-raised"> Toggle Sidenav </md-button> </div> </div> </md-content> </section> </div> <!-- Copyright 2016 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. --> <!-- Angular Material requires Angular.js Libraries --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script> <!-- Angular Material Library --> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script> <!-- Your application bootstrap --> </body> </html>