Question

嗨，我正在尝试使用AngularJs创建单页面应用程序   和Asp.net MVC4。首先，我尝试使用基本导航   角。我按照以下步骤操作。   创建MVC4 Web应用程序，选择的Internet应用程序，   从Nuget下载的AngularJs库，   在Bundles.config文件中引用它在我的文件中给出了Angular的引用   _layout.cshtml页面，   写了app.js文件进行路由

以下是代码。

这是我的bundles.config文件

 bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                  "~/Scripts/angular.js",
                   "~/Scripts/angular.min.js",
                  "~/Scripts/angular-route.js",
                  "~/Scripts/angular-animate.js",
                  "~/Scripts/app/app.js",
                  "~/Scripts/app/js/controllers.js"));

这是我的_Layout.cshtml文件。如您所见，我使用过ng-app 让html了解angular的指令。

 <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    </head>
    <body ng-app>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
           <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                    @Html.Partial("_LoginPartial")
                </section>
                <div class="nav-collapse">
                    <nav>
                        <ul class="nav">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li><a href="#/Home/Contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                @*<div ng-view></div>*@
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">

            @RenderBody()

        </section>
        <div ng-view></div>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/angular")
    @RenderSection("scripts", required: false)

    <script src="~/app/app.js"></script>
    <script src="~/app/js/controllers.js"></script>
    </body>
    </html>

这是我的Index.cshtml文件

 @{ViewBag.Title = "Home Page";}


    <h1>Angular Tutorial</h1>
    <p>This is an online searchable database for food and nutrition information.</p>

    <h3>We suggest the following:</h3>

我在app.js文件中进行了路由，如下所示

'use strict';
angular.module('myApp', [
'myApp.controllers',
'ngRoute'
]).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/Home/Contact', { templateUrl: 'Views/Home/Angular.html', controller: 'MyCtrl1' });

    $routeProvider.otherwise({ redirectTo: '/Home/About' });
}]);

最后这是我的控制器。我已经写了一条警告信息检查角度是否有效。

'use strict';

angular.module('myApp.controllers', [])

 .controller('MyCtrl1', function ($scope) {

    alert('Hello from partial One');

});

我不知道我做错了什么。我尝了几个教程但无法使其成为SPA。请帮我。我真的很想现在解决这个问题这让我很紧张。非常感谢提前。

Answer 1

使用Angular和MVC实际上是同时使用两个MV *框架。

我的建议是选择一个并使用它。不要试图同时使用它们，因为它会相互冲突并让你更加困惑。

由于您想要创建SPA，因此您的选择应该是Angular。 ASP.NET / MVC4不会给你一个SPA，但它可以为你提供一个功能齐全的网站。

首先计划你想要的东西，然后选择技术让自己在那里。不要先选择技术。

Answer 2

您包括angular.js 和 angular.min.js。这可能是问题......没有别的东西立即跳出来。

Answer 3

我看到了几个问题：

你在同一个包中包含angular.js和angular.min.js：
- 当您不在＆＃34;优化＆＃34;时，该捆绑包会自动最小化js文件。或＆＃34;调试＆＃34;模式，所以根本不要引用它们。
您使用多个ng-app标签，我并没有真正看到这样的理由：
- 每个应用程序都有一个ng-app =＆＃34;＆＃34;。
你混合了两个不同的概念（asp.net razor views + angular js）：
- 你需要聪明而轻柔地做到这一点。如果你想获得使用html帮助者\包等的剃刀的力量，那么只有当你确定知道自己在做什么时才会这样。您如何将数据绑定到模型？我认为你应该改变你的概念并使用asp.net web api代替并使用angular＆＃34;正确的方式＆＃34;没有混合起来。

Answer 4

如果您不需要任何基本页面和一些Angular，在Visual Studio中，只需创建一个“ASP.NET空Web应用程序”即可。然后添加你需要的Angular包，一个html文件和一个JavaScript文件，然后你就可以了。我最近在学习角度的同时做了这个，并制作了一个带有基本导航功能的简单图像轮播。如果它可以帮助你，我有我的解决方案GitHub repo：

git clone https://github.com/antonosmond/AngularCarousel

它应该让您了解如何开始使用Angular JS和Visual Studio，而没有尝试将Angular集成到MVC应用程序中的所有复杂性。

使用asp.net MVC4和AngularJs创建单个页面应用程序

4 个答案: