AngularJS 视图未被替换

Question

我正在处理这个 angularJS 应用程序。我有一个工作正常的登录页面；但是，无法过渡到菜单页面。视图未按预期被替换。我在这里错过了什么或做错了什么？以下是我的应用程序的部分代码：

var Admin = angular.module('Admin', ['ui.router', 'Admin.Services', 'angularUtils.directives.dirPagination']);

Admin.controller('LoginController', LoginController);
Admin.controller('AuthenticateHeader', AuthenticateHeader);

Admin.factory('AuthHttpResponseInterceptor', AuthHttpResponseInterceptor);
// Admin.factory('AuthHttpResponseInterceptor', AuthHttpResponseInterceptor);
Admin.config(['$stateProvider', '$httpProvider', '$locationProvider', '$urlRouterProvider',
    function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider) {
        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; //This is important for angiforgen
        $locationProvider.hashPrefix('!').html5Mode(true);
        $urlRouterProvider.otherwise('/Login');
        $urlRouterProvider.when("/", "/Login");
        $stateProvider
        .state('Admin', {
            abstract: true,
            views: {
                'header': {
                    templateUrl: '/Navigation/UnAuthenticateHeader'
                },
                'content': {
                    templateUrl: '/Navigation/Content'
                }
            }
        })
        .state('Admin.login', {
            url: "/Login",
            views: {
                "content@": {
                    templateUrl: '/Account/Login',
                    controller: 'LoginController'//function ($scope,$stateParams) {

                   // }
                }
            }
        })
        .state('menu', {
            //  url: '/Menu',
            abstract : true,
            views: {

                templateUrl: '/Landing/Home',
                controller: function ($scope) {
                    $scope.message = 'menu controller';
                }
            },
            data: {
            proxy: 'Home'
        },
        })
        .state('menu.home',
        {
            url: '/Home',
            views: {
                'nav@menu': {
                    templateUrl: '/Navigation/AuthHeader',
                    controller: function ($scope) {
                        $scope.message = 'single message';
                    }
                },
                'content@menu': {
                    templateUrl: '/Landing/Index',
                    controller: function ($scope) {
                        $scope.message = 'Content menu';
                    }
                }
            }
        })
     //   $httpProvider.interceptors.push('AuthHttpResponseInterceptor');
    }]);

// 索引页

<!DOCTYPE html>
<html lang="en" ng-app="Admin">
<head>
    <title>Admin Decision Support Engine</title>
    <base href="/" />
    @Styles.Render("~/Content/css")
</head>
<body>
    <table>
        <tr><td style="height:10%">
            <div ui-view="header"></div>    
        </td></tr>
        <tr><td style="height:90%">
           <div ui-view="content"></div>  
        </td></tr>
    </table>
    <footer id="footer">
        <span class="text-muted pull-left" style="margin-left: .5% !important;">Admin</span>
        <span class="text-muted pull-right" style="margin-right: 3% !important;">Admin </span>
    </footer>
    @Scripts.Render("~/Bundles/myScripts")
</body>
</html>

//首页着陆页

<div ui-view="nav" ng-cloak>
</div>

<section class="mainContent">
    <section class="Display">
        <div ui-view="content" ng-cloak>
        </div>
    </section>
</section>

//部分控制器-将用户重定向到菜单主页

