Angularjs无法进入控制器答案

【问题标题】：Angularjs failing to enter a controllerAngularjs无法进入控制器
【发布时间】：2015-06-18 21:21:55
【问题描述】：

我似乎在使用 'NgRoute' 导航到页面时遇到问题。我还有其他 3 个带有控制器的页面，它们工作得非常好，但是当尝试进入仪表板页面时，它只加载视图而不加载控制器。

AngularJS 应用程序

var app = angular.module('app', ['ngRoute']);

app.config(function ($routeProvider) {

    $routeProvider.when("/dashboard", {
        contoller: "dashboardController",
        templateUrl: "/app/views/dashboard.html",
    })

    $routeProvider.when("/machines", {
        controller: "machineController",
        templateUrl: "/app/views/machines.html",
    })

    $routeProvider.when("/departments", {
        controller: "departmentController",
        templateUrl: "/app/views/departments.html",
    })

    $routeProvider.when("/users", {
        controller: "userController",
        templateUrl: "/app/views/users.html",
    });

    $routeProvider.otherwise({ redirectTo: "/dashboard" });
});

控制器

'use strict';
app.controller('dashboardController', ['$scope', '$http', 'Page', function ($scope, $http, Page) {
    Page.setTitle('Dashboard');

}]);

HTML

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
        <!-- Angular Js -->
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.min.js"></script>

        <!-- Application -->
        <script src="app/app.js"></script>

        <!-- Controllers -->
        <script src="app/controllers/pageController.js"></script>
        <script src="app/controllers/dashboardController.js"></script>
        <script src="app/controllers/departmentController.js"></script>
        <script src="app/controllers/machineController.js"></script>
        <script src="app/controllers/userController.js"></script>
</head>

当我调试控制器时，它不会超过第二行控制器的实例化。有人有什么想法吗？

【问题讨论】：

你在哪里声明dashboardController？
在我的索引页的头部
您可以发布您遇到的错误吗？我的直觉告诉我“使用严格”；与对 app.controller 的引用冲突。我假设您的控制器位于单独的 .js 文件中（基于您的 sn-ps），在这种情况下“使用严格”；可能吓坏了，因为它不知道什么是应用程序。（即错误的形式是“无法调用未定义的方法'控制器'”）

标签： javascript angularjs html mvvm

【解决方案1】：

试试这个

这只是一个拼写错误，而不是controller，您将contoller 用于仪表板

Working Demo

 // create the module and name it app

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {

  $routeProvider.when("/dashboard", {
    contoller: "dashboardController",
    templateUrl: "app/views/dashboard.html",
  })

  .when("/machines", {
    controller: "machineController",
    templateUrl: "app/views/machines.html",
  })

  .when("/departments", {
    controller: "departmentController",
    templateUrl: "app/views/departments.html",
  })

  .when("/users", {
    controller: "userController",
    templateUrl: "app/views/users.html",
  })

  .otherwise({
    redirectTo: "/dashboard"
  });
});


 // create the controller and inject Angular's $scope
app.controller('mainController', function($scope) {

});

 // create the controller and inject Angular's $scope
app.controller('dashboardController', function($scope) {

});

 // create the controller and inject Angular's $scope
app.controller('machineController', function($scope) {

});

 // create the controller and inject Angular's $scope
app.controller('departmentController', function($scope) {

});

 // create the controller and inject Angular's $scope
app.controller('userController', function($scope) {

});

【讨论】：

不高兴，还是一样:(

【解决方案2】：

您在配置中拼错了控制器。此外，正如 Nidhish 指出的那样，您可以链接您的配置，因为 when 调用再次返回 routeprovider。

所以你的（固定）代码是

var app = angular.module('app', ['ngRoute']);

app.config(function ($routeProvider) {

    $routeProvider.when("/dashboard", {
        // you have missed an r in controller here
        controller: "dashboardController",
        templateUrl: "/app/views/dashboard.html",
    })

    $routeProvider.when("/machines", {
        controller: "machineController",
        templateUrl: "/app/views/machines.html",
    })

    $routeProvider.when("/departments", {
        controller: "departmentController",
        templateUrl: "/app/views/departments.html",
    })

    $routeProvider.when("/users", {
        controller: "userController",
        templateUrl: "/app/views/users.html",
    });

    $routeProvider.otherwise({ redirectTo: "/dashboard" });
});

可以改写成

var app = angular.module('app', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
      .when("/dashboard", { controller: "dashboardController", templateUrl: "/app/views/dashboard.html" })
      .when("/machines", { controller: "machineController", templateUrl: "/app/views/machines.html" })
      .when("/departments", { controller: "departmentController", templateUrl: "/app/views/departments.html" })
      .when("/users", { controller: "userController", templateUrl: "/app/views/users.html" })
      .otherwise({ redirectTo: "/dashboard" });
});

当然这只是个人喜好，也是一样的

【讨论】：

天哪，我以为我会像那样检查所有内容。谢谢你:)
r 这个词隐藏得很仔细：D