当控制器在单独的文件中时应用程序不加载

Question

这是对我的问题的补充：

正如我在最终编辑中所说：

I have resolved this by placing controller in the same file where app is defined - app.js. When placed in separate folder it is not working. I do not know why at this point.

但这是为什么呢？我已经尝试了几次，当控制器位于单独的文件中时，应用程序无法加载 - js/controller.js。而且我已经检查过路径，是正确的。

这是应用程序：

这是我的 HTML:

<body data-ng-app="App">
*
*
*

<div ng-controller="Ctrl">
     <p>{{obj.desc}}</p>
</div>

*
*
*
</body>

app.js

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

controller.js

app.controller('Ctrl', function($scope) {
    $scope.obj = [
          {
                intro: "intromessage",
                desc: "desc"
          },
          {
                intro: "intromessage2",
                desc: "desc"
          }
       ];
   });

Answer 1

假设 controller.js 已正确加载。您需要在新文件中定义 var app：

var app = angular.module('App'); //Continue your app module
app.controller('Ctrl', function($scope) {
    $scope.obj = [
          {
                intro: "intromessage",
                desc: "desc"
          },
          {
                intro: "intromessage2",
                desc: "desc"
          }
       ];
   });

Answer 2

你可以轻松解决这个问题。你必须在你的 js 文件中做一些小的修改。

app.js

var app = angular.module('App', []);
app.controller('Ctrl',homeController);

controller.js

var homeController = function($scope) {
$scope.obj = [
      {
            intro: "intromessage",
            desc: "desc"
      },
      {
            intro: "intromessage2",
            desc: "desc"
      }
   ];
   }

这对你有用。确保在您的布局页面中，您在应用程序 js

之前包含控制器 js

示例：

<script src="~\controller.js"></script> <!--first-->
<script src="~\App.js"></script> <!--second-->

当控制器在单独的文件中时应用程序不加载

App Doesn't Load When Controller is in Separate File

javascript

jquery

html

angularjs

angular-controller