Angular JS不适用于Bootsrap和ASP.NET MVC

Question

我正在尝试非常简单的AngularJS示例来发布用户通过文本框输入的数据。

我在做：

<div ng-controller="Subscribe">
 <input type="text" ng-model="EmailAddress" />
 <button class="btn btn-success" ng-click="send()">Subscribe</button>
 <div>{{status}}</div>
</div>


@section FooterJS{

<script type="text/javascript">

    function Subscribe($scope) {

        $scope.send = function () {
            //alert("sdf");
            var _url = '/NewsLetter/Subscribe'
            $http({ method: 'POST', url: _url, cache: $templateCache }).
                  success(function (data, status) {
                      $scope.status = status;
                      $scope.data = data;
                  }).
                  error(function (data, status) {
                      $scope.data = data || "Request failed";
                      $scope.status = status;
                  });
        }
    }

 </script>

}

在Main Layout页面中，我包含了以下js文件，在js文件之后，添加了FooterJS部分。

<script src="~/Scripts/jquery-2.0.3.min.js"></script>     
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.js"></script>

<script src="~/Scripts/angular-resource.min.js"></script>
<script src="~/Scripts/bootstrap-lightbox.min.js"></script>

生成的输出是http://gyazo.com/ad2a992d8dc2af106ca95956abffe1d5

当我单击按钮时什么也没有发生。

没弄错是什么？，我是Angular JS的初学者。

Answer 1

$ http和$ templateCache尚未注入到控制器中。

function Subscribe($scope) {

应该改为

function Subscribe($scope, $http, $templateCache) {

有关角度依赖注入的更多信息，请参见http://docs.angularjs.org/guide/di

Answer 2

您需要确保有一个ng-app部分围绕控制器（可能还有其他html代码），如下所示：

<div ng-app>

... some html code here ...

    <div ng-controller="Subscribe">
      <input type="text" ng-model="EmailAddress" />
      <button class="btn btn-success" ng-click="send()">Subscribe</button>
      <div>{{status}}</div>
    </div>

... more html code here ...

</div>

观察结果 ：我认为您正在实现几种反模式。 AngularJS的主要目的之一是避免从像ASP.NET这样的mvc框架生成渲染的html。 AngluarJS的哲学是使用它来使用静态htmls文件创建单页应用程序，因此表示层位于纯静态html，javascript和css文件上，因此最好不要使用MVC框架，而是使用API​​ REST框架，例如Service Stack使用REST Web服务与表示层通信。

其次，您应避免执行“ @section FooterJS”操作，因为您将html模板逻辑与javascript代码耦合在一起，该代码应位于另一个文件中以提供更好的可维护性，您应该创建另一个javascript文件并使用来将其添加到html中。 <script>标记，例如<script src="SubscribeCtrl.js">等。

最后，我建议您按照本教程https://egghead.io/lessons/angularjs-controllers更好地了解angularjs控制器，我真的建议您观看egghead提供的所有免费angularjs视频，它们的确很棒。