Angular.js 控制器不工作答案

【问题标题】：Angular.js Controller Not WorkingAngular.js 控制器不工作
【发布时间】：2015-12-06 05:22:05
【问题描述】：

我是 Angular 新手，我正在浏览 Angular 网站上的 Angular 简介视频。我的代码不工作，我不知道为什么不工作。我收到错误

Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined

这是我的代码。

<!DOCTYPE html>

<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script>
        function MainController($scope) {
            $scope.message = "Controller Example";
        }
    </script>
</body>
</html>

我做错了什么？

【问题讨论】：

标签： javascript html angularjs angularjs-controller angularjs-module

【解决方案1】：

Angular 1.3 版全局控制器函数声明被禁用后

您需要使用模块化方法才能使其工作。

您应该先定义 angular.module，然后在其中包含角度组件

Demo

angular.module('app', [])
    .controller('MainController', function ($scope) {
        $scope.message = "Controller Example";
    })

然后更改ng-app 以使用该模块ng-app="app"

【讨论】：

这是有道理的。我相信 Angular 简介视频适用于 1.3 版。这些视频真的应该更新了。

【解决方案2】：

仅仅定义函数不会是控制器。你需要这样使用：

var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
function MainController($scope) {
    $scope.message = "Controller Example";
}

并确保在您的 html 中使用 myApp，如下所示：

<html lang="en" ng-app="myApp">

【讨论】：

哇，我们甚至选择了相同的变量名
@DavidL 你在说哪个参数？
@BhojendraNepal 你应该先添加控制器名称..然后第二个参数是函数
@BhojendraNepal 看看你自己。 Demo
@Tushar 我不明白。

【解决方案3】：

function MainController($scope) {
  $scope.message = "Controller Example";
}

应该更像

var app = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
  $scope.message = "Controller Example";
}

然后在您的 html 中包含 ng-app="myApp" 指令。

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html lang="en" ng-app="app">

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Angular Demo</title>
   <script  src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

   <script>

    var app = angular.module("app",[])
    .controller('mainController', function($scope) {
      var vm = this;  
      vm.message = "Controller Example";
    })

    </script>
  </head>

  <body ng-controller="mainController as vm">
    <div >
      <p>{{vm.message}}</p>
    </div>
  </body>

</html>

【讨论】：

【解决方案5】：

这不是您应该创建控制器的方式...

首先你应该在java脚本中创建模块和控制器

// start angular module (app) definition
angular.module('myApp',[''])
 .controller('MainController', function($scope) {
 $scope.message = "Controller Example";
 });

现在在您的 HTML 中

<!DOCTYPE html>

<html lang="en" ng-app='myApp'>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Angular Demo</title>
</head>
<body>
    <main ng-controller="MainController">
        <p>{{message}}</p>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>

现在它将开始工作

我建议你先看一些教程

http://campus.codeschool.com/courses/shaping-up-with-angular-js/

https://docs.angularjs.org/tutorial

这些是一些很好的教程

【讨论】：