为什么angular js路由不起作用?

时间:2015-09-02 17:36:02

标签: angularjs asp.net-mvc

我在_Adminlayout.cshtml中有一个菜单,我在其中定义了我的Route,这就是我所做的一切:

<!DOCTYPE html>

  <html ng-app="app">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
   <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
   <link href="~/Content/Styles/ThirdParties/Glazzed/Main.css" rel="stylesheet" />

 <link href="~/Content/Styles/GlazzedOverride.css" rel="stylesheet" />
 <script src="~/Scripts/modernizr-2.6.2.js"></script>
 <script src="~/Scripts/Scripts/ThirdParties/Glazzed/Main.js"></script>
 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <script src="~/Scripts/Scripts/ThirdParties/Angular.js"></script>
 <script src="~/Scripts/Scripts/ThirdParties/AngularRoute.js"></script>
 <script src="~/Scripts/bootstrap.min.js"></script>
 @DefineApp()
</head>
<body>
    <div>
        <div class="container">
        <div class="col col-md-9 pull-left">
            @RenderBody()
            @*<ng-view></ng-view>*@
            <div ng-view></div>
        </div>
        <div class="col col-md-2 bg1">
            <ul class="main-nav" ng-controller="menuController">
                <li ng-repeat="menuItem in menuItems" class="{{ menuItem.submenuItems && menuItem.submenuItems.length > 0 ? 'main-nav--collapsible' : '' }}">
                    <a class="main-nav__link" ng-href="{{ menuItem.url || 'javascript:void(0);' }}">
                        <span class="main-nav__icon"><i class="{{ menuItem.icon }}"></i></span>
                        {{ menuItem.title }}
                    </a>
                    <ul ng-if="menuItem.submenuItems && menuItem.submenuItems.length > 0" class="main-nav__submenu">
                        <li ng-repeat="submenuItem in menuItem.submenuItems"><a href="{{ submenuItem.url || 'javascript:void(0);' }}"><span>{{ submenuItem.title }}</span></a></li>
                    </ul>
                </li>
            </ul>

        </div>
    </div>

这是脚本:

    <script>
        App.config(['$routeProvider', function ($routeProvider) {
            debugger;
            $routeProvider
                .when('/Admin/GetProducts', {
                    templateUrl: '@Url.Action("GetProducts","Product")'
                })                  
                .otherwise({
                redirectTo: '/'
            });
        }]);
        App.controller("menuController", function ($scope) {
            debugger;
            $scope.menuItems = [
                {
                    title: 'ProductList',
                    icon: 'pe-7f-check',
                    url: '#/Admin/GetProducts'
                }
            ]});
    </script>
</div>

 @helper  DefineApp()
         {
         <script>
             var App = angular.module("app", ['ngRoute']);
        </script>
      }

但是我的路线不起作用,问题是什么?

1 个答案:

答案 0 :(得分:0)

你正在混合为SPA设计的Angular路由,你也有不适用于SPA的MVC路由。你们两种技术基本上都是相互争斗的。

如果你想使用Angular路由或Angular是通用的,我建议你不要让你的ASP.NET MVC控制器返回任何视图,除了可能“Index.cshtml”