how to use angular routing to nest 3 mvc razor models

Question

I want to have a UsersAdmin view that has Account Registration, UserProfile class and a Identity Role class. I am using MVC5 with default Individual Authentication. I am using ui-router for my routing. I have seen many examples using a viewmodel to pass multiple models to a single cshtml view. But I am needing a more complex setup. I created a mock up of what I am looking for. What is the best way to do this.

Here is what my setup looks like

ui-routing

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

Navigation

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

I have no issue using modals for the Create,Details,Edit views if that is a easier solution. However I do not know how to pass the selected Id with its properties to the modal.

Answer 1

I believe that I answered your question to someone else. You want to gather information through the URL, right?

Using routes in AngularJS to gather data