Question

我是AngularJS的新手，我希望将AngularJS添加到我现有的ASP.NET Web表单项目中。有没有关于这方面的详细文件？自从做了一些研究之后，我刚刚找到了一些关于在ASP MVC中使用AngularJS的文档，但是没有用于asp web表单。有许多材料告诉AngularJs是用于MVC，而不是用于Web表单架构。是否有任何方法可以做到这一点，非常感谢。

Answer 1

我在同一条船上。 Web表单但不是MVC。经过大量的研究和讨论，我决定选择Angular2。由于两者都有自己的语法，但Angular2更新，并且在开发时考虑了移动设备支持，因此它符合我的特定要求。你必须自己做出决定。我花了一周的时间学习AngularJS的基础知识，本周我学习了Angular 2的基础知识。

这两个资源仍然帮助我每个人，以及从Github下载示例应用程序并直接修补它们。

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

您还需要学习如何为数据源和响应创建Web API。那里的教程主要针对MVC Web API，但没关系。您只需要学习M及其中的C部分，并学习如何通过IHttpActionResult直接输出它作为JSON对象响应。 AngularJS或Angular 2将是类固醇上的V.

Answer 2

此信息非常有用，非常感谢。主要问题是我需要开发我的旧项目，而不能直接创建MVC项目，所以我仍然需要使用AngularJS来开发系统。我认为这项工作是可取的，因为angularJS可以在Angular 2下使用，所以我认为它将来不会被折旧。

最近，我使用以下方法并尝试覆盖回发问题，

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

但是当我执行程序时，系统会弹出错误消息，显示模块不可用。我仍然试图解决这个问题，如果这可以很好地工作，我想我可以在webform下使用AngularJS。

Answer 3

我找到了一个解决方案，它可以很好地运作，

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

并将onload="load()"添加到<body>;

如何在asp web表单中使用AngularJS

3 个答案: