CODEWITHSUNDEEP
javascriptangularjs
abramhum
abramhum

Reputation: 471

How to use AngularJS in asp web form

I am a newbie to AngularJS , and I hope to add AngularJS to my existing ASP.NET web form project. Is there any detail document about that? Since after doing some research, I just found some documents about using AngularJS in ASP MVC, but not for asp web form. There exist many materials tell that AngularJs is for MVC, not for web form architecture. Is there any way to make that, thanks a lot.

Upvotes: 0

Views: 2230

Answers (3)

abramhum
abramhum

Reputation: 471

I found a solution and it can work well, 

<script>

        function load() {
            Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(EndRequestHandler);
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        }


        function EndRequestHandler() {
            onloadhandler();
        }

    function onloadhandler() {
        angular.bootstrap($("#test"),['myApp']);
    }

</script>

And add onload="load()" to <body>;

Upvotes: 1

abramhum
abramhum

Reputation: 471

This info is useful, and thanks a lot. The main problem is I need to develop my old project, and can not create MVC project directly, so I still need to use AngularJS to develop system. And I think this work is desirable since angularJS can be used under Angular 2, so I think it will not be depreciated in future.

Recently, I use following methods and try to cover post back problem, 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="./../js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="./../js/jQueryUI/jquery-ui-1.12.0.js"></script>
    <script type="text/javascript" src="./../js/AngularJS/angular_1.6.5.js"></script>
    <script type="text/javascript" src="./../BootsTrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        function load() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        }

        $(window).bind('beforeunload', function () {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        });


        function EndRequestHandler() {
            onloderfunction();
        }

        $(document).ready(function () {
            onloderfunction();
        });


        function onloderfunction() {
              var mod = angular.module("myApp", []);
                  mod.controller("MainController", function ($scope, $compile) {
             });

            angular.bootstrap($('#idAngular1'), ["myApp"]);
        }


    </script>
    <link href="./../js/jQueryUI/jquery-ui.css" rel="stylesheet" />
    <link href="./../css/jquery.ui.autocomplete.css" rel="stylesheet" />
    <link href="./../BootsTrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body onload="load()" ng-app="myApp" ng-controller="MainController">
    <form id="form1" runat="server">
        <cc3:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true"
            EnableScriptLocalization="true">
        </cc3:ToolkitScriptManager>
        <asp:HiddenField ID="hidCurrentTab" runat="server" />
        <div>
        </div>
        <div id="tabs">

            <div id="tabs-2">

                <asp:UpdatePanel ID="uppnlloaddata" runat="server" ChildrenAsTriggers="true">
                    <ContentTemplate>
                        <div id="idAngular1" data-ng-app="" data-ng-init="quantity=1;price=5">
                        <h2>Cost Calculator</h2>

                        Quantity:
                            <input type="number" ng-model="quantity">
                        Price:
                        <input type="number" ng-model="price">

                        <p><b>Total in dollar:</b> {{quantity * price}}</p>
                        </div>

                        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>

        </div>

    </form>


</body>
</html>

But when I execute the program, the system pop error message which show module not available. I still try to handle this problem, and if this can work well, I think I can use AngularJS under webform.

Upvotes: 1

Iskandar Reza
Iskandar Reza

Reputation: 962

I'm in the same boat. Web Forms but not MVC. After much research and discussion, I decided to go with Angular2. Since both have their own syntaxes but Angular2 is newer and is being developed with mobile device support in mind, it suited my specific requirements. You'll have to make your own decision. I took a week learning the basics of AngularJS, and this week I'm learning the basics of Angular 2.

These two resources are still helping me for each, as well as downloading sample apps from Github and directly tinkering with them.

https://thinkster.io/a-better-way-to-learn-angularjs https://thinkster.io/tutorials/learn-angular-2

You'll need to also need to learn how to make a Web API for the data source and response. The tutorials out there are mostly for MVC Web API but that's OK. You just need to learn M and the C part of that, and learn how to output that directly through IHttpActionResult as a JSON object response. AngularJS or Angular 2 will be the V on steroids.

Upvotes: 1

Related Questions