AngularJS View не заменен

У меня есть приложение angularJS, над которым я работаю. У меня есть страница входа, которая работает нормально; однако переход на страницу меню не работает. Представление не заменяется, как ожидалось. Что я пропущу или делаю неправильно здесь? Вот некоторые частичные коды из моего приложения:AngularJS View не заменен

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: { 
       "[email protected]": { 
        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: { 
       '[email protected]': { 
        templateUrl: '/Navigation/AuthHeader', 
        controller: function ($scope) { 
         $scope.message = 'single message'; 
        } 
       }, 
       '[email protected]': { 
        templateUrl: '/Landing/Index', 
        controller: function ($scope) { 
         $scope.message = 'Content menu'; 
        } 
       } 
      } 
     }) 
    // $httpProvider.interceptors.push('AuthHttpResponseInterceptor'); 
    }]);

// Указатель Page

<!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'); 
       } 
      });

// Unauthicate Заголовок

<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 }}

источник

2015-11-05 Jean B

я, наконец, смог понять это. Я создал еще один небольшой проект и играл с ним. Я нашел этот пример here. Я сделал изменения и попробовал разные вещи. Наконец, я получил хорошее представление о том, как он себя ведет.

Приложение

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

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

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 

     .state('home', { 
      url: '/home', 
      views : { 
       '[email protected]' :{ 
        templateUrl: '/Home/home' 
       } 
       } 

     }) 

    // nested list with custom controller 
    .state('home.list', { 
     url: '/list', 
     views : { 
      '[email protected]' : { 
       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 : { 
      '[email protected]' :{ 
       template: 'I could sure use a drink right now.' 
      } 
     } 
    }) 
    .state('about', { 
     url: '/about', 
     views: { 

      // the main template will be placed here (relatively named) 
      '[email protected]': { templateUrl: '/Home/About' }, 

      // the child views will be defined here (absolutely named) 
      '[email protected]': { template: 'Look I am a column!' }, 

      // for column two, we'll define a separate controller 
      '[email protected]': { 
       templateUrl: '/Home/data', 
       controller: 'scotchController' 
      } 
     } 

    }) 
     .state('Account', { 
      url: '/Account', 
      views: { 
       '[email protected]': { templateUrl: '/Account/myAccount' }, 
       // '': { templateUrl: '/Home/About' }, 
       '[email protected]': { 
        templateUrl: '/Navigation/Header', 
        controller: function ($scope) { 
         $scope.username = 'user1'; 
         console.log($urlRouterProvider); 
        } 
       }, 
       '[email protected]': { 
        templateUrl: '/Account/Login', 
        controller: 'accountController' 
       } 
      } 
     }) 
    .state('Account.User', { 
     url: '/User', 
     views: { 
      '[email protected]': { 
       templateUrl: '/Navigation/AuthenticateHeader', 
       controller: function ($scope) { 
        $scope.message = 'User Logged in.'; 
        console.log($urlRouterProvider); 
       } 
      }, 
      '[email protected]': { 
       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, есть соответствующий маршрут в файле конфигурации маршрута, и эти маршрутные адреса могут быть сопоставлены с templateUrl показывая в $ stateProvider. государство.

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

источник

2015-11-06 13:49:02

AngularJS View не заменен

ответ

Смежные вопросы