Question

我收到此错误：

Error: [$injector:unpr] Unknown provider: $stateProvider <- $state <- HomeController <- HomeController.

用我的代码。这说明我的依赖关系可能没有定义或拼写正确。但我相信这是别的，我不明白！？那么有人可以帮助我。我正在努力学习Angular Material。我以前用这种方式完成了路由并且它可以工作如果我没有使用Material。那么为什么材料搞砸了呢？

这是我到目前为止所做的：

的index.html：

<!DOCTYPE html>
<html lang="en" ng-app=ubeachPage>

<head>
  <title>UBeach</title>
  <link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
  <script src="node_modules/angular/angular.js" charset="utf-8"></script>
  <script src="node_modules/angular-route/angular-route.js"></script>
  <link rel="stylesheet" type="text/css" href="content/css/styles.css">

  <script src="node_modules/angular-material/angular-material.js"></script>
  <script src="node_modules/angular-aria/angular-aria.js"></script>
  <script src="node_modules/angular-animate/angular-animate.js"></script>
  <script src="client.js"></script>
</head>

<body>
  <script src="controllers\RegisterController.js"></script>
  <script src="controllers\HomeController.js"></script>
  <header ng-include="'header.html'"></header>
  <main ng-view></main>
</body>

</html>

client.js：

var ubeachPage = angular.module('ubeachPage', ['ngMaterial', 'ngRoute', 'ngAria']);

ubeachPage.config(['$routeProvider', '$mdThemingProvider', function($routeProvider, $mdThemingProvider) {

$mdThemingProvider.theme('altTheme')
    .primaryPalette('green')

$mdThemingProvider.theme('default')
    .primaryPalette('purple', {
        'default': '500',
        'hue-1': '100',
        'hue-2': '600',
        'hue-3': 'A100'
    })
    .accentPalette('green', {
        'default': '200'
    })
    .dark();

$routeProvider
    .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController'
    })
    .when('/register', {
        templateUrl: 'views/register.html',
        controller: 'RegisterController'
    })
    .when('/result', {
        templateUrl: 'views/result.html'
        //      controller: 'ResultController'
    })
    .otherwise({
        redirectTo: '/home'
    });
}]);

我使用带有页面按钮的工具栏的header.html文件。

header.html中：

<md-toolbar class="md-hue-2">
  <div class="md-toolbar-tools">
    <md-button class="md-icon-button" aria-label="Settings" ng-disabled="false">
        <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
    </md-button>

    <h2 flex md-truncate>UBeach</h2>

    <md-nav-bar md-selected-nav-item="currentNavItem">
        <md-nav-item md-nav-href="#!/home" name="page1">Home</md-nav-item>
        <md-nav-item md-nav-href="#!/register" name="page3">Register</md-nav-item>
        <md-nav-item md-nav-href="#!/result" name="page2">Scoreboard</md-nav-item>
    </md-nav-bar>

    <md-button class="md-icon-button" aria-label="Favorite">
        <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
    </md-button>

    <md-button class="md-icon-button" aria-label="More">
        <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
    </md-button>
  </div>
</md-toolbar>

HomeController中：

angular.module('ubeachPage').controller('HomeController', [
  '$scope',

  function($scope) {


  }
]);

Answer 1

我的情况几乎相同，但对我来说效果很好，我看到的唯一区别是你正在使用＆＃34;！＆＃34;在你的href中，对于其余的它看起来很好......

使用ngMaterial时无法路由到控制器

1 个答案: