CODEWITHSUNDEEP
javascriptasp.net-mvcangularjs
rughimire
rughimire

Reputation: 384

Angular JS does not work with Bootsrap and ASP.NET MVC

I am trying very simple AngularJS sample to post the data input by user through Text Box.

I am doing:

<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>

}

And in Main Layout page,I have included following js files and after js file a section 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>

The output generated is http://gyazo.com/ad2a992d8dc2af106ca95956abffe1d5

Nothing happens when I click button.

Did not get what is wrong?, I am beginner in Angular JS.

Upvotes: 0

Views: 1544

Answers (2)

Chris Foster
Chris Foster

Reputation: 1300

$http and $templateCache have not been injected into the controller.

function Subscribe($scope) {

Should be changed to

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

More information on angular dependency injection can be found at http://docs.angularjs.org/guide/di

Upvotes: 1

Miguel A. Carrasco
Miguel A. Carrasco

Reputation: 1399

You need to be sure that you have an ng-app section sorrounding the controller (and maybe other html code) like this:

<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>

Observations: I think you are implementing several antipatterns. One of the main purposes of AngularJS is to avoid generate rendered html from an mvc framework like ASP.NET. The AngluarJS philosophy is to use it to create Single Page applications using static htmls files so the presentation layer is on pure static html, javascript and css files, so it's better to not use an MVC framework but an API REST framework instead like Service Stack that comunicates with the presentation layer using REST web services.

Secondly, you should avoid to do this "@section FooterJS" things because you are coupling html template logic with javascript code, that code should be in another file for better maintainability, you should create another javascript file and add it in the html using the <script> tag, for example <script src="SubscribeCtrl.js"> etc.

Finally, I recommend that you to follow this tutorial https://egghead.io/lessons/angularjs-controllers to understand angularjs controllers better, I really recommend that you watch all the free angularjs videos by egghead, they are really great.

Upvotes: 0

Related Questions