if (!LoginInfo.Org) {
            var result = LoginUser(LoginFactory, ToastMessageFactory, LoginInfo);
            result.then(function (result) {
                if (result.success) {
                    saveLoginInformation(result.data[0]);
                    //todo redirect the user 
                    // $state.go('Admin.home');
                    $state.go('menu.home');
                }
            });

//取消授权Header

    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Admin Authenticate Decision Support Engine</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav pull-right">
            <li>
                <a id="Logout" role="button"><span class="glyphicon glyphicon-log-in">{{username}}</span></a>
            </li>
        </ul>
    </div>

</div>

//索引页只有下面的消息

{{ message }}

Answer 1

我终于弄明白了。我创建了另一个较小的项目并进行了试验。我找到了这个例子 here。我进行了更改并尝试了不同的方法。最后，我对它的行为方式有了很好的理解。

应用程序

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

         .state('home', {
             url: '/home',
             views : {
                 'indexView@' :{
                     templateUrl: '/Home/home'
                 }
                 }

         })

    // nested list with custom controller
    .state('home.list', {
        url: '/list',
        views : {
            'indexView@' : {
                templateUrl: '/Home/List',
                controller: function ($scope) {
                    $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
                }
            }
        }
    })

    // nested list with just some random string data
    .state('home.paragraph', {
        url: '/paragraph',
        views : {
            'indexView@' :{
                template: 'I could sure use a drink right now.'
            }
        }
    })
     .state('about', {
         url: '/about',
         views: {

             // the main template will be placed here (relatively named)
             'indexView@': { templateUrl: '/Home/About' },

             // the child views will be defined here (absolutely named)
             'columnOne@about': { template: 'Look I am a column!' },

             // for column two, we'll define a separate controller 
             'columnTwo@about': {
                 templateUrl: '/Home/data',
                 controller: 'scotchController'
             }
         }

     })
        .state('Account', {
            url: '/Account',
            views: {
                'indexView@': { templateUrl: '/Account/myAccount' },
                // '': { templateUrl: '/Home/About' },
                'view1@Account': {
                    templateUrl: '/Navigation/Header',
                    controller: function ($scope) {
                        $scope.username = 'user1';
                        console.log($urlRouterProvider);
                    }
                },
                'view2@Account': {
                    templateUrl: '/Account/Login',
                    controller: 'accountController'
                }
            }
        })
    .state('Account.User', {
        url: '/User',
        views: {
            'view1@Account': {
                templateUrl: '/Navigation/AuthenticateHeader',
                controller: function ($scope) {
                    $scope.message = 'User Logged in.';
                    console.log($urlRouterProvider);
                }
            },
            'view2@Account': {
                templateUrl: '/User/CurrentUser',
                controller: 'userController'
            }
        }
    });

});

routerApp.controller('userController', function ($scope, $state) {
    $scope.message = 'User Logged in.';
});

routerApp.controller('accountController', function ($scope, $state) {

    $scope.login = function () {
        $state.go('Account.User');
    };

});

routerApp.controller('scotchController', function ($scope,$state) {

    $scope.message = 'test';

    $scope.scotches = [
        {
            name: 'Macallan 12',
            price: 50
        },
        {
            name: 'Chivas Regal Royal Salute',
            price: 10000
        },
        {
            name: 'Glenfiddich 1937',
            price: 20000
        }
    ];

    $state.go('Account');

});

索引页

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>

    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
        .navbar { border-radius:0; }
    </style>

    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="~/Scripts/app.js"></script>
</head>

<!-- apply our angular app to our site -->
<body ng-app="routerApp">

<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
        <li><a ui-sref="Account">Account</a></li>
    </ul>
</nav>

<!-- MAIN CONTENT -->
<div class="container">

    <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
    <div ui-view="indexView"></div>

</div>

</body>
</html>

用户登录后，我开始使用这个着陆页。

/Landing/Home
<div ui-view="header" ng-cloak>
</div>

<div ui-view="content" ng-cloak>
</div>

RouteConfigs.cs 文件 对于我的views文件夹下的每一个视图，在路由配置文件中都有对应的路由，这些路由url可以匹配到$stateProvider.state.

中显示的templateUrl

 routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

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

            routes.MapRoute(
             name: "content",
             url: "Navigation/Content",
             defaults: new { controller = "Navigation", action = "Content", id = UrlParameter.Optional }
           );

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

            routes.MapRoute(
                name: "authHeader",
                url: "Landing/AuthHeader",
                defaults: new { controller = "Landing", action = "AuthHeader", id = UrlParameter.Optional }
            );

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

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

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

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

AngularJS 视图未被替换

AngularJS View Is not Being Replaced

angularjs

asp.net-mvc-5

angular-ui-router

angularjs-view