Question

我习惯用Java编写带有对象范例的许多文件和带有包的MVC模式。

我从AngularJS开始，我正在尝试启用一个简单的index.html，它在javascript文件中使用控制器但不起作用。

我的html文件：index.html

<html ng-app="carre">
<head>
    <script src="js/angular.js"></script>
    <script src="js/CalculCtrl.js"></script>
    <script>
        var ctrl = angular.module('carre',[]); 
    </script>
</head>
<body ng-controller="CalculCtrl">
    <div>{{2+2}}</div>
    <p>{{temps}}</p>
</body></html>

我的javascript文件作为控制器位于js / CalculCtrl.js

carre.controller('CalculCtrl', function($scope)
        {
             $scope.temps = 'pluie';
            }
 )

请问有什么问题？提前谢谢。

Answer 1

将carre.controller（...）重命名为ctrl.controller

Ctrl是包含对模块的引用的变量的名称，carre是您在ng-app指令中为其提供的名称。

编辑：另外，我建议您获取Chrome的Batarang扩展程序，它会在开发人员工具中添加一个页面来调试Angular应用程序。非常有用的工具。

Answer 2

您应该反转文件包含和模块声明：

<html ng-app="carre">
<head>
    <script src="js/angular.js"></script>
    <script>
        var carre = angular.module('carre',[]); 
    </script>
    <script src="js/CalculCtrl.js"></script>

</head>

另外，因为您在carre内使用了名为CalculCtrl.js的变量，所以您应该在创建模块时重命名变量分配，从ctrl到carre：

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

Answer 3

你已经创建了模块ctrl并使用carre来引用它。脚本序列错误。正确的答案是

的index.html

<html>
enter code here<html ng-app="carre">
<head>
    <script src="js/angular.js"></script>

    <script>
        var carre = angular.module('carre',[]); 
    </script>
    <script src="js/CalculCtrl.js"></script>
</head>
<body ng-controller="CalculCtrl">
    <div>{{2+2}}</div>
    <p>{{temps}}</p>
</body></html>

CalculCtrl.js

carre.controller('CalculCtrl', function($scope)
        {
             $scope.temps = 'pluie';
        }
);

Answer 4

作为其他答案的替代方案，您可以在其自己的模块中创建CalculCtrl，然后在声明carre时依赖于该模块。

angular.module('Calcul', [])
.controller('CalculCtrl', function($scope)
    {
         $scope.temps = 'pluie';
    }
);

然后是carre

angular.module('carre', ['Calcul']);

通过这种方式，您无需重新订购脚本标记

Answer 5

答案是here

的index.html

<html ng-app="AppliName">
    <head>
     <--! we load angularjs -->
      <script src="js/angular.js"></script>
     <--! we load our controller in an other javascript file -->
      <script src="js/mesControllers.js"></script>
    </head>

    <body ng-controller="myCtrl">
      <p>time is : {{temps}} </p>
    </body>
</html>

mesControllers.js位于js / mesControllers.js

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

AppliName.controller('myCtrl', function ($scope) {
  $scope.temps = 'pluie';
});

跑步并保持冷静现在正在工作; p

如何在Angularjs中的另一个文件中使用控制器

5 个答案: