Angular工作不正常

Angular is not working properly?

本文关键字：不正常 工作 Angular      更新时间：2023-09-26

angular js即使在正确的代码之后也无法在我的浏览器中工作

我的代码`

  <body ng-app>
  <div ng-controller="MainController">
    <h4>{{val}}</h4>
  </div>

<script>
var MainController = function($scope){
    $scope.val = "Testing angular";
};

</script>
`

我的浏览器中显示的错误是：angular.js:13708 Error: [ng:areq] Argument 'MainController' is not a function, got undefined

您必须首先实例化模块：

angular
  .module('app', [])
  .controller('MainController', MainController);
MainController.$inject = ['$scope'];
function MainController($scope){
    $scope.val = "Testing angular";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="MainController">
    <h4 ng-bind="val"></h4>
  </div>
</body>

https://docs.angularjs.org/guide/migration#migrating-从-1-2到1-3

Angular从1.3开始停止在窗口对象上寻找控制器：

不起作用：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<body ng-app>
  <div ng-controller="MainController">
    <h4>{{val}}</h4>
  </div>
<script>
var MainController = function($scope){
    $scope.val = "Testing angular";
};
</script>

作品：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.min.js"></script>
<body ng-app>
  <div ng-controller="MainController">
    <h4>{{val}}</h4>
  </div>
<script>
var MainController = function($scope){
    $scope.val = "Testing angular";
};
</script>

您需要告诉Angular它需要使用您正在创建的控制器。你可以通过使用明确地告诉它来做到这一点

angular.module('module-name',[/*any dependencies*/]).controller('controller-name', controllerFunction)

下面是一个可以嵌入并运行的示例(JSBin(：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-app="TestApp">
  <div ng-controller="MainController">
    <h4>{{val}}</h4>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script type="text/javascript">
  var MainController = function($scope){
    $scope.val = "Testing Angular";
  };
  angular.module("TestApp",[])
  .controller("MainController", MainController);
  </script>
</body>
</html>
相关文章：