Question

我刚刚看了一个介绍AngularJS的视频，并使用以下示例

html：

<!DOCTYPE html>
<html ng-app>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>

<body ng-controller="MainContrl">

  <h2>{{message}}</h2>

 <script src="bower_components/angular/angular.min.js"></script>
 <script src="js/test.js"></script>
 </body>
</html>

js：

 var MainContrl = function($scope){
   $scope.message = "Hello friend";
 };

在示例中，我看到这个结构有效，但是当我测试它时不起作用。控制台给了我这个错误：

 Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MainContrl&p1=not%20a%20function%2C%20got%20undefined

可以用这种方式控制器吗？或者这是一种不好的做法

Plunker中的示例： Code example

Answer 1

我认为，这是一种不好的做法

你最好使用：

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

myApp.controller('MainContrl', ['$scope', function ($scope) {
     // any code here
]);

并在HTML中使用它：

<html ng-app="myApp">
    <body ng-controller="MainContrl">
         // any code here
    </body>
</html>

Answer 2

您可能需要先定义角度应用程序：

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

myApp.controller('MainContrl', function ($scope) {
  $scope.message = "Hello friend";
});

这是一个working example on Plunkr

Answer 3

我认为你必须有一个主应用程序。

在 myapp.js

中

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

在 mainController.js （它不应该被称为test.js）

yourApp.controller('MainController',['$scope',function($scope){

    $scope.message = "Hello world";

}]);

在 index.html

中

<html ng-app="myApp">

   <body ng-controller="MainController">
      {{message}}
   </body>'
 <script src="bower_components/angular/angular.min.js"></script>
 <script src="js/myapp.js"></script>
 <script src="js/mainController.js"></script>
</html>

Answer 4

将您的script.js更改为

var app=angular.module('myapp',[]);

app.controller('MainContrl', ['$scope', function($scope){
  $scope.message = "Hello friend";
}]);

并在html页面中将ng-app放入body标签并从html中删除ng-app

 <body ng-app="myapp" ng-controller="MainContrl">

Answer 5

首先在你的html中声明你的应用程序：

<html ng-app="myApp">

其次在你的js中定义你的应用程序：

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

然后在任何js文件中定义任何控制器（最佳实践是每个控制器都有自己的文件）：

var MainContrl = function($scope){
   $scope.message = "Hello friend";
 };

然后在你的html中声明你的控制器和变量：

<body ng-controller="MainContrl">
  <h2>{{message}}</h2>
 </body>

不要忘记将控制器与您的应用绑定：

app.controller('MainContrl',MainContrl);

我也可以看到你正在使用凉亭，所以我建议你读一下： http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/

AngularJS控制器不起作用，为什么？（简单的控制器示例）

5 个答案:

AngularJS控制器不起作用，为什么？ （简单的控制器示例）

5 个答案:

AngularJS控制器不起作用，为什么？（简单的控制器示例）