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

【问题标题】：Cannot route to controller when using ngMaterial使用 ngMaterial 时无法路由到控制器
【发布时间】：2017-08-27 11:19:14
【问题描述】：

我收到此错误：

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

使用我的代码。这表示我的依赖关系可能没有正确定义或拼写。但我相信这是别的东西，我不明白！？所以有人可以帮助我。我正在尝试学习Angular Material。我以前以这种方式完成了路由，如果我不使用 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) {


  }
]);

【问题讨论】：

我使用 camecase 作为控制器名称。这与角度无关。 *如果其他人碰巧遇到这个问题并遇到同样的问题

标签： angularjs controller routing angular-material

【解决方案1】：

我的几乎一样，但对我来说效果很好，我看到的唯一区别是您使用的是“！”在你的href中，其余的对我来说看起来很好......

【讨论】：