消息文本未在AngularJS中显示

时间:2015-04-06 07:11:56

标签: asp.net angularjs

我正在使用带角度的ASP.NET。

在脚本文件夹中我有2个文件 - MoviesAngular.js和ListController.js

MoviesAngular.js

(function ()
{
    var app = angular.module("MoviesAngular", []);
}

)

ListController.js

    (function () {

    var app = angular.module("MoviesAngular",[])

    var ListController = function ($scope) {
        $scope.message = "Hello World";
    };

    app.controller("ListController", ListController);

}()
);

在Index.html中,我有以下代码: @section scripts {

<script src="~/Scripts/angular.min.js"></script>
<script src="~/Client/Scripts/MoviesAngular.js"></script>
<script src="~/Client/Scripts/ListController.js"></script>

    }
  <div ng-app="MoviesAngular">
    <div ng-controller="ListController">
       {{message}}
    </div>

</div>

然而,当我运行应用程序时,我没有将文本显示为“Hello World”我在哪里错了。

编辑包含控制器和应用程序单独定义的另一个场景:(我收到错误 - 错误:$ injector:nomod 模块不可用)。然后我修改了上面的代码。

MoviesAngular.js

(function () {
    var app = angular.module("MoviesAngular", []);


}()

);

ListController.js

(function (app) {

    var ListController = function ($scope) {
        $scope.message = "Hello World";
    };

    app.controller("ListController", ListController);
}(angular.module("MoviesAngular"))
);

3 个答案:

答案 0 :(得分:1)

我的代码中没有发现任何错误。我只是改变了代码的语法。试试这个。

 (function () {

    var app = angular.module("MoviesAngular",[])


    app.controller("ListController", function ($scope) {

    var ListController = function () {
        $scope.message = "Hello World";
    };
     ListController();
});

}()

);

答案 1 :(得分:1)

此代码工作正常:我已经测试了这个

ww.js

(function () {
var app = angular.module("MoviesAngular",[])

var ListController = function ($scope) {
    $scope.message = "Hello World";
};

app.controller("ListController", ListController);

}()
);

观点是:

<html>
<head>
<script src="angular.min.js"></script>
<script src="ww.js"></script></head>
<body>
<div ng-app="MoviesAngular">
<div ng-controller="ListController">
   {{message}}
</div>
</div>
</body>
</html>

希望它会有所帮助。

答案 2 :(得分:0)

您的示例中未调用MoviesAngular.js文件中的IIFE

(function() {
  var app = angular.module("MoviesAngular", []);
}()); // invoke function expression
带有指定第二个参数的

angular.module创建新模块。在ListController.js文件中,您需要获取已创建的模块,从而从angular.module中删除第二个参数

(function() {

  var app = angular.module("MoviesAngular")

  var ListController = function($scope) {
    $scope.message = "Hello World";
  };

  app.controller("ListController", ListController);

}());