Question

所以我有一个很有效的角应用程序，直到我添加一个带有多个图层的网址的视图。我已经改变了我的路由配置并改为单层，将“/ Contact / List”改为“/ List”，然后点击api并提取数据就好了。

使用双层URL我在浏览器控制台中得到了一个无用的错误：

no element found  abort:1:1
SyntaxError: expected expression, got '<'[Learn More]  modernizr-2.8.3.js:1
SyntaxError: expected expression, got '<'[Learn More]  jquery-3.1.1.min.js:1
SyntaxError: expected expression, got '<'[Learn More]  owl.carousel.min.js:1
SyntaxError: expected expression, got '<'[Learn More]  angular.min.js:1
SyntaxError: expected expression, got '<'[Learn More]  angular-route.min.js:1
SyntaxError: expected expression, got '<'[Learn More]  bootstrap.min.js:1
SyntaxError: expected expression, got '<'[Learn More]  App.js:1
SyntaxError: expected expression, got '<'[Learn More]  FooterController.js:1
SyntaxError: expected expression, got '<'[Learn More]  BreadCrumbs.js:1
SyntaxError: expected expression, got '<'[Learn More]  HomeController.js:1
SyntaxError: expected expression, got '<'[Learn More]  AboutController.js:1
SyntaxError: expected expression, got '<'[Learn More]  ContactController.js:1
SyntaxError: expected expression, got '<'[Learn More]  NewsController.js:1
SyntaxError: expected expression, got '<'[Learn More]  ProductsController.js:1
SyntaxError: expected expression, got '<'[Learn More]  ServicesController.js:1
SyntaxError: expected expression, got '<'[Learn More]  SupportController.js:1
SyntaxError: expected expression, got '<'[Learn More]  ContactManagerController.js:1
SyntaxError: expected expression, got '<'[Learn More]  ProductSearchController.js:1

Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

这是我的app.js：

(function () {

    "use strict";

    var module = angular.module("app", ["ngRoute", "breadCrumbs"])
        .config(stateConfig);

    function stateConfig($routeProvider, $locationProvider) {
        $routeProvider.caseInsensitiveMatch = true;
        $routeProvider.when("/",
        {
            templateUrl: "/App/Views/Home/Home.html",
            title: "Welcome",
            controller: "HomeCtrl",
            controllerAs: "model"
        });

        $routeProvider.when("/Contact",
        {
            templateUrl: "/App/Views/Contact/Contact.html",
            title: "Contact Us",
            controller: "ContactCtrl",
            controllerAs: "model"
        });

        $routeProvider.when("/Contact/List",
        {
            templateUrl: "/App/Views/Contact/List.html",
            title: "Contact List",
            controller: "ContactMgmtCtrl",
            controllerAs: "model"
        });

        $routeProvider.when("/About",
        {
            templateUrl: "/App/Views/About/About.html",
            title: "About Us",
            controller: "AboutCtrl",
            controllerAs: "model"
        });

        $routeProvider.when("/News",
        {
            templateUrl: "/App/Views/News/News.html",
            title: "Latest News",
            controller: "NewsCtrl",
            controllerAs: "model"
        });

        $routeProvider.when("/Products",
        {
            templateUrl: "/App/Views/Products/Products.html",
            title: "Products",
            controller: "ProductsCtrl",
            controllerAs: "model"
        });

        $routeProvider.when("/Services",
        {
            templateUrl: "/App/Views/Services/Services.html",
            title: "Services",
            controller: "ServicesCtrl",
            controllerAs: "model"
        });

        $routeProvider.when("/Support",
        {
            templateUrl: "/App/Views/Support/Support.html",
            title: "Support",
            controller: "SupportCtrl",
            controllerAs: "model"
        });

        $locationProvider.html5Mode(true);
    }

    module.run(['$rootScope', function ($rootScope) {
        $rootScope.page = {
            setTitle: function (title) {
                this.title = title + ' - MDT';
            }
        }

        $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
            $rootScope.page.setTitle(current.$$route.title || 'Default Title');
        });
    }]);

})();

ContactManagementController.js：

(function () {
    "use strict";

    angular.module("app")
        .controller("ContactMgmtCtrl", ContactMgmtCtrl);

    function ContactMgmtCtrl($http, $rootScope) {
        var model = this;
        model.pageName = "Contact List";
        $rootScope.page.setTitle(model.pageName);
        model.contacts = [];

        $http.get("/api/Contact/GetContacts")
               .then(function (response) {
                   console.log(response.data),
                   angular.copy(response.data, model.contacts);
               });
    }


})();

Layout.cshtml：

<!DOCTYPE html>
<html lang="en-US" ng-app="app">
<head>
    <meta charset="utf-8" />
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-ng-bind="page.title"></title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/color-styles.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/app.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/footer.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/owl.carousel.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/owl.theme.default.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
    <div ng-include="'/App/Views/Shared/NavbarMain.html'"></div>

    <div>
        @RenderBody()
    </div>

<div ng-include="'/App/Views/Shared/MainFooter.html'"></div>

    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/owl.carousel.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/App/Modules/App.js"></script>
    <script src="~/App/Controllers/Shared/FooterController.js"></script>
    <script src="~/App/Directives/BreadCrumbs.js"></script>
    <script src="~/App/Controllers/Home/HomeController.js"></script>
    <script src="~/App/Controllers/About/AboutController.js"></script>
    <script src="~/App/Controllers/Contact/ContactController.js"></script>
    <script src="~/App/Controllers/News/NewsController.js"></script>
    <script src="~/App/Controllers/Products/ProductsController.js"></script>
    <script src="~/App/Controllers/Services/ServicesController.js"></script>
    <script src="~/App/Controllers/Support/SupportController.js"></script>
    <script src="~/App/Controllers/Contact/ContactManagerController.js"></script>
    <script src="~/App/Controllers/Products/ProductSearchController.js"></script>
</body>
</html>

Index.cshtml：

@{
    ViewBag.Title = "Something Here";
}

<div ng-view></div>

同样，当我将URL更改为“/ ContactList”而不是“/ Contact / List”时，此页面正常工作。所以不是控制器的问题，我认为这不会升级到嵌套路由的级别，因为任何双层URL都会发生这种情况。

非常感谢任何帮助。

Answer 1

请参阅_Layout.cshtml中的以下代码。

<div>
    @RenderBody()
</div>

您正试图通过角度导航到联系人/列表。

但您尚未声明 ui-view 。所以，你的asp.net中的RouteConfig将占上风。

路径联系人/列表可能指定 Routeconfig.cs ，因此转向是一个infinte刷新并失败。

角度视图未显示双层网址

1 个答案: