Как использовать angular маршрутизацию, чтобы вставить 3 mvc бритвенные модели

Я хочу иметь представление UsersAdmin с учетной записью, классом UserProfile и классом Role Identity. Я использую MVC5 с индивидуальной аутентификацией по умолчанию. Я использую ui-router для моей маршрутизации. Я видел много примеров, использующих viewmodel для передачи нескольких моделей в одно представление cshtml. Но мне нужна более сложная настройка. Я создал макет того, что я ищу. Каков наилучший способ сделать это. mockup

Вот как выглядит моя установка

щ-маршрутизации

 // Default route
    $urlRouterProvider.otherwise('/Document');

    // Application Routes States
    $stateProvider
      .state('app', {
          abstract: true,
          controller: "CoreController",
          resolve: {
              _assets: Route.require('icons', 'toaster', 'animate')
          }
      })
      .state('app.document', {
          url: '/Document',
          templateUrl: Route.base('Document/Index'),
          resolve: {}
      })
      .state('app.register', {
          url: '/Register',
          templateUrl: Route.base('Account/Register'),
          resolve: {}
      }).state('app.applicationUser', {
          url: '/ApplicationUser',
          templateUrl: Route.base('ApplicationUsers/Index'),
          resolve: {}
      }).state('app.role', {
           url: '/Role',
           templateUrl: Route.base('Role/Index'),
           resolve: {}
     }).state('app.roleCreate', {
           url: '/RoleCreate',
          templateUrl: Route.base('Role/Create'),
          resolve: {}
     }).state('app.userProfile', {
         url: '/UserProfile',
         templateUrl: Route.base('UserProfiles/Index'),
         resolve: {}
     }).state('app.userProfileCreate', {
         url: '/UserProfileCreate',
         templateUrl: Route.base('UserProfiles/Create'),
         resolve: {}
     }).state('app.login', {
         url: '/Login',
         templateUrl: Route.base('Account/Login'),
         resolve: {}
     });
 }

_Layout.cshtml

 <div ui-view class="app-container" ng-controller="CoreController">@RenderBody()</div>

Навигация

 <li>
   <a ui-sref="app.userProfile" title="Layouts" ripple="">
      <em class="sidebar-item-icon icon-pie-graph"></em>
         <span>User Profile</span>
   </a>
 </li>

У меня нет проблем с использованием модалов для представлений Create, Details, Edit, если это более простое решение. Однако я не знаю, как передать выбранный идентификатор своим свойствам в модальный.

Ответы

Ответ 1

ui-router может помочь вам добиться этого, используя

а.

ui-sref='stateName({param: value, param: value})'

Объект parameterr, переданный вместе с именем состояния, можно получить в контроллере, используя $stateParams

б. В вашем контроллере вы можете сделать что-то вроде

if ($stateParams.id != null) {
// service call goes here
}

с. Вам нужно использовать именованные виды Что-то вроде

$stateProvider
  .state('report', {
    views: {
      'filters': { ... templates and/or controllers ... },
      'tabledata': {},
      'graph': {},
    }
  })

где

фильтры

и

tabledate

- это именованные виды.

ui-view имеет достойный пример здесь https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Кстати, я бы предложил сначала разобрать панели, которые являются динамическими (то есть те, чей контент изменяется из-за какого-либо взаимодействия с пользователем) и статические (они не меняются после загрузки). Вы должны смотреть только на ui-views, чтобы заменить динамические части, нет смысла упрощать приложение, помещая все в детское представление. Государства могут очень запутываться очень быстро.

Я использую директиву ng-include для загрузки статических представлений в родительском состоянии и определяю только дочерние состояния для части изменяемых представлений.

<div ng-include="'/MyStaticView'" ng-show="MyCondition == true "></div>