Angularjs 无法进入控制器

Question

我似乎遇到了 Angularjs 使用 '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>

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

Answer 1

试试这个

这只是一个拼写错误，您为仪表板输入了 contoller 而不是 controller

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) {

});

Answer 2

您的配置中控制器拼写错误。此外，正如 Nidhish 指出的那样，您可以链接您的配置，因为 when 再次调用 returns 路由提供者。

所以你的（固定）代码是

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" });
});

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

Angularjs 无法进入控制器

Angularjs failing to enter a controller

html

javascript

mvvm

angularjs