2層のURLで表示されない角度表示

Question

2層以上のURLを含むビューを追加するまでは素晴らしいアプリです。私は自分のルート設定を変更し、 "/ Contact/List"を "/ List"にする単一のレイヤーに変更し、APIにヒットしてデータを正常に取得します。二段URLで

私はそうのようなブラウザのコンソールで役に立たないエラーが発生します。

(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); 
       }); 
    } 


})(); 

ここ

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

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：私はURLに "/ ContactList" の代わりに "/連絡先/リスト" を変更したときに

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

<div ng-view></div> 

繰り返しますが、このページが正常に動作します。コントローラーの問題ではないので、ネストされたルートのレベルまで上がるとは思われません。これは、2層のURLで発生するためです。

ご協力いただきまして誠にありがとうございます。

Answer 1

_Layout.cshtmlの下のコードを参照してください。

<div> 
    @RenderBody() 
</div> 

あなたの角度からコンタクト/リストに移動しようとしています。

ui-viewを宣言していません。 したがって、asp.netのRouteConfigが優位を占めます。

ルート連絡先/リストがががRouteconfig.csでを指定されていないかもしれないので、それはinfinteリフレッシュすることになり、失敗しました。