Angularjs ng视图未渲染迷你SPA的模板视图_Angularjs_Asp.net Mvc

Angularjs ng视图未渲染迷你SPA的模板视图

angularjs asp.net-mvc

Angularjs ng视图未渲染迷你SPA的模板视图,angularjs,asp.net-mvc,Angularjs,Asp.net Mvc,我很难弄明白为什么ng视图没有在Asp.net MVC页面中呈现我的模板html。现在让我来规划一下我所拥有的，希望有人能指出我所缺少的问题不在于数据没有生成，而在于视图没有呈现或数据没有绑定到视图。。。当我导航到/KPI/Scores路径时，数据在浏览器中显示为原始json 任何帮助都将不胜感激这是my_Layout.cshtml页面： <html ng-app="portalModule"> <head> <meta charset="utf-8"

我很难弄明白为什么ng视图没有在Asp.net MVC页面中呈现我的模板html。现在让我来规划一下我所拥有的，希望有人能指出我所缺少的

问题不在于数据没有生成，而在于视图没有呈现或数据没有绑定到视图。。。当我导航到/KPI/Scores路径时，数据在浏览器中显示为原始json

任何帮助都将不胜感激

这是my_Layout.cshtml页面：

<html ng-app="portalModule">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - CM Team Portal Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("JavascriptInHead", required: false)
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("CM Team Portal", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("KPI", "Index", "KPI")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - CM Team Portal Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/portal")
    @RenderSection("scripts", required: false)
</body>
</html>

这是我的路线图：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace Rma.ReleaseManager.Portal
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "KPI Scores SPA",
                url: "KPI/Scores",
                defaults: new { controller = "Scores", action = "Index" });

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

这是我的Asp.net MVC控制器的分数：

    using Rma.ReleaseManager.Portal.Models.Scores;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;

    namespace Rma.ReleaseManager.Portal.Controllers
    {
        public class ScoresController : JsonController
        {
            // GET: Scores
            private ScoresVmBuilder _scoresVmBuilder = new ScoresVmBuilder();
            public ActionResult Index()
            {

                return Json(_scoresVmBuilder.GetScoresVM(),JsonRequestBehavior.AllowGet);
            }
        }
    }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json.Serialization;
using Newtonsoft.Json;
using System.Net;

namespace Rma.ReleaseManager.Portal.Controllers
{
    public class JsonController : Controller
    {

        protected   new ActionResult Json(object data, JsonRequestBehavior behavior = JsonRequestBehavior.DenyGet)
        {
            var jsonSerializerSettings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };

            if (Request.RequestType == WebRequestMethods.Http.Get && behavior == JsonRequestBehavior.DenyGet)
                throw new InvalidOperationException("GET is not permitted for this request");

            var jsonResult = new ContentResult
            {
                Content = JsonConvert.SerializeObject(data, jsonSerializerSettings),
                ContentType = "application/json"

            };
            return jsonResult;


        }
    }
}

'use strict';

portalModule.controller("ScoresController", function ($scope, scoresRepository) {
            scoresRepository.get().then(function (scores) { $scope.scores = scores; });
        });

这是我的JsonController：

    using Rma.ReleaseManager.Portal.Models.Scores;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;

    namespace Rma.ReleaseManager.Portal.Controllers
    {
        public class ScoresController : JsonController
        {
            // GET: Scores
            private ScoresVmBuilder _scoresVmBuilder = new ScoresVmBuilder();
            public ActionResult Index()
            {

                return Json(_scoresVmBuilder.GetScoresVM(),JsonRequestBehavior.AllowGet);
            }
        }
    }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json.Serialization;
using Newtonsoft.Json;
using System.Net;

namespace Rma.ReleaseManager.Portal.Controllers
{
    public class JsonController : Controller
    {

        protected   new ActionResult Json(object data, JsonRequestBehavior behavior = JsonRequestBehavior.DenyGet)
        {
            var jsonSerializerSettings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };

            if (Request.RequestType == WebRequestMethods.Http.Get && behavior == JsonRequestBehavior.DenyGet)
                throw new InvalidOperationException("GET is not permitted for this request");

            var jsonResult = new ContentResult
            {
                Content = JsonConvert.SerializeObject(data, jsonSerializerSettings),
                ContentType = "application/json"

            };
            return jsonResult;


        }
    }
}

'use strict';

portalModule.controller("ScoresController", function ($scope, scoresRepository) {
            scoresRepository.get().then(function (scores) { $scope.scores = scores; });
        });

这是我的角度模块：

'use strict';

var portalModule = angular.module("portalModule", ['ngResource','ngRoute'])
                .config(function ($routeProvider, $locationProvider) {
                    $routeProvider.when('/KPI/Scores',
                        {
                            templateUrl: '/templates/scores.html',
                            controller: 'ScoresController'
                        });
                    $routeProvider.otherwise(
                        {
                            redirectTo: '/KPI/Scores'
                        });
                    $locationProvider.html5Mode(true);

            });

这是我的角度控制器：

    using Rma.ReleaseManager.Portal.Models.Scores;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;

    namespace Rma.ReleaseManager.Portal.Controllers
    {
        public class ScoresController : JsonController
        {
            // GET: Scores
            private ScoresVmBuilder _scoresVmBuilder = new ScoresVmBuilder();
            public ActionResult Index()
            {

                return Json(_scoresVmBuilder.GetScoresVM(),JsonRequestBehavior.AllowGet);
            }
        }
    }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json.Serialization;
using Newtonsoft.Json;
using System.Net;

namespace Rma.ReleaseManager.Portal.Controllers
{
    public class JsonController : Controller
    {

        protected   new ActionResult Json(object data, JsonRequestBehavior behavior = JsonRequestBehavior.DenyGet)
        {
            var jsonSerializerSettings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };

            if (Request.RequestType == WebRequestMethods.Http.Get && behavior == JsonRequestBehavior.DenyGet)
                throw new InvalidOperationException("GET is not permitted for this request");

            var jsonResult = new ContentResult
            {
                Content = JsonConvert.SerializeObject(data, jsonSerializerSettings),
                ContentType = "application/json"

            };
            return jsonResult;


        }
    }
}

'use strict';

portalModule.controller("ScoresController", function ($scope, scoresRepository) {
            scoresRepository.get().then(function (scores) { $scope.scores = scores; });
        });

以下是我的角度存储库：

'use strict';

portalModule.factory('scoresRepository', function ($http, $q) {
        return {
            get: function () {
                var deferred = $q.defer();
                $http.get('/Scores').success(deferred.resolve).error(deferred.reject);
                return deferred.promise;
            }
        }
    });

包括angular module意味着app.js？？我在我的_Layout.cshtml页面中有它，它在哪里？就像你添加的一样，它被注入到你提到的部分上方的部分中@{ViewBag.Title=“KPI”Layout=“~/Views/Shared/_Layout.cshtml”}对不起，它在“~/bundles/portal”中的我的BundleConfig.cs中，你在那里包含angular module means app.js？？我在我的{Layout.cshtml页面中，它在js的位置？就像您添加的一样，它被注入到您提到的部分上方的部分中@{ViewBag.Title=“KPI”Layout=“~/Views/Shared/_Layout.cshtml”}很抱歉它在“~/bundles/portal”中的my BundleConfig.cs中