AngularJS控制器不工作，为什么?(简单的控制器示例）

AngularJS controller does not work, why? (simple controller example)

本文关键字：控制器 简单 工作 为什么 AngularJS      更新时间：2023-09-26

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

该网页： 

<!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 中的示例：代码示例

我认为

这是一种不好的做法

您最好使用：

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>

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

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

这是Plunkr上的一个工作示例

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

在 myapp 中.js

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

在主控制器中.js(它不应该被称为测试.js(

yourApp.controller('MainController',['$scope',function($scope){
    $scope.message = "Hello world";
}]);

在您的索引中.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>

将脚本.js更改为

var app=angular.module('myapp',[]);
app.controller('MainContrl', ['$scope', function($scope){
  $scope.message = "Hello friend";
}]);
并在HTML页面中将ng-app

放在正文标签中，并从HTML中删除ng-app

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

首先在 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);

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

相关文章：