Angular.js 控制器不工作

Question

我是 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>

我做错了什么？

Answer 1

After angular version 1.3 global controller function declaration is disabled

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

您应该先定义 angular.module，然后向其中包含 angular 个组件

Demo

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

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

Answer 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">

Answer 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" 指令。

Answer 4

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

首先你应该在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

这些是一些很好的教程

Answer 5

<!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>

Angular.js 控制器不工作

Angular.js Controller Not Working

html

javascript

angularjs

angularjs-controller

angularjs-module