Question

我是Angular的新手，所以如果术语不太正确，请向我好心。我正在尝试构建一个简单的网站，该网站目前包含3个页面，其中包含不同页面的控制器。

我有路由设置，我想在联系页面上使用控制器，但我一直收到此错误：

Argument 'js/controllers/contact/ContactController.js' is not a function, got undefined

我有一个app.js文件，如下所示：

angular.module('simpleApp', ['ngRoute'])
  .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home/index.html'
      })
      .when('/about', {
        templateUrl: 'views/about/index.html'
      })
      .when('/contact', {
        templateUrl: 'views/contact/index.html',
        controller: 'js/controllers/contact/ContactController.js',
        controllerAs: 'contactCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

这是我主要的index.html：

<body ng-app="simpleApp">
    <header>
      <div class="container">
        <div class="row">
          <div class="col-xs-6">
            <a href="/#/" class="logo">SimpleApp</a>
          </div>
          <nav class="main-menu" ng-controller="NavController as navCtrl">
            <ul class="list-unstyled list-inline">
              <li>
                <a href="/#/" class="main-menu__link" ng-class="{ 'main-menu__link--active': navCtrl.isActive('/')}">Home</a>
              </li>
              <li>
                <a href="/#/about" class="main-menu__link" ng-class="{ 'main-menu__link--active': navCtrl.isActive('/about')}">about</a>
              </li>
              <li>
                <a href="/#/contact" class="main-menu__link" ng-class="{ 'main-menu__link--active': navCtrl.isActive('/contact')}">Contact Us</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <main>
      <div ng-view></div>
    </main>
    <footer>
      footer
    </footer>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-route.min.js"></script>

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/controllers/shared/NavController.js"></script>
    <script type="text/javascript" src="js/controllers/contact/ContactController.js"></script>
  </body>

我不知道该怎么做才能解决这个问题或者我做错了什么。

非常感谢您的帮助

Answer 1

一切看起来都对我而且尝试更换路线中的控制器从这个：

controller: 'js/controllers/contact/ContactController.js',

到此：

 controller: 'ContactController',

Answer 2

在路径文件中，在控制器部分下，您不必提供js引用，只需要输入控制器名称。

因为一旦应用程序初始化，angular知道它的所有控制器名称。所以你不必在任何地方进一步提供参考。始终提供启动文件的相关参考。

Answer 3

不使用控制器文件的路径。只需使用Controller的名称。比如你的控制器文件 - ＆gt; JS /控制器/接触/ ContactController.js

app.controller("ContactController", contactControllerFun);
contactControllerFun.$inject = ['$scope',....];
function contactControllerFun($scope, ....)
{
   //your controller code.....
}

装置不是控制器：＆＃39; js / controllers / contact / ContactController.js＆＃39;，使用＆＃34; 控制器：＆＃39; ContactController＆＃39; ＆＃34;

Answer 4

我认为您的控制器名称为NavController所以请您改变路线配置，如下所示：

.when('/contact', {
        templateUrl: 'views/contact/index.html',
        controller: 'NavController',
        controllerAs: 'contactCtrl'
      })

因为控制器参数接受控制器的名称而不是文件的路径。

如何在路由配置中使用控制器作为模板？

4 个答案: