Angular UI 路由错误：“Error: [ng:areq] Argument 'myCtrl' is not a function”-JavaScript中文网-JavaScript教程资源分享门户

在使用 Angular UI 路由时，有时会遇到如下错误提示：“Error: [ng:areq] Argument 'myCtrl' is not a function”，这个错误提示一般是由于控制器（Controller）没有正确定义或者没有正确引用导致的。

错误原因

在 Angular 中，控制器是一个函数，用于处理视图和模型之间的交互，控制器的定义方式有两种，一种是使用全局函数的方式定义，例如：

function myCtrl($scope) {
  $scope.message = "Hello World!";
}

另一种方式是使用模块（Module）的方式定义，例如：

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
  $scope.message = "Hello World!";
});

在使用 Angular UI 路由时，如果控制器没有正确定义或者没有正确引用，就会出现“Error: [ng:areq] Argument 'myCtrl' is not a function”的错误提示。

解决方法

解决这个错误的方法很简单，只需要检查控制器的定义和引用是否正确即可。

1. 控制器定义方式

如果是使用全局函数的方式定义控制器，需要确保函数名和控制器名一致，例如：

function myCtrl($scope) {
  $scope.message = "Hello World!";
}

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", myCtrl);

如果是使用模块的方式定义控制器，需要确保控制器的名称和模块名称一致，例如：

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
  $scope.message = "Hello World!";
});

2. 控制器引用方式

在路由配置中，需要确保控制器的名称和定义时一致，例如：

// www.javascriptcn.com code example
var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'myCtrl' // 控制器名称
    });

  $urlRouterProvider.otherwise('/home');

});

myApp.controller("myCtrl", function($scope) {
  $scope.message = "Hello World!";
});

指导意义

在使用 Angular UI 路由时，遇到“Error: [ng:areq] Argument 'myCtrl' is not a function”的错误提示，一定要仔细检查控制器的定义和引用是否正确，遵循控制器命名规范，这样可以避免出现这种错误，提高开发效率。

示例代码

以下是一个完整的示例代码，用于演示如何使用 Angular UI 路由：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="UTF-8">
  <title>Angular UI Router</title>
  <script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script>
  <script src="https://cdn.bootcss.com/angular-ui-router/1.0.28/angular-ui-router.min.js"></script>
</head>

<body>
  <h1>Angular UI Router</h1>
  <ul>
    <li><a ui-sref="home">Home</a></li>
    <li><a ui-sref="about">About</a></li>
  </ul>
  <div ui-view></div>
  <script>
    var myApp = angular.module("myApp", ['ui.router']);

    myApp.config(function($stateProvider, $urlRouterProvider) {

      $stateProvider

        .state('home', {
          url: '/home',
          templateUrl: 'home.html',
          controller: 'myCtrl'
        })

        .state('about', {
          url: '/about',
          templateUrl: 'about.html',
          controller: 'myCtrl'
        });

      $urlRouterProvider.otherwise('/home');

    });

    myApp.controller("myCtrl", function($scope) {
      $scope.message = "Hello World!";
    });
  </script>
</body>

</html>

其中，home.html 和 about.html 分别是两个视图文件，用于演示路由的切换效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d8fceda941bf7134064db4

Angular UI 路由错误：“Error: [ng:areq] Argument 'myCtrl' is not a function”