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

Question

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.

The problem you are having is not related to bootstrap or Mvc. $http and $templateCache will need to be passed into your Subscribe function. Are you getting any JavaScript errors? Does the alert appear when uncommented? — Chris Foster
– Chris Foster, Commented Feb 8, 2014 at 6:49
Chris, adding $http in controller function and removing catche:$templatCache solves the issue. Thanks — rughimire
– rughimire, Commented Feb 8, 2014 at 6:53

Chris Foster · Accepted Answer · 2014-02-08 07:09:22Z

1

$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

answered Feb 8, 2014 at 7:09

Chris Foster

1,30011 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miguel A. Carrasco Over a year ago

That's right, my answer is incomplete, I forget that you need to inject the $http and $templateCache that way.

Miguel A. Carrasco · Accepted Answer · 2014-02-08 06:16:07Z

0

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.

answered Feb 8, 2014 at 6:16

Miguel A. Carrasco

1,3991 gold badge15 silver badges27 bronze badges

5 Comments

rughimire Over a year ago

Miguel, Does it mean to create seprate js file for all the controllers? And What are the performance issues if I have to use AngularJS with MVC Controllers instead of WebAPI?

Miguel A. Carrasco Over a year ago

Yes, I separate each controller in their own file. I follow this structure in my angularjs projects: cliffmeyers.com/blog/2013/4/21/…

Miguel A. Carrasco Over a year ago

Every time when you use an MVC to generate HTMLs you are delegating the presentation layer to the backend (the View in the MVC pattern), so the templating and HTML rendering consume processing for each request, if you use static HTMLs and AngularJS for the presentation layer and just an API REST in the backend all that templating processing is delegated to the client (the browser), so this increase the performance, also static HTMLs are easy to cache in several layers, using for instance a reverse proxy like Varnish, or a CDN, also the browser use their own cache following a REST architecture.

Miguel A. Carrasco Over a year ago

If you build a true REST backend then the performance will be improved a lot using this approach, for most sites probably you don't need it, you can build highly scalable sites using just the MVC pattern, thats true, but its difficult, using the Single Page Application aproach is easier to build high scalable sites.

Miguel A. Carrasco Over a year ago

But I don't think that Performance is the only benefit nor the most important in this aproach, but the separation of concerns. Using this SPA pattern you will end with a clean solution where html, javascript, and backend code are truely separated, and that inherently generate more mantainable code. Also you will have all the www.api-first.com API-First benefits.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